WCAG 1.3.3: Sensory Characteristics
“Click the green button.” “See the box on the right.” “When you hear the beep…” Instructions like these quietly exclude anyone who cannot perceive the cue they lean on. This criterion asks that instructions never rely solely on shape, color, size, visual location, orientation, or sound. The fix is almost always the same: identify the thing by its name, and the sensory hint becomes a helpful extra rather than the only way in.
The success criterion, in full
Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.
The key word is solely. You may reference a sensory characteristic as long as it is not the only way to identify the component. A note in the specification adds that for requirements related to color specifically, you should also refer to 1.4.1 Use of Color.
Who this helps
An instruction is only useful if the reader can act on it. When instructions lean on a single sensory cue, whole groups of users are locked out of following them:
Blind and low-vision users
A screen reader conveys no shape, color, or on-screen position. 'Click the round icon on the right' is meaningless; 'click Play' works perfectly.
Color-blind users
Roughly 1 in 12 men cannot reliably distinguish red from green. 'Press the green button' leaves them guessing between controls that look the same to them.
Deaf and hard-of-hearing users
Instructions that depend on sound — 'wait for the beep', 'listen for the chime' — never reach users who cannot hear the audio cue.
Mobile and responsive users
Layouts reflow: a menu 'on the right' on desktop moves to the top or into a drawer on a phone. Location-based instructions break as the design adapts.
Users with cognitive disabilities
A concrete name ('the Submit button') is easier to locate and remember than an abstract spatial or visual description of where something sits.
Voice-control users
People who operate a page by speaking control names ('click Submit') depend on those names existing — position and color are not something they can say.
What the requirement covers
The criterion targets instructions — any text that tells a user how to understand or operate content. It fails when the only way to identify the thing the instruction points at is a sensory characteristic. There are six named characteristics to watch for:
- Shape. “Click the round button”, “select the square icon”. Shape is invisible to screen readers and unclear even to many sighted users.
- Color. “Press the green button”, “fields marked in red are required”. Fails color-blind users; overlaps with 1.4.1 Use of Color.
- Size. “The large button”, “the small link at the end”. Size is relative and changes when users zoom or reflow the page.
- Visual location. “The menu on the right”, “the box below”, “instructions in the left column”. Position shifts by viewport and means nothing in a linear reading order.
- Orientation. “Rotate to landscape and tap the bar along the top”. Orientation may be fixed by mounting or by the user’s own needs.
- Sound. “When you hear the beep”, “listen for the chime”. Audio-only cues exclude deaf and hard-of-hearing users.
The fix: add a non-sensory identifier
You do not have to strip out sensory cues — you have to make sure they are never the onlycue. Reference the control by its visible text or accessible name, and the sensory description becomes a helpful extra. “Click the green Save button” passes, because “Save” identifies the control on its own. This criterion is a close companion to 1.3.1 Info and Relationships and is broader than 1.4.1 Use of Color, which addresses color alone.
Pass and fail examples
✓ Passes 1.3.3
- “Click the Save button to store your work.”
- “Use the Searchfield to find a product” — named, not “the box at the top”.
- “Required fields are marked with an asterisk (*) and the word Required” — text, not color alone.
- “Click the green Savebutton” — color is fine because “Save” identifies it.
- “A confirmation message appears when the upload finishes” — a visible cue, not just a beep.
✗ Fails 1.3.3
- “Click the green button to continue.”
- “Select the round icon to play the video.”
- “Use the menu on the right to navigate.”
- “See the instructions in the box below.”
- “When you hear the beep, your file is ready.”
- “Tap the large button to submit.”
Code examples
Color and shape: name the control
Replace the sensory description with the control’s visible label. The color and icon can stay — they just can’t be the only identifier.
<!-- ✗ Instruction relies on color / shape alone -->
<p>To continue, click the green button.</p>
<p>Select the round option to subscribe.</p>
<button class="btn-green"></button>
<!-- ✓ Instruction names the control; color is a bonus -->
<p>To continue, click the "Save" button.</p>
<p>Select the "Monthly plan" option to subscribe.</p>
<button class="btn-green">Save</button>Visual location: refer to labels, not position
Position changes when a layout reflows and means nothing in a screen reader’s linear order. Point to a named landmark or control instead.
<!-- ✗ Instruction relies on visual location -->
<p>Use the menu on the right to navigate.</p>
<p>Read the notes in the left-hand column.</p>
<p>Click the button below to submit.</p>
<!-- ✓ Instruction refers to a named element -->
<p>Use the "Main navigation" menu to move between sections.</p>
<p>Read the "Author notes" section for details.</p>
<p>Click the "Submit form" button when you are ready.</p>
<nav aria-label="Main navigation"> ... </nav>
<button>Submit form</button>Sound and status: add a visible, programmatic cue
An audible signal alone excludes deaf users. Pair it with visible text and announce it to assistive technology with a live region.
<!-- ✗ The only completion cue is a beep -->
<p>Listen for the beep when your upload finishes.</p>
<audio src="beep.mp3" autoplay></audio>
<!-- ✓ A visible message, announced to assistive tech -->
<p>A confirmation message appears when your upload finishes.</p>
<div role="status" aria-live="polite">
Upload complete. Your file has been saved.
</div>Interactive demo
Switch between the sensory characteristics below to compare an instruction that relies solely on the cue with one that names the control. Toggle the color-blind view to see how a color-only instruction collapses when the color can’t be told apart.
Relies on color only
“To save, click the green button. To cancel, click the red button.”
Names the control
“To save, click the Save button. To cancel, click the Cancelbutton.”
Even without color, the visible labels identify each button.
Common failures
- Instructions that identify a control only by color: 'click the green button', 'red fields are required'.
- Instructions that identify a control only by shape: 'press the round button', 'the square icon stops playback'.
- Instructions that identify a control only by size: 'tap the large button', 'the small link at the bottom'.
- Instructions that rely on visual location: 'the menu on the right', 'the box below', 'in the left column'.
- Instructions that rely on orientation: 'rotate to landscape and use the bar along the top'.
- Instructions that rely on sound: 'wait for the beep', 'listen for the chime to know it saved'.
- Icon-only controls with no visible label or accessible name, so there is no non-sensory way to refer to them.
- Help text and tutorials written against a fixed desktop layout, so 'top-right' and 'below' are wrong on mobile.
How to test for 1.3.3
- 1
Find every instruction on the page
Scan body copy, form help text, tooltips, onboarding steps, and error messages for any sentence that tells the user how to find or operate something. These are the only places 1.3.3 applies.
- 2
Ask what identifies the target
For each instruction, note how it points at its target. If the only identifier is shape, color, size, location, orientation, or sound, it fails. If it also names the control ('the Save button'), it passes.
- 3
Read the page with a screen reader
Listen to each instruction as speech, with no visual context. 'Click the button on the right' becomes impossible to follow; 'click Submit' still works. Anything you can't act on by ear is a failure.
- 4
View through a color-blindness simulator
Use a simulator or browser extension to remove color distinctions. Any instruction that depended on 'the green one' versus 'the red one' will now be ambiguous.
- 5
Reflow and rotate the layout
Shrink to a mobile width and rotate the device. Instructions that named a position ('on the right', 'below') are now pointing at the wrong place — confirming they relied on visual location.
- 6
Mute the audio
Turn sound off and complete any flow that signals status audibly. If you can no longer tell when an action finished, the instruction relied solely on sound.
For a structured audit, work through the full WCAG 2.2 checklist.
Related Success Criteria
Information, structure, and relationships can be programmatically determined.
Content can be presented in a meaningful sequence without losing meaning.
Content does not restrict its view to a single display orientation.
The purpose of input fields can be programmatically determined.
The purpose of User Interface Components can be programmatically determined.
Frequently asked questions
What does WCAG 1.3.3 Sensory Characteristics require?
It requires that instructions for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound. In plain terms, when you tell users how to find or use something, you must identify it by something they can perceive regardless of ability — usually its visible text or programmatic name. You may still mention the sensory cue as an extra hint, but it cannot be the only way to know which thing you mean. It is a Level A criterion and has been part of WCAG since 2.0.
Does 1.3.3 mean I can never mention color, shape, or location?
No. The word that matters is 'solely'. You are free to say 'click the green Save button in the top-right corner' because the word 'Save' identifies the control on its own — the color and location are just additional, redundant help. The failure is when the sensory cue is the ONLY identifier, as in 'click the green button' or 'use the menu on the right', where a user who cannot perceive color or position has nothing else to go on. Add a non-sensory identifier and the sensory cue becomes a bonus rather than a barrier.
How is 1.3.3 different from 1.4.1 Use of Color?
They overlap but 1.3.3 is broader. 1.4.1 Use of Color deals specifically with color as the only visual means of conveying information, indicating an action, or distinguishing an element. 1.3.3 covers color too, but also shape, size, visual location, orientation, and sound — and it is specifically about instructions for understanding and operating content. A page can pass 1.4.1 (color is not the issue) yet still fail 1.3.3 if its instructions rely on shape or position. Treat them as complementary: fix color for 1.4.1, and fix every sensory-only instruction for 1.3.3.
Which sensory characteristics does the criterion name?
The success criterion explicitly lists shape ('the round button'), color ('the green link'), size ('the large icon'), visual location ('the box on the right', 'the third column', 'below'), orientation ('portrait vs landscape'), and sound ('when you hear the beep'). Any instruction that leans only on one of these is at risk. The reliable fix in every case is the same: refer to the control or content by its visible name or label, which is perceivable through text, speech, and braille alike.
What is the recommended fix for a sensory-only instruction?
Reference the control by its visible text or accessible name rather than its appearance or position. 'Click Submit' works everywhere; 'click the button below' does not. If a control has no visible text — an icon-only button, for example — give it an accessible name and refer to that name in your instructions. This single habit, naming things instead of describing where or how they look, resolves the large majority of 1.3.3 issues and also makes your instructions clearer for sighted users on small screens where 'right' and 'below' shift around.
How does 1.3.3 relate to 1.3.1 Info and Relationships?
They are companion criteria under Guideline 1.3 Adaptable. 1.3.1 asks that structure and relationships conveyed visually are also available programmatically, so assistive technology can present them. 1.3.3 addresses the instructions that tell users how to operate that content, making sure those instructions do not depend on sensory perception. Together they ensure both the content's structure and the guidance for using it survive being converted into speech, braille, or a reflowed mobile layout.