Level A

Instructions like "click the round button on the right" carry zero information for screen-reader users and break on any layout that reflows

1.3.3 Sensory Characteristics

In Plain Language

1.3.3 Sensory Characteristics (Level A) says instructions for understanding and operating content must not rely solely on shape, color, size, visual location, orientation, or sound[1]. "Click the round button on the right" fails: a blind user has no model of "round" or "right," and on a narrow viewport "right" reflows to the bottom. The fix is mechanical -- pair every sensory descriptor with a non-sensory identifier (the control's accessible name, a sequential label, or the icon's text alternative).

Sensory cues are allowed as supplemental decoration. "Press Save Draft (the green button on the right)" passes -- the parenthetical is bonus context for sighted users, and the accessible name carries the load for everyone else.

Why It Matters

  • Screen-reader users get the accessible name and the document order, not the visual rendering. Words like "round," "green," "above," or "in the sidebar" resolve to nothing in the accessibility tree.
  • Users with cognitive and learning disabilities may not connect an abstract spatial reference ("the panel on the left") to the affordance the author has in mind, even when they can see the page[1].
  • Responsive layouts move elements. A button that sits "in the upper-right corner" on desktop reflows to the top of a stacked column on mobile, so the instruction is wrong before any assistive technology is involved.
  • Deaf and hard-of-hearing users cannot act on instructions gated on sound ("proceed when you hear the chime"). The spec lists sound alongside the visual characteristics for this reason.
  • 1.3.3 is distinct from 1.4.1 Use of Color: 1.4.1 covers color as the sole means of conveying information; 1.3.3 covers all sensory characteristics in instructions, including shape, position, orientation, and sound.

Examples

Do: Instruction references the button label

To save your progress, press the "Save Draft" button.

✔ Instruction uses the button's text label, not just its appearance

<p>To save your progress, press the
   <strong>"Save Draft"</strong> button.</p>
<button>Save Draft</button>
Don't: Instruction relies on shape alone

Click the round button to continue.

✘ "Round button" relies on shape -- not perceivable by screen readers

<!-- Fails: "round button" relies on shape -->
<p>Click the round button to continue.</p>
<button class="circle-btn"
        aria-label="Continue">&#x25B6;</button>
Do: Color cue supplemented with text

Fields marked * (required) must be filled in.

✔ Required status uses both color and the text "(required)" / asterisk

<p>Fields marked
   <span class="required">* (required)</span>
   must be filled in.</p>
<label for="name">Full name
   <span class="required">*</span></label>
<input type="text" id="name">
Don't: Location-only instruction

Use the menu on the left to navigate.

Menu
Page content here.

✘ "On the left" relies on visual location -- may shift on mobile or be meaningless to screen readers

<!-- Fails: "on the left" relies on location -->
<p>Use the menu on the left to navigate.</p>

<!-- Better: -->
<p>Use the <strong>"Main Navigation"</strong>
   menu to navigate.</p>

How to Fix It

  1. Reference controls by accessible name. Replace "click the green button" with "click Submit Order." The string in quotes must match the control's accessible name (visible text, aria-label, or aria-labelledby) so 2.5.3 Label in Name does not break in the same edit.
  2. Reference regions by their heading. Replace "the sidebar on the right" with "the Related Articles section." Wrap the region in a <section aria-labelledby="related"> with a real <h2 id="related"> so the name a screen reader announces matches the prose.
  3. Pair color with text or shape. If required fields are red, add the word "required" or an asterisk with a legend. This satisfies 1.3.3 and 1.4.1 in one move.
  4. Pair sound with a visible indicator. If an error is signaled with a beep, render a visible error message in document order and set aria-invalid="true" with aria-describedby pointing at the message.
  5. Read every instruction with the page hidden. If "click the button" no longer resolves to one specific control without the visual context, the instruction fails 1.3.3. Rewrite until each instruction names the target by accessible name or label.

References

  1. [1] W3C (2023). Understanding Success Criterion 1.3.3: Sensory Characteristics. W3C, Accessed 2026-04-07. https://www.w3.org/WAI/WCAG22/Understanding/sensory-characteristics.html ↩ ↩