As a web designer, I come across more and more websites built with AI. Especially in the case of associations and non-profits, it is understandable that small budgets are stretched with the help of AI. At the moment, one of the main sources of revenue for AI companies is precisely the generation of code for all kinds of purposes. AI is a genuinely effective tool for solving the harder programming problems, and I use it for that myself. Design work, however, is not something I am willing to outsource to AI.
The layouts of AI-generated websites are often easy to recognise, because certain features, elements and solutions keep recurring in them. Unfortunately this means the same accessibility problems recur on these sites as well.
How do you recognise a website built with AI?
1. Large headings with one highlighted word
These areas, usually called hero sections, often turn up on front pages. The headings may also contain a long em dash (—), which has become something of an AI signature.
2. Decorative headings above the actual headings
Above the actual heading there is often a word or a phrase that looks like a heading but is not one. I call these decorative headings. Alongside them you will usually also find dots, lines or button-like styles.
3. Rounded boxes arranged in a grid
The corners of the boxes and the images are usually rounded, and when the cursor moves over them, the box lifts or shifts slightly and its shadow deepens. These box layouts are typically used to present products and their features, latest news or upcoming events.
One reason why so many AI-generated websites resemble one another is that they often use a style library called TailwindCSS. A fairly similar phenomenon took place earlier in the 2010s, when Twitter released its own style library, Bootstrap.
Another reason is developer laziness and a willingness to settle for whatever AI suggests, without any deeper design or accessibility thinking. The selling point of style libraries is precisely that even with weaker design skills you can quickly and easily produce something that looks good enough. On a superficial look these sites may indeed appear good enough, but in terms of accessibility they are often left with substantial gaps.
What accessibility problems does AI commonly produce?
Insufficient contrast in various elements
If you leave the choice of colours entirely to AI, it is highly likely that WCAG 2.2 success criterion 1.4.3 Contrast (Minimum) (AA) will not be met. The criterion requires a contrast ratio of at least 4.5:1 between ordinary text and its background, and at least 3:1 for large text. Human designers often fail this criterion too, if the design is guided only by what looks elegant or stylish. When accessibility is taken into account from the very beginning, the fixes do not arrive later as a separate invoice.
No skip link
One of the easiest ways to improve the accessibility of a website is to add a skip link. It lets a visitor browsing the site with a keyboard jump straight to the main content of the page without tabbing through the navigation links first. Adding the link satisfies success criterion 2.4.1 Bypass Blocks (A). From what I have seen, this link is missing from many AI-generated websites.
Inadequate alt texts
Many images on AI-generated sites are missing their alt texts entirely. In some cases the description has ended up being the file name of the image or a nearby heading. Sometimes the description does say something about the image, but does not actually describe what is clearly visible in it. Alternative texts, or alt texts, are a requirement of the WCAG 2.2 guidelines in success criterion 1.1.1 Non-text Content (A).
The right content for an alt text depends on the purpose of the image. I have written earlier in more detail about what kind of alt text suits an informative, a functional and a decorative image.
Text that is too small and too faint
As I mentioned earlier, AI often produces decorative headings alongside the actual headings of a site, and these tend to use a very small font size together with a faint colour. Headings like this can naturally be difficult to read. WCAG 2.2 does not set a minimum size for text on a web page, but small and faint text can easily leave success criterion 1.4.3 Contrast (Minimum) (AA) unmet.
Broken heading hierarchy
AI-generated sites do not always follow a hierarchical choice of heading levels. Most sites do contain an H1 heading, but whether an H2 or an H3 follows it is rather more variable. When heading levels have not been chosen systematically, success criterion 1.3.1 Info and Relationships (A) is not met. In the absence of accessibility thinking, AI most likely picks the heading it "sees" as the best fit for that spot in terms of size and style, rather than the heading level that should come next in the hierarchy.
Focus styles that do not stand out
For a visitor browsing the site with a keyboard, it is essential that the focus style of each element stands out clearly. AI-generated sites often rely on the browser's default focus style, and that in itself is not a mistake. Contrast requirements do not apply to browser default styles that the author has not modified. The default style may well be sufficient in many cases, but problems arise when it is only half replaced. The most typical case is that the default outline is removed from view and all that remains is, say, a faint shadow.
The contrast between the focus indicator and the colours adjacent to it must be at least 3:1 (1.4.11 Non-text Contrast, AA), and the focus must be visible in the first place (2.4.7 Focus Visible, AA). Sometimes sufficient contrast is only reached once the background colour of the element is changed as well as the outline. The AAA-level criterion 2.4.13 Focus Appearance goes further still. It requires the focus indicator to be at least two pixels thick, and the focused state to differ from the unfocused state by a contrast ratio of 3:1.
So do not remove the browser's default style without a replacement, and when you measure contrast, measure it between the outline and the colour next to it.
Redundant links
Redundant, or repeated, links are not strictly an accessibility problem but rather a usability one, and it affects screen reader users in particular. Many websites contain sections that offer a taste of the rest of the content on the site. Such sections often present that content in a grid of three or four boxes side by side. A single box usually holds an image, a heading and possibly a short description. AI tends to generate separate link elements for both the image and the heading.
A more accessible solution is to link only the heading and, where needed, to extend its clickable area to cover the image as well. This way a screen reader user, for example, avoids the redundant links that slow down using the site.
AI is a tool, not a designer
It is perfectly possible to produce high-quality and even accessible websites with AI. Someone who knows the field can, if they want, smooth away these recurring features and accessibility problems with more precise prompts.
In accessibility work, however, the human touch remains irreplaceable for now. Automated accessibility tools such as WAVE, axe DevTools and Lighthouse help with the work, but they only catch some of the accessibility problems. That is why, as part of my own website projects, I always test every site I build together with an accessibility expert with visual impairment. The ITAK website redesign is one example of this.
If your association or business needs genuinely accessible websites, then get in touch.