Perceivable · 1.3 Adaptable
In content built with markup languages, the purpose of interface components, icons and page regions must be programmatically determinable, for example through landmarks, autocomplete values or standard semantic attributes.
Live demo
The same task, done two ways: switch between the version that passes and the one that fails, or put them side by side. Everything in the box is live, so try it with a keyboard, a pointer or a screen reader.
Turn on Personalise in each version and watch which icons change into words.
Waterproof leather boots with a warm lining, $89.
Free returns within 30 days.
Waterproof leather boots with a warm lining, $89.
Free returns within 30 days.
The tools follow the version you last used.
What happened
Why it passes
The purpose of each icon and each region is marked up in code, so the Personalise switch can replace the icons with plain words the person recognizes.
Why it fails
The icons have names for screen readers, but their purpose is not marked up and the regions are plain div elements. Personalise cannot change anything, so the person has to guess what each picture means.
Examples
Five examples, each one running: the usual ways this criterion fails, and code that passes. Listen to them, measure them, or copy the code.
Fails
Live preview
<div class="top"> <div class="menu"><a href="/">Home</a> <a href="/deals">Deals</a></div></div><div class="content"> <h1>Today's deals</h1></div><div class="bottom">Customer service: 0800 123 456</div>div elements carry no meaning, so tools cannot find the navigation or the main content, or hide everything else to simplify the page.
Passes
Live preview
<header> <nav aria-label="Main"><a href="/">Home</a> <a href="/deals">Deals</a></nav></header><main> <h1>Today's deals</h1></main><footer>Customer service: 0800 123 456</footer>header, nav, main and footer map to the banner, navigation, main and contentinfo landmark roles, so the purpose of each region is machine-readable.
+ aria-label="Delete message"
Fails
Live preview
<button type="button" class="icon"> <svg viewBox="0 0 24 24" aria-hidden="true"> <path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/> </svg></button>Only the trash can picture shows that this button deletes. Nothing in the code states it, so assistive tools cannot present it as a word or a familiar symbol.
Passes
Live preview
<button type="button" class="icon" aria-label="Delete message"> <svg viewBox="0 0 24 24" aria-hidden="true"> <path d="M4 7h16M9 7V4h6v3M6 7l1 13h10l1-13"/> </svg></button>The accessible name states what the button does in code, not only in the picture, so assistive tools can speak or show it in a form the person understands.
Passes
Live preview
<form role="search"> <label for="q">Search products</label> <input id="q" name="q" type="search"> <button type="submit">Search</button></form>role="search" marks the purpose of the region, so assistive tools can take the person straight to the site search.
Why it matters
People with cognitive disabilities can use tools that add familiar symbols, hide nonessential content or simplify the page, which only works when purposes are machine-readable.
W3C: Understanding 1.3.6Level AAA
Level AAA is the highest level. It is not required for whole sites, but it is worth meeting where you can.
Where it is required
No law on this site requires Level AAA criteria for whole sites.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures