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
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).
1.3.2 Meaningful Sequence
The visual presentation of the content matches what’s read out by a screen reader.
1.3.3 Sensory Characteristics
Nothing is referred to just by its colour, size, position, shape, and so on.
1.3.4 Orientation
Rotating a device from portrait to landscape doesn’t stop everything being perfectly readable and usable.
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.
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.
1.4.1 Use of Color
Colour shouldn’t be the only thing used to convey meaning.
1.4.10 Reflow
Content remains readable and usable without requiring horizontal scrolling when viewed at 320 CSS pixels wide (typically equivalent to a mobile viewport) by adapting layout and reflowing text.
1.4.11 Non-text Contrast
Usable components like form fields and buttons, and graphics like pie charts and line graphs should have a contrast ratio of 3 to 1.
1.4.12 Text Spacing
Users can increase letter, word, line, and paragraph spacing without cutting off content or breaking functionality.
