Perceivable · 1.3 Adaptable
Instructions for understanding or operating content must not rely solely on sensory characteristics such as shape, color, size, visual location, orientation or sound. They must also identify items in a non-sensory way, such as by their text label.
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 grayscale or a color blindness filter, then read the screen reader transcript. Try to follow the instructions in each version.
To Priya Shah, account ending 4821
Amount: $120.00
Press the green Send $120 button to send the money, or the red Cancel transfer button to stop the payment. To change the amount, use the round Edit button on the right.
To Priya Shah, account ending 4821
Amount: $120.00
Press the green button to send the money, or the red button to stop the payment. To change the amount, use the round button on the right.
The tools follow the version you last used.
What happened
Why it passes
The instructions name each button by its label, so they still work in grayscale, with color blindness or with a screen reader, which reads out those same labels.
Why it fails
The instructions only say green, red, round and on the right. In grayscale or with red-green color blindness the two buttons look alike, and a screen reader never mentions color, shape or position.
Examples
Four 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
<p>To download your statement, use the button on the right.</p><div class="toolbar"> <button type="button">Print</button> <button type="button">Download PDF</button></div>Position is the only clue. A screen reader user, or someone whose zoomed layout stacks the buttons, cannot tell which one is "on the right" (failure F14).
Passes
Live preview
<p>To download your statement, select <strong>Download PDF</strong>.</p><div class="toolbar"> <button type="button">Print</button> <button type="button">Download PDF</button></div>The instruction uses the button's visible label, which everyone can find by looking, by listening or by searching the page (technique G96).
Fails
Live preview
<h2>Timed quiz</h2><p>Start the quiz when you hear the tone.</p><button type="button">I am ready</button>The only signal to begin is a sound, so people who are deaf or hard of hearing never know when to start.
Passes
Live preview
<h2>Timed quiz</h2><p>Start the quiz when the message below says "Start now". A tone also plays.</p><p role="status" id="quiz-signal">Get ready.</p><button type="button">I am ready</button>The signal also appears as text in a status region, so people who cannot hear the tone can see it, and screen readers announce it when it changes.
Why it matters
People who are blind or have low vision may not perceive shape, position or size, and deaf users may miss sound cues, so instructions that rely only on these leave them stuck.
W3C: Understanding 1.3.3Level A
Level A is the minimum: failing it can shut some people out completely.
Where it is required
Required where the law names WCAG 2.0 or later at this level: the United States, Canada, the European Union, the United Kingdom, France, Germany, Italy, Spain, the Netherlands, Ireland, Norway, Switzerland, India, Japan, Australia, New Zealand and Israel.
How to test
A few concrete steps. Automated tools find some failures; most need a person.
Common failures