principle: Perceivable
Make sure that everyone can perceive or detect the same content and components. Can people perceive this content with whatever capacity they have?
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.
1.3.3 Sensory Characteristics
Instructions and descriptions must not rely on sensory features alone, like color, shape, size, visual location, or sound. Always provide additional text to clarify meaning.
1.3.4 Orientation
Content must remain readable and usable in both portrait and landscape orientation, unless a specific one is essential (e.g. in a piano app that requires landscape to show the full keyboard).
1.3.5 Identify Input Purpose
The purpose of common form fields (like name, email, or address) must be defined in the code so that browsers and assistive technologies can offer input support, such as autocomplete.
1.3.6 Identify Purpose
The purpose of regions and common elements must be defined in the code using semantic HTML or ARIA attributes, so that; assistive technologies can communicate their meaning, and; browsers can adapt or simplify the interface (e.g. hide non-essential content).
1.4.1 Use of Color
Color must not be the only way to convey information. Always provide an additional visual cue, like icon, text label, underline, shape, or pattern (e.g. striped, solid).
1.4.2 Audio Control
If audio plays automatically for more than 3 seconds, it must be possible to pause the audio, stop the audio, or adjust the volume, without using system-wide controls.
1.4.3 Contrast (Minimum)
Text contrast against its background must be at least 4.5:1 for normal text, or 3:1 for large text (over 24px, or bold and over 19px).
1.4.4 Resize Text
Text remains readable and usable when zoomed to 200%.