Accessibility
05 / Checking & Testing
Key question
How do I know if it works?
Accessibility can be tested, but not with a single tool alone. Automated tests only find some of the issues. The rest are discovered using a keyboard, screen reader, and zoom, and above all, with people who use these assistive technologies every day.
Learning objective: You can describe controls with their role, name, and state, write suitable alternative text, and check a page in three stages.
What is not tested is not accessible.
5.1 / Role, Name, Status
A screen reader reads what the code says.
For assistive technologies, every control must answer three questions:
01
Role
What is it?
02
Name
What is it called?
03
Condition
What's the score at the moment?
The first rule is: native HTML elements over ARIA. A real button comes with its own role, keyboard support, and focus. ARIA only complements what HTML cannot do, such as aria-expanded for a drop-down menu.
No ARIA is better than bad ARIA.
5.2 / Describing pictures
The alternative text replaces the image.
An alternative text explains in a single sentence what the image means in context: for a chart, the key takeaway; for a photo, the essentials; for a button, its destination. 'Image of' is redundant, as the screen reader already announces that.
Purely decorative images are given an empty alternative attribute (alt="") so that they are skipped. Complex graphics also require a detailed description or a data table.
Describe the meaning, not the pixels.
5.3 / Testing and documentation
Automatically, by hand, and with people.
A good test has three stages: automated tools such as WAVE or axe find missing labels and poor contrast. Manual testing using a keyboard, zoom, and a screen reader identifies workflow issues. User testing with disabled people reveals whether it truly works.
Whatever is identified is prioritised in the planning. Many organisations publish an accessibility statement: what is compliant, what is not yet compliant, and how to report any issues.
Testing is a process, not a destination.
Exercise
A minor audit
Task: Test a page of your project in three stages.
STEP 1
Run an automated testing tool and note down the errors.
STEP 2
Test manually: keyboard, 200% zoom, screen reader on mobile.
STEP 3
Check all images and icons for suitable alternative text.
STEP 4
Write a brief explanation: fulfilled, open, next step.
Evaluation: Which errors did the tool find, which ones did only you find, and what surprised you the most about the screen reader?