Colour, symbols, ARIA: what AI assistants recognise on websites – and what they don't

1 November 2026

Reading time: about 13 minutes

The experiment

I tested nine technical variants of the same event listing with ChatGPT, Gemini and Claude. Each time I asked the same question: “Which events on [address of the test page] are already booked out?” The test page and all conversations were in German, so the exact wording was „Welche Termine auf [Adresse der Testseite] sind bereits ausgebucht?“ The assistants tested:

ChatGPT, free version, signed in
Gemini “Automatic”, free version, signed in
Claude Sonnet, free version
Claude Opus, paid version, browser extension “Claude in Chrome”, level “Medium”

As of late October 2026. Language models change so quickly that what I write today will very probably no longer be true in future. Even so, I wanted to test it myself instead of relying on claims like “the AI reads the accessibility tree anyway”. This test is an exploratory comparison in practice at one specific point in time – not a representative study and not a general statement about all AI models.

The result: only three variants were read correctly by all four assistants. All but one variant were accessible. The most reliable were visible text directly in the table cell and images with correct alternative text. ChatGPT and Gemini did not read SVG elements, so the ARIA attributes on them did not work either. And misleading file names led Gemini to wrong answers.

One insight: what works for screen reader users is not automatically readable for AI assistants. Visible text or an image with correct alternative text, on the other hand, is the most robust basis – for people, assistive technologies and AI.

Results: only 3 of 9 variants were read correctly by all assistants

Which events are booked out? The answers of four AI assistants to nine variants of the same event listing, sorted by the number of correct answers
Variant	Accessible?	ChatGPT free	Gemini free	Claude Sonnet free	Claude Opus paid, in the browser
2 · Visible text	yes	correct	correct	correct	correct 6 s
4 · `<img>` + `alt`	yes	correct	correct	correct	correct via screenshot, 24 s
8 · `<img>` + `aria-labelledby` neutral file name	partly name present, but `alt` missing	correct	correct	correct	correct via screenshot, 29 s
3 · Hidden text	partly yes for screen readers, not visually	wrong	correct	correct	correct 12 s
5 · SVG + `<title>`	not reliable inconsistent support	wrong	wrong	correct	correct via source code, 20 s
7 · SVG + `<title>` + `aria-labelledby`	yes	wrong	wrong	correct	correct via screenshot, 27 s
9 · like 8 misleading file names	partly like 8	correct	wrong read the file names	unsure noticed the contradiction	correct via screenshot, 18 s
1 · Colour only	no	wrong	wrong	unsure	correct via screenshot, 33 s
6 · SVG + `aria-label`	yes	wrong	wrong	unsure	correct via screenshot, 24 s

Correct = both booked-out events named completely and with the right date. Wrong = not recognised correctly, wrong events or invented data. Unsure = the model itself explains that it cannot reliably recognise the status. With some of its wrong answers, ChatGPT only said after a few sentences that it could not reliably recognise the status.

All four assistants recognised three variants correctly: visible text in the table cell (variant 2), an <img> with alt (variant 4) and an <img> that takes its name from the legend via aria-labelledby (variant 8). Without extra work, though, it only went smoothly with visible text: the paid AI needed just 6 seconds and no screenshot. For the two image variants it needed 24 and 29 seconds and took a screenshot each time.

Important: the results show whether a piece of information could be found at all – not always which technical mechanism was responsible. Especially in the variants with a legend and file names, several clues may have played a part at the same time.

Skip straight to the results in detail

Details of my demo page

Imagine your website lists events. Next to each event you can see whether there are still places available, whether only a few are left – or whether the event is already booked out.

This is often done like this: a green dot means “places available”, a yellow dot “only a few places left”, a red dot “booked out”. What the colours mean is explained in a legend above or below the table.

The problem with this: people with red-green colour vision deficiency cannot read this reliably. They may see dots, but not which of them means “available”, “few places” or “booked out”.

Red-green colour vision deficiency affects a large part of the population. And for people who read the page under stress, on a small screen or with limited attention, information conveyed by colour alone is needlessly tiring too.

Simplest solution: make the text visible directly in the table

<td>
  <span class="punkt punkt--rot" aria-hidden="true"></span>
  Ausgebucht
</td>

The coloured dot is now only a visual aid. The information itself is written next to it as text – Ausgebucht is German for booked out.

This has many advantages:

People with colour vision deficiency recognise the status immediately.
Screen readers read the information aloud.
The meaning does not first have to be “decoded” via a legend.
The cognitive load drops, because nobody has to match colours to meanings in their head.

What if there is no room for text?

Sometimes, for design reasons, text does not fit into every table cell – in very narrow layouts, for example, or when the status appears several times per row. Then distinguishable symbols are a better solution than colour alone.

Instead of a coloured dot, you can use a tick, a warning triangle and a cross, for example. If there is no text beside them, these symbols need a text alternative – for an image, via alt (External link, opens in a new window).

<td>
  <img src="/img/icon-ausgebucht.svg"
       width="18" height="18"
       alt="Ausgebucht">
</td>

Visible text and an image with correct alternative text are both robust: all four assistants recognised both variants correctly. The easiest to read is the combination of symbol and visible text. The symbol makes the status recognisable at a glance, the text makes it unambiguous.

The nine variants

For the test, I created an event listing with seven events. Two of them were booked out:

„Barrierefreie PDFs“ (Accessible PDFs) on 11 February 2027
„Workshop: Screenreader für Einsteiger*innen“ (Workshop: screen readers for beginners) on 19 March 2027

All variants contained the same events and the same information. The only difference was the technical implementation of the status.

Details to expand: you see an excerpt of the page and the code of the table cell with the booked-out event. I have shortened the shapes inside the SVG symbols to “…”. The code is in German, as on the test page: Ausgebucht means booked out, Plätze frei places available, and rot red.

Variant 1 · Colour only

A coloured dot made with CSS, without text; the meaning is given only in a separate legend.

<td>
  <span class="dot dot--rot"></span>
</td>

Accessible: No. Colour is the only carrier of information here. That fails WCAG success criterion 1.4.1 Use of Color (External link, opens in a new window): colour must not be the only visual means of conveying information.

Variant 2 · Visible text in the cell

The dot is decorative, the status is written next to it as text. A separate legend is no longer needed.

<td>
  <span class="status">
    <span class="dot dot--rot" aria-hidden="true"></span>
    Ausgebucht
  </span>
</td>

Accessible: Yes. The information is visible, available as text and does not depend on colour.

Variant 3 · Symbol plus hidden text

From here on, there are symbols with distinct shapes instead of dots – tick, warning triangle, cross. The symbol is hidden from assistive technologies, and the status sits next to it as visually hidden text.

<td>
  <svg class="status-icon" width="18" height="18" viewBox="0 0 18 18"
       focusable="false" aria-hidden="true">
    …
  </svg>
  <span class="visually-hidden">Ausgebucht</span>
</td>

Accessible: Partly. For screen reader users, the status is there. For sighted people who cannot reliably tell colours or shapes apart, however, the status is not visible.

Variant 4 · Image with alternative text

The symbol is an image file with an alt attribute.

<td>
  <img class="status-img" src="/img/status-rot.svg"
       width="18" height="18" alt="Ausgebucht">
</td>

Accessible: Yes. For images that carry meaning, alt is the native HTML mechanism for a text alternative.

Variant 5 · SVG with title

The SVG (External link, opens in a new window) gets a <title> as its only label.

<td>
  <svg class="status-icon" width="18" height="18" viewBox="0 0 18 18"
       focusable="false" role="img">
    <title>Ausgebucht</title>
    …
  </svg>
</td>

Accessible: Not reliably. Support for <title> in SVG (External link, opens in a new window) varies between browsers and assistive technologies. Linking it via aria-labelledby is more robust.

Variant 6 · SVG with aria-label

The SVG gets its name directly via aria-label (External link, opens in a new window).

<td>
  <svg class="status-icon" width="18" height="18" viewBox="0 0 18 18"
       focusable="false" role="img" aria-label="Ausgebucht">
    …
  </svg>
</td>

Accessible: Yes. aria-label can give an element with role="img" (External link, opens in a new window) an accessible name (External link, opens in a new window).

Variant 7 · SVG with title and aria-labelledby

The SVG contains a <title> that aria-labelledby points to.

<td>
  <svg class="status-icon" width="18" height="18" viewBox="0 0 18 18"
       focusable="false" role="img" aria-labelledby="status-titel-2">
    <title id="status-titel-2">Ausgebucht</title>
    …
  </svg>
</td>

Accessible: Yes. This combination is the more robust SVG variant, because aria-labelledby explicitly uses the <title> as the accessible name.

Variant 8 · Image with aria-labelledby, neutral file name

The symbol is an <img> without an alt attribute. It gets its name from the legend via aria-labelledby. The files have neutral names, icon-01.svg to icon-03.svg.

In the table cell:

<td>
  <img class="status-img" src="/img/icon-01.svg" width="18" height="18"
       aria-labelledby="legende-rot">
</td>

In the legend:

<img class="status-img" src="/img/icon-01.svg" width="18" height="18"
     alt=""> <span id="legende-rot">Ausgebucht</span>

Accessible: Partly. The accessible name „Ausgebucht“ comes from the legend, but the alt attribute is missing. I would not recommend this variant in practice: alt="Ausgebucht" is the native and most robust way for images that carry meaning.

Variant 9 · Like 8, but with misleading file names

Structure and appearance as in variant 8, only the file names are wrong: the red cross is called plaetze-frei.svg (places available), the green tick ausgebucht.svg (booked out). In the legend, the same files stand next to the correct words.

In the table cell:

<td>
  <img class="status-img" src="/img/plaetze-frei.svg" width="18" height="18"
       aria-labelledby="legende-rot">
</td>

In the legend:

<img class="status-img" src="/img/plaetze-frei.svg" width="18" height="18"
     alt=""> <span id="legende-rot">Ausgebucht</span>

Accessible: Partly, as in variant 8. For screen readers nothing changes – file names are not read aloud, the name comes from aria-labelledby. The variant tests whether an AI trusts the file name more than the legend.

Screenshots of the experiment

Select an image to enlarge it. Press Esc or click beside it to close the view again. The full German text of each conversation is below the enlarged image.

ChatGPT

Gemini

Claude Sonnet

Claude Opus

The results in detail

AI assistants are often described as new assistive technologies: they can summarise information, read web pages and take over tasks in the browser. For some people – with a visual impairment, cognitive impairments or under time pressure, for example – this can make access to information much easier.

But: an AI assistant is not automatically an assistive technology in the sense of the accessibility standards. And “accessible” does not automatically mean “reliably readable by every AI”.

ARIA and SVG icons: there for screen readers, invisible to ChatGPT and Gemini

According to web.dev (External link, opens in a new window), AI agents can in principle process a web page in several ways: as a screenshot, as an HTML or DOM representation and via the accessibility tree. The accessibility tree contains, among other things, the roles, names and states of controls; this makes it relevant for assistive technologies and for AI agents alike.

Which of this information a particular model actually uses, however, depends on the product, the mode, the way it accesses the page and how the page is built.

Variant 6 makes sense for screen readers in principle: the SVG has an accessible name via aria-label. But none of the three free AI assistants found the information. ChatGPT and Gemini did not recognise the status in any of the SVG cases – neither via role="img", aria-label, aria-labelledby nor <title>.

Claude Sonnet did at least find <title> (variants 5 and 7). That makes sense: <title> is actual text in the DOM. aria-label and aria-labelledby, on the other hand, are attributes that take effect mainly in the accessibility tree. If an assistant processes the page as text, HTML or a screenshot, this information can be missing.

With an <img> (variant 8), on the other hand, aria-labelledby worked for all of them. It may also have helped that the same image file stands right next to the word in the legend.

File names can distort AI answers

Variant 9 looks exactly like variant 8, only the file names lie: the red cross is called plaetze-frei.svg (places available), the green tick ausgebucht.svg (booked out). Gemini fell for it and named exactly the three events with places available as booked out. Claude Sonnet noticed the contradiction between legend and file names, listed both readings and did not commit itself. ChatGPT and Claude Opus got it right – Opus took a screenshot to do so.

For screen readers, file names are normally invisible, but an AI evaluates this text too. So meaningful file names are good – but only if they are correct.

Honest uncertainty is better than a wrong answer

In several cases, ChatGPT and Gemini claimed with confidence that there were no booked-out events. Only later in the answer did it sometimes become clear that they were not sure. Gemini sometimes claimed that all events had places available.

In the cases where Claude Sonnet could not read the status, it explained that it could not make a reliable statement. That is clearly the better way to fail: honest uncertainty is better than an invented answer.

In some answers, the month and the name of the event were right, but the day was not. 19 January became 2 January, for example, and 11 February became 4 February. Anyone who takes answers like these on trust may turn up on the wrong day.

Paid vs free AI

Claude Opus ran as a browser extension: it can see the rendered page, run scripts and take screenshots – a significant difference from plain chat access.

Claude Opus recognised all nine variants correctly. To do so, it looked at the source code, ran scripts on the page and took a screenshot for six of the variants – taking between 6 and 33 seconds per question. So the paid AI drew on more sources of information and delivered the correct result in every case. But it needs more time and more computing power to do so.

This brings us to sustainability: a good AI will get to the result even with messy code, using screenshots and scripts. But this effort is not necessary – a stable, standards-compliant implementation saves errors, time and energy.

Side note: not every assistant respected `robots.txt`

At first, the test page contained:

User-agent: *
Disallow: /

Claude Sonnet was the only assistant tested that respected the block. It suggested pasting in the content or sending a screenshot instead of reading the page on its own initiative.

ChatGPT and Gemini answered despite the block. For the actual test series, I then lifted the block.

This is more than a technical detail: it concerns transparency, autonomy and the question of which kinds of access website operators can actually control.

Recommendations for better AI answers and accessibility

Important information as visible text or as an image with alternative text Colour may complement, but not carry the information on its own. WCAG success criterion 1.4.1 Use of Color requires this. Symbols without visible text need alternative text.
Show the status directly in the table cell Not only in a separate legend.
If only symbols are used: <img> instead of inline SVG For images that carry meaning, an <img> with alternative text is more robust than an inline SVG whose meaning is conveyed only through ARIA or <title>.
Image file names matter! An AI takes all the information it can get, and if a misleading file name such as ausgebucht.svg (booked out) is used for events with places available, the AI may well misinterpret it (Gemini!).
Offer contact details directly on the page The AI reads the whole page and passes on what is there: in my test, it kept referring to the waiting list and the registration form. For anything important, a way to get in touch therefore belongs directly on the page.

Google has similar recommendations for increasing AI visibility

In “Build agent-friendly websites”, web.dev recommends, among other things, semantic HTML, real <button> and <a> elements, associated labels and a stable layout. That matches my results.

Everything we suggest to make a site “agent-ready” also makes sites better for humans.

Build agent-friendly websites, web.dev

My conclusion

It surprised me that ChatGPT and Gemini did not recognise SVG elements at all. One possible but unproven explanation came from an AI itself: “SVGs are almost always filtered out completely by the scraping algorithms, because they mostly contain only decorative code (paths, circles, squares).” I am a real fan of inline SVGs, but in future I will think even harder about how I provide important text information for an SVG. If some AI assistants do not recognise text inside the SVG element, the text has to be available outside the SVG.

Visible text or correct alternative text. Semantic HTML. Clear tables. Redundant information.

That makes websites not only more accessible, but also more reliable for AI assistants. How to teach an AI accessibility while it is building your website is the subject of my article How to make your AI-generated website accessible and good for SEO.

Sources:

How was this article written? Concept and first draft by me, revised by Perplexity, then revised by me. English translation by Claude.