This page contains all guidelines tagged with:

Defined in Markup

Under the umbrella tag of code, this refers specifically to making elements clearly defined in markup (the HTML) so that relevant information is available to assistive tech, such as screen readers. In WCAG, this is referred to as programmatically determined.

Use text instead of images of text

Comparison of an image of text (inaccessible) vs. markup text with CSS styling (accessible)
Code
Presentation
Visual
Level AA
Level AAA

Make an intuitive order focusable and defined in markup

Comparison of a focus order that goes up to down, left to right (accessible) vs. a random order (inaccessible)
Code
Defined in Markup
States
Interaction
Keyboard

Provide a way to bypass repeating content (skip link)

Illustration of a skip link on a website
Code
Interaction
Keyboard
Physical
Visual

Ensure the programmatic label matches the visual label

Comparison where the visual and programmatic label match (accessible) vs. when they don't match (inaccessible)
Code
Defined in Markup
Cognitive
Visual
Level A

Label elements and give instructions

A form with properly labeled inputs for name, time, and date
Code
Defined in Markup
Cognitive
Visual
Level A

Make sure that assistive tech can parse content

HTML code of a list with syntax errors
Code
Defined in Markup
Visual
Level A
Semi-Automated Test

Define status messages in markup

Code with a banner above
Code
Defined in Markup
Visual
Level AA
Manual Test

Define the purpose, name, role, and value of UI components in markup

Example of good semantic markup of an accordion
Code
Defined in Markup
Visual
Level A
Level AAA

Define the human language in markup

HTML code with the human language attribute
Code
Defined in Markup
Visual
Level A
Level AA

Define information, structure, and relationships in markup

Website with headers h1, h2, and h3 labeled
Code
Defined in Markup
Visual
Level A
Automated Test

Write descriptive page titles

Examples of specific and descriptive page titles (accessible) vs. vague ones (inaccessible)
Code
Content
Writing
Cognitive
Visual

Write descriptive link text

Example of specific and descriptive button text (accessible) vs. generic text (inaccessible)
Content
Writing
Cognitive
Visual
Level A

Write descriptive headings and labels

Example of descriptive headings (accessible) vs. vague headings (inaccessible) for a smoothie recipe
Content
Writing
Cognitive
Visual
Level AA

Provide image descriptions

An image with an image description in the caption below
Content
Multimedia
Visual
Level A
Defined in Markup