theme: Code and Labels
Technical markup and naming conventions that help assistive tech understand the page.
1.1.1 Non-text Content
All images and other non-text content (like icons, charts, audio, CAPTCHAs, or controls) must have a descriptive text alternative that conveys their meaning. Purely decorative content can be hidden from assistive technologies (e.g. using an empty alt attribute).
1.3.1 Info and Relationships
Visual information and relationships (like labels, headings, or groupings) must also be conveyed in the code using semantic HTML (e.g. <label for="">
, <ul>
, <h1>
) or ARIA attributes (e.g. <aria-describedby>
, <role="group">
) so that assistive technologies can understand the structure.
1.3.2 Meaningful Sequence
Content must follow a logical and meaningful order in the code so it can be understood correctly by assistive technologies even if the visual layout differs.
2.4.2 Page Titled
Each page must have a unique and descriptive that reflects its topic or purpose.
2.4.4 Link Purpose (In Context)
The purpose of each link must be clear from the link text itself, or the surrounding context.
2.4.6 Headings and Labels
Headings must describe what follows. Labels and buttons must clearly communicate what information is needed or what action will happen.
2.4.9 Link Purpose (Link Only)
The purpose of each link must be clear; from the link text alone; without relying on surrounding context.
2.4.10 Section Headings
Related content must be organized into clear sections using headings.
2.5.3 Label in Name
The visible text of a button, link, or form field must also be part of its accessible (programmatic) name.
3.1.1 Language of Page
Each page must have a <html lang="">
attribute that matches the main language of the page.