AI website optimization – why semantics and accessibility are more important than ever?
For many years, accessibility and semantic HTML were mostly discussed in the context of digital exclusion and as a good practice. However, many websites didn't treat them as a priority, e.g. due to low actual impact on SEO.
The growth of AI tools, AI-generated summaries in search engines (like AI overviews) mean that the structure of a website is becoming more important than ever due to AI website optimization.
More and more people ask a new question: how to optimize a website for AI tools that read and analyze content automatically? One of the most important answers turns out to be surprisingly simple: semantic HTML and basic web accessibility.
What accessibility and semantics really mean
Accessibility and semantics are two terms almost every web developer knows, but in practice, they are still often ignored. Building websites with semantic HTML and accessibility in mind never fully became mainstream. For years many people believed that only a very small percentage of users rely on tools like screen readers. Because of that, accessibility was often treated as a secondary concern.
Some things started to change with regulations such as the European Accessibility Act, which came into force in June 2025. These regulations are definitely a step in the right direction, but in practice many websites are still not affected by them. As a result, a large number of websites still don't meet even basic accessibility standards.
Making an existing website fully compliant with WCAG can require a lot of work, and more work means higher costs. If only a very small percentage of users benefit from these improvements, many businesses simply asked a question: is it worth it? From a business perspective, this way of thinking isn't surprising.
Why accessibility and semantics have always been important
Semantic structure and accessibility are largely about reducing digital exclusion. If we can make our website accessible to more people with relatively small effort, ignoring that opportunity is simply a mistake. There are also practical benefits for developers - semantic code is easier to read, easier to maintain, and usually easier to expand in the future.
Accessibility is also something we do for our future selves. One day our eyesight will not be as good as today. One day we might try to read something quickly on a small screen or finds something with a slow internet connection in the middle of nowhere. A good approach to optimization, clean and semantic code used now can pay off in such situations.
Despite legal changes, adoption is still slow. And often it's not entirely the developer’s fault. If accessibility work isn't included in the project budget, it may simply not happen. According to the WebAIM Million study, 94.8% of the top one million homepages contain detectable WCAG 2 A/AA accessibility errors.
Of course, WCAG can sometimes be strict. Not meeting every requirement doesn't automatically mean that a website is completely inaccessible. Modern websites also often focus on complex animations and visual effects that make full compliance more difficult. Still, even with these considerations, it's clear that many websites don't meet even basic accessibility practices.
Why are they even more important now
Interestingly, the push toward better semantics may now come from an unexpected direction: artificial intelligence. For years accessibility discussions focused mainly on human users. But semantic HTML is also extremely useful for machines - AI tools and crawlers need to understand the structure of a page before they can interpret its content.
Semantic HTML helps them understand:
- the structure of the page
- the hierarchy of information
- the relationship between different sections of content
A clear and logical structure makes it easier for crawlers to scan and interpret the page. As a result, the content has a better chance to appear in AI-generated summaries, including AI overviews, or to be used as a source by AI tools.
You could even say that semantic HTML is becoming a communication layer between websites and AI systems. Of course, content is still king, but if great content is placed inside a chaotic and non-semantic structure, we lose additional opportunities. We may lose users, and we may also lose visibility in AI-powered search experiences. In the past some businesses could ignore a small group of users (sad, but real), but in the AI era, having a website that is difficult for algorithms to understand can become a serious disadvantage.
Tokens are the new currency
A clean and transparent HTML structure can have another important advantage these days. As we well know, AI operates on tokens - every query and every analysis generates token consumption. Often, the more we consume, the more we pay for a specific model or the sooner we hit the usage limit of a given package.
What does this have to do with a website? If a given model or AI tool analyzes the resulting HTML of a given page, for example, via a URL sent to the model, each fragment of the resulting HTML page consumes tokens. Furthermore, if the resulting HTML is too large, the tool may have trouble fitting it into the context window.
In practice, this may mean that websites built in a framework containing a lot of unnecessary divs serving as wrappers, or using CSS frameworks that require adding a large number of CSS classes to the HTML markup, will be more demanding for AI to analyze, and retrieving specific information from them by an AI tool may cost significantly more tokens than with a pure HTML structure with separated CSS styles.
Of course, it's worth noting that the analysis of a website by a specific tool may look different - some tools first use crawlers that clean the website of unnecessary elements by extracting content and only then pass it to the AI model.
Token consumption - a short comparative experiment
Using the GPT-5.3 Codex model, I conducted a simple test to determine how many tokens the model would consume just to read the content of an article at a specific URL. I created two identical pages for this purpose, but with different approaches. Both pages were very simple - contained a basic header with a logo and navigation, a sidebar with few links, a medium-length article, and a simple footer.
The first page was created using the backstay.rules workflow, the second using Tailwind. The model was then asked to read only the article content on both versions of the page based on the URL, without analyzing the content. After performing this action for both versions of the subpage, I checked the token consumption for both queries.
The results were significant: in the case of the Tailwind-based page, the model consumed 63.57% more tokens than in the approach where each HTML element has approximately one CSS class. This means that HTML markup with Tailwind in this scenario costs approximately 1.64x the tokens compared to the backstay.rules approach.
It's worth noting that we're talking about a very simple page containing essentially only an article and a few main elements. In real-world sites with multiple sections, the disadvantage of using multiple CSS classes for each element will be even more significant.
What if my website is not accessible or semantic?
Improving accessibility and semantics to handle AI website optimization usually requires looking at two main areas.
Visual layer
The first area is the visual design - WCAG guidelines define things like:
- minimum color contrast
- minimum clickable element size
- readable typography sizes
Ideally these elements should be considered during the design stage, so if the website is already built without them, visual adjustments may be required. Fortunately, these changes are often not drastic. Sometimes improving color contrast, button styles, or navigation structure is enough.
Code layer
The second area is the code structure, this includes things like:
- using semantic HTML elements
- adding
altattributes to images - using
aria-*attributes when necessary - ensuring the website can be navigated with a keyboard
For many simple websites, improving these aspects is not very difficult, however, some projects require deeper refactoring. A good example is older WordPress websites built with visual page builders. Many older builders didn't pay much attention to accessibility or semantic HTML.
Their output often contains dozens of unnecessary <div> elements used only as wrappers. In such cases it may be better to move away from the visual builder and rebuild the theme using a cleaner approach - for example a custom WordPress theme based on the Gutenberg editor.
This approach can provide better performance, cleaner HTML structure, and improved accessibility.
Conclusion
For many years accessibility and semantic HTML were treated mainly as quality improvements. In the age of AI, they are becoming something more: a key factor that helps machines understand our websites.
If you are thinking about how to make your website agent-friendly, how to prepare your website for AI search, crawlers, and AI-generated summaries, improving its semantic structure and accessibility is one of the best places to start. These potentially invisible things have a huge impact on improving the visibility of website for AI agents.
You don’t always have to rebuild the entire website to achieve this. In many cases the first step is simply understanding what the current problems are. I often start with an accessibility and semantic structure audit, where I analyze both the design layer and the code structure of the website.
Based on that audit it's usually possible to identify practical improvements - sometimes small design adjustments (like color contrast or navigation structure), and sometimes deeper development work such as improving the HTML structure or removing unnecessary markup generated by visual builders.
If you have a website that might struggle with accessibility, semantics, or clean HTML structure and you want to improve it, feel free to contact me. I can help with the audit, propose realistic improvements, and implement them on the design and development side.