theme: Code and Labels
Technical markup and naming conventions that help assistive tech understand the page.
1.1.1 Non-text Content
Images should have descriptive (alt) text.
1.3.1 Info and Relationships
Information or relationships between content that is visual is also conveyed through the code, via HTML or ARIA (for example the for attribute on a form label, or aria-describedby on an input that has hint text).
1.3.2 Meaningful Sequence
The visual presentation of the content matches what’s read out by a screen reader.
2.4.10 Section Headings
Headings are used to group distinct sections on a page.
2.4.2 Page Titled
Each page has a unique title element that describes what’s on that page.
2.4.4 Link Purpose (In Context)
A link’s destination should be clear from either the link text itself or the surrounding sentence context.
2.4.6 Headings and Labels
Headings are descriptive of the content that they contain, form labels clearly describe what information is required, and buttons inform the user what will happen when they’re pressed.
2.4.9 Link Purpose (Link Only)
It is clear where a link will take you from the link text alone, without having to read the text around it.
2.5.3 Label in Name
The visible text of a form field, button, or link matches the text in the underlying code.
3.1.1 Language of Page
There’s a lang attribute on the <html>
element that matches the language of the page.