Making accessibility standards easy to understand, one success criterion at a time.

theme: Code and Labels

Technical markup and naming conventions that help assistive tech understand the page.

WCAG 2.0, 2.1, 2.2 Level A
WCAG 2.0, 2.1, 2.2 Level A

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).

Code and Labels, Wording
Cognitive, Visual
Code, Content
WCAG 2.0, 2.1, 2.2 Level A

1.3.2 Meaningful Sequence

The visual presentation of the content matches what’s read out by a screen reader.

Code and Labels, Wording
Cognitive, Visual
Code
WCAG 2.0, 2.1, 2.2 Level AAA

2.4.10 Section Headings

Headings are used to group distinct sections on a page.

Code and Labels
Cognitive, Visual
Content, Design
WCAG 2.0, 2.1, 2.2 Level A

2.4.2 Page Titled

Each page has a unique title element that describes what’s on that page.

Code and Labels, Whole Site, Wording
Cognitive, Visual
Content
WCAG 2.0, 2.1, 2.2 Level A

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.

Code and Labels, Wording
Cognitive, Visual
Content
WCAG 2.0, 2.1, 2.2 Level AA

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.

Code and Labels, Wording
Cognitive, Visual
Content
WCAG 2.0, 2.1, 2.2 Level AAA

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.

Code and Labels, Wording
Cognitive, Visual
Code, Content, Design
WCAG 2.1, 2.2 Level A

2.5.3 Label in Name

The visible text of a form field, button, or link matches the text in the underlying code.

Code and Labels, Forms
Cognitive, Visual
Code
WCAG 2.0, 2.1, 2.2 Level A

3.1.1 Language of Page

There’s a lang attribute on the <html> element that matches the language of the page.

Code and Labels, Wording
Cognitive, Visual
Code