WCAG 1.3.3 Sensory Characteristics

What it asks

Pages often tell people what to do by describing where something is or what it looks like: "click the round icon", "use the menu on the left", "fields marked with a red asterisk are required", "wait for the beep". Each of those works for someone who can see or hear the page in the usual way, and fails for someone who cannot.

This rule says instructions must not rely solely on sensory characteristics: shape, colour, size, visual location, orientation or sound. The fix is almost always to add a second identifier. "Press the green Submit button" works, because the name is there too. "Use the menu on the left, under Settings" works. "Required fields are marked with an asterisk and the word required" works.

It is about instructions, which is why the instance counts are usually low. A page can be full of colour and shape; this criterion only bites where the text tells the person to act on them. Colour used to convey information in its own right, such as a red border for an error, is 1.4.1 Use of Color.

Position words such as "above" and "below" are a common worry. They are fine where the thing referred to is also identified in another way, or where the structure makes the reference clear in a screen reader, for example "the table below" directly followed by the table.

Its official name is success criterion 1.3.3 Sensory Characteristics, at Level A. It was added in WCAG 2.2, under guideline 1.3 Adaptable and the principle Perceivable. The W3C’s normative text says, in part:

“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.”

From WCAG 2.2, W3C. Full explanation: Understanding 1.3.3 Sensory Characteristics.

Who it helps

People who are blind, for whom "the button on the right" names nothing, and people with low vision, who may not see the colour or shape being referred to. People who are colour blind, when the instruction is a colour. Deaf people, when the instruction is a sound.

It also helps people on small screens or at high zoom, where "on the right" is no longer true because the layout has reflowed.

What passes and what fails

These pass

• "Press the green Continue button to go on."
• "Select Settings from the main menu."
• "Required fields are marked with an asterisk (*) and the word required."
• "When the upload finishes you will hear a chime and a message will say Upload complete."
• "Use the search box at the top of the page, labelled Search."

These fail

• "Press the green button to continue."
• "See the sidebar on the left for related articles."
• "Fields marked with a red asterisk are required."
• "Click the round icon to start."
• "Wait for the beep before speaking."
• "Use the larger of the two buttons."

How to test it by hand

1. Read every instruction on the page: help text, form hints, error messages, onboarding tips, tooltips and the body text where it tells people what to do.
2. For each, look for a reference to shape, colour, size, position, orientation or sound.
3. Where you find one, check whether the same sentence also identifies the thing another way: by its name, its label, a heading or a landmark.
4. Check that the other identifier is real. "The Submit button" only helps if the button is named Submit.
5. Note each instruction that relies on a sensory characteristic alone, and what it should say instead.

What automated testing can decide

What a machine can decide

Automated testing can find the sentences that mention colours, shapes, positions and sounds, and it can list the named controls, headings and landmarks on the page, which is what the sentence would need to refer to instead. That turns a page into a short list of candidate sentences with the evidence beside them.

What it cannot

Whether a sentence is an instruction, whether it relies on the characteristic alone, and whether "the Submit button" actually matches a control on the page are matters of reading. Matching on colour words alone produces far more false leads than real ones, because most mentions of colour are not instructions at all.

How Dreven handles it

Dreven finds the instructions on your pages that rely on shape, colour, size or position, and shows you each sentence where it sits on the page.

A reviewer decides each result, and the report gives the exact sentence and its location, which is what a content owner needs to act.

No automated check makes a site conform. In Dreven, a person reviews the results and signs the report.

Related criteria

• 1.4.1 Use of Color (Level A). Colour on its own must not be the only way information is shown.
• 1.3.1 Info and Relationships (Level A). Structure in the code gives instructions something to refer to.
• 2.4.6 Headings and Labels (Level AA). Named headings and labels are the identifiers an instruction can use.
• 1.3.2 Meaningful Sequence (Level A). Position words assume a reading order that may not hold.

Questions people ask

All WCAG 2.2 criteria, in plain words