Make every step
possible.

01 / Write for the task

Start with what the reader needs to do. Use meaningful headings, short instructions and links that describe their destination. Explain unfamiliar terms at the point of use.

1. Read the headings alone. Do they describe the page?
2. Review images beside their caption, link and surrounding copy. The same image can need different alternatives in different contexts.
3. Replace “click here” with a useful destination when the surrounding context does not explain it.

Practise an image decision · W3C writing guidance

02 / Design the difficult states

Design the empty, loading, invalid and successful states alongside the main screen. Show where focus should go when something opens, closes or fails. Give information enough space to survive larger text.

1. Check contrast for text, boundaries and meaningful graphics.
2. Pair colour with text or another clear cue for errors and selection.
3. Try the actual task at a narrow width and with enlarged text; preserve controls and instructions.

Compare colours · Understand reflow and its exceptions

03 / Build predictable interactions

Use links for navigation and buttons for actions. Give fields persistent labels and connect help and error messages to their controls. A custom appearance still needs a usable name, role, state and keyboard behavior.

1. Start with native HTML, then add behavior only where needed.
2. Test opening, completing, cancelling and returning from a component.
3. Announce meaningful changes without moving focus for routine status updates.

Explore working examples · Read the code patterns

04 / Test a complete journey

Choose a real task, such as finding a course and registering. Include validation, confirmation and recovery. Record the browser and assistive technology so another person can reproduce the finding.

1. Use the keyboard, then inspect structure and text alternatives with a screen reader.
2. Check zoom, reflow, spacing, contrast and media alternatives.
3. Use automated results as leads, investigate them, and retest fixes with the people affected.

Record your review · W3C preliminary checks

Images, charts and announcements

An event poster needs its essential event information in text. A chart may need a short alternative plus a nearby explanation or data table. Keep names, units, relationships and the important conclusion available without relying on the image.

Provide the information where people need it, and use the alternative to identify the image’s role. Avoid repeating a full caption when it already provides the same meaning.

Try a poster or chart scenario · W3C complex-image guidance

Audio, video and recordings

Plan captions for speech and meaningful sounds. Identify essential visual information that the audio does not convey, and plan description where needed. A transcript makes content easier to search and review; it does not automatically replace synchronized captions or required audio description.

Review automatic output for names, timing and meaning. Check the player with a keyboard, including captions and playback controls.

Use the captions guide · W3C accessible media planning