Sensory Characteristics

Who this affects

Blind users have no concept of "on the right". Low-vision users zoomed to 400% see a reflowed layout where "right" is meaningless. Colour-blind users cannot act on "the green box".

The failure and the fix

Each example below is a self-contained page, loaded in a frame so its markup cannot affect this page. Open either one on its own to test it with a keyboard or screen reader.

<h1>Confirm your order</h1>

<!-- FAILURE 1: instructions by shape and colour only. A blind user has no
     concept of "round" or "green". A colour-blind user cannot tell them apart.
     And at 400% zoom the buttons stack, so even a sighted user loses "left". -->
<p>Press the round green button on the left to confirm, or the square red
   button on the right to cancel.</p>
<div class="row">
  <button type="button" class="round"></button>
  <button type="button" class="square"></button>
</div>

<!-- FAILURE 2: instruction by position. On a narrow viewport the sidebar is
     not "on the right" any more - it has reflowed below the content. -->
<p>Your delivery address is shown in the box on the right.</p>

<!-- FAILURE 3: instruction by size and visual styling only. -->
<p>Read the large text above before continuing.</p>

<!-- FAILURE 4: instruction by sound alone. -->
<p>You will hear a beep when your order is accepted.</p>

<h1>Confirm your order</h1>

<!-- FIX 1: refer to controls by their NAME. Shape, colour and position can
     still be mentioned as extra help, but the name is what makes the
     instruction work for everyone - including a speech-input user, who has to
     say the name out loud to activate it. -->
<p>Select <strong>Confirm order</strong> to place your order, or
   <strong>Cancel</strong> to go back.</p>
<div class="row">
  <button type="button" class="confirm">Confirm order</button>
  <button type="button" class="cancel">Cancel</button>
</div>

<!-- FIX 2: refer to the section by its heading, not by where it happens to sit
     on a wide screen. -->
<p>Your delivery address is shown under <a href="#addr">Delivery address</a>.</p>

<!-- FIX 3: name the content instead of describing how it looks. -->
<p>Read <a href="#terms">Terms of sale</a> before continuing.</p>

<!-- FIX 4: pair the sound with a visible, programmatically exposed message.
     The live region means a screen reader announces it too (4.1.3). -->
<p>When your order is accepted you will hear a beep and see a confirmation
   message here:</p>
<p role="status">No order placed yet.</p>

<h2 id="addr">Delivery address</h2>
<p>12 River Street.</p>
<h2 id="terms">Terms of sale</h2>
<p>Goods are sold subject to availability.</p>

How to test it

Search the page text for shape, colour, size, and position words in instructions. Each must be accompanied by a name or other non-sensory identifier.

• Automated

  Requires reading and understanding instructional text.

  No axe rule maps to this criterion. It has to be checked by a person.

• Keyboard

  Unplug the mouse. Move through the page with Tab, Shift+Tab, Enter, Space and the arrow keys. See the keyboard testing script.

• Screen reader

  Listen to both examples with NVDA, JAWS, VoiceOver or TalkBack and compare what is announced. See the screen reader cheat sheets.

• Visual

  Zoom to 200% and 400%, narrow the viewport to 320 px, and apply the text-spacing overrides. See the visual testing procedures.

Related criteria

• 1.4.1 Use of Color (Level A)
• 1.3.4 Orientation (Level AA)

In the specification

• Understanding 1.3.3 Sensory Characteristics — the W3C explanation, intent and exceptions
• 1.3.3 in the WCAG 2.2 Recommendation — the normative wording