WebsightWhat it asks for, in plain English
When you tell people how to do something, do not describe it only by how it looks or sounds. 'Click the round button', 'see the box on the right', 'the red items are required' and 'wait for the beep' all assume the reader can see the shape, position or colour, or hear the sound.
You can still mention those things. The rule is that they must not be the only clue. 'Press Continue (the green button on the right)' works for everyone because the button's name is there too.
Watch for it in help text, form hints, error messages, onboarding tours and printed guides that point at parts of a screen.
This is an independent explanation. The binding wording is the W3C Recommendation, and the W3C's own Understanding 1.3.3 page has the full intent, techniques and definitions.
Who it affects
Someone using a screen reader is told to use 'the button on the right' and has no idea what that means, because nothing is left or right to them.
A person who is colour-blind cannot find 'the red tab' among tabs that all look brown to them.
A mobile user whose layout has stacked into one column finds there is no longer a 'sidebar on the left'.
Example
Fine if you can see colour and position. Meaningless if you hear it, or if the buttons stack on a narrow screen.
The name of the button carries the instruction. Colour and position are extra help, not the only help.
Show the markup behind both examples
<style>body{margin:0;padding:16px;font-family:system-ui}p{margin:0 0 12px}button{padding:8px 16px;border:0;border-radius:6px;font-size:15px}.b{background:#e5e7eb;color:#111}.n{background:#15803d;color:#fff;margin-left:8px}</style>
<p>Press the green button on the right to continue.</p>
<button class="b">Back</button><button class="n">Next</button><style>body{margin:0;padding:16px;font-family:system-ui}p{margin:0 0 12px}button{padding:8px 16px;border:0;border-radius:6px;font-size:15px}.b{background:#e5e7eb;color:#111}.n{background:#15803d;color:#fff;margin-left:8px}</style>
<p>Press Next (the green button on the right) to continue.</p>
<button class="b">Back</button><button class="n">Next</button>How to check it
- Search the page text for words like left, right, above, below, round, square, red, green, larger and bigger.
- For each instruction found, cover the screen and read it aloud: could someone follow it from the words alone?
- Check error and hint messages in forms, which often say 'fields marked in red'.
- Narrow the browser window so the layout changes, then re-read any instruction that mentioned position.
What Websight checks for 1.3.3
Websight has no automated check for this criterion. It lists it in the manual checklist that comes with every report, so it is not forgotten.
Only a person can check this. A scanner cannot tell an instruction from any other sentence, or know what it refers to.
Practical tips
- Name the thing. Buttons, links, tabs and sections all have names; use them in the instruction.
- Keep the visual clue as a bonus in brackets if it helps sighted readers.
- Mark required fields with text or an asterisk explained at the top of the form, not with colour alone.
Other criteria in guideline 1.3, Adaptable
- 1.3.1 Info and Relationships (level A)
- 1.3.2 Meaningful Sequence (level A)
- 1.3.4 Orientation (level AA)
- 1.3.5 Identify Input Purpose (level AA)