WCAG 1.3.3 Sensory Characteristics: Clear Instructions

"Press the green button on the right"

That sentence is easy for a sighted user with full color vision on a wide screen. Now try it as a blind screen reader user, who hears no colors and no positions. Try it as a person with red and green color blindness. Try it on a phone, where "on the right" has become "somewhere further down". Each of them is stuck, and the instruction is the problem, not the button.

This is the situation the rule targets: guidance that only makes sense if you can see or hear a particular quality of the page.

What WCAG 1.3.3 actually requires

Instructions for understanding or operating content must not depend only on sensory characteristics. WCAG names them: "shape, color, size, visual location, orientation, or sound" (WCAG 2.2, 1.3.3). You may still mention them. The rule is about the word only. Add something that does not need eyes or ears, which in practice is almost always the visible name of the thing.

Who relies on non-sensory instructions

• Blind and low vision users cannot use color, shape or layout cues, and screen magnifier users view a sliver of the screen at a time.
• Color blind visitors often confuse red with green, or orange with brown.
• Deaf and hard of hearing users miss audio prompts such as chimes and spoken cues.
• Phone users and anyone zoomed in see a stacked layout where left and right no longer exist; reflow explains why that layout is required.
• People with cognitive disabilities often find a named target easier than a described one.

Before and after in the markup

<p>To save your draft, use the round icon at the top right.</p>
<button type="button" class="icon-round">
  <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M5 3h14v18H5z"/></svg>
</button>

<p>To save your draft, select Save draft.</p>
<button type="button" class="icon-round">
  <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M5 3h14v18H5z"/></svg>
  Save draft
</button>

The visible word also helps voice control users, who can say "click Save draft". Matching the visible label with the accessible name is a separate rule; see label in name.

Copy patterns that fail, and rewrites

A 1.3.3 wcag review in six steps

Automated checkers cannot read the meaning of your copy, so this check is manual. Content editors can do it as well as developers.

1. Collect the instructions. Gather every piece of text that tells people how to use the page: form hints, help text, error messages, onboarding tips, video scripts and chatbot replies.
2. Search for sensory words. Look for left, right, top, bottom, beside, round, square, big, small, red, green, color names, icon names, beep, chime and tone.
3. Ask the blindfold question. For each match, ask whether someone who cannot see or hear the page could still follow the instruction from the words alone.
4. Check the named control exists in text. If an instruction names a button, confirm the button has that same visible text or accessible name.
5. Zoom and narrow the page. View the page at 400 percent zoom or phone width and see whether positional words like "on the right" are still true.
6. Play any sound cues muted. Turn the sound off and confirm every audio alert, such as a timer chime, also shows a text message.

Neighbouring rules: color, structure and orientation

Color shows up in two rules, which confuses many teams. 1.4.1 covers color used as the only way to show information, such as a red border marking an error. 1.3.3 covers instructions that point to color. A form with red required fields and the hint "red fields are required" fails both. Read the use of color guide for the visual side.

1.3.4 Orientation is unrelated despite the shared word: it is about not locking a page to a single screen orientation. 1.3.1 deals with structure in code, which you can review in our structure page.