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

guideline: Adaptable

Build content that can adapt to different layouts and formats.

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 A

1.3.3 Sensory Characteristics

Nothing is referred to just by its colour, size, position, shape, and so on.

Forms, Sensory, Wording
Cognitive, Visual
Content
WCAG 2.1, 2.2 Level AA

1.3.4 Orientation

Rotating a device from portrait to landscape doesn’t stop everything being perfectly readable and usable.

Gestures
Cognitive, Visual
Code
WCAG 2.1, 2.2 Level AA

1.3.5 Identify Input Purpose

The purpose of form fields can be identified by the browser, so that auto-complete suggestions can be offered in a dropdown.

Forms
Cognitive, Visual
Code
WCAG 2.1, 2.2 Level AAA

1.3.6 Identify Purpose

Landmark regions and personalization semantics are used, allowing browser tools to remove non-essential content or add identifying icons to specific elements on the page.

Forms
Cognitive, Visual
Code