All content on the page/screen must be presented in a way users can perceive it.
Text alternatives
Include text alternatives (A)
Actionable elements must have an appropriate ID name. While images need to be provided with a brief description of what there is on the image. That way users who use screen readers are able to understand the meaning and intent behind the read elements.
Decorative elements do not require a text alternative.
Time-based media
Include audio & video captions/transcripts (A) (AA)
1.2.1 Audio-only and Video-only 1.2.2 Captions 1.2.3 Audio Description
For audio & video content there needs to be a provided set of transcripts or captions. That way users with hearing and vision difficulties can access the content through reading or listening the text alternatve with screen readers. Communicate this to content providers and include an access point in your design where users can get to those transcripts or content descriptions.
Adaptable
Make visual and auditory cues accessible (A)
When designing, ensure that visual cues (like color, size, layout) and auditory signals (such as sounds or voice changes) are accessible to all users, including those using screen readers or other assistive technologies. Critical information conveyed through visual or auditory cues must also be described in text. For example, if a form uses red to indicate required fields, also include an asterisk (*) and a note explaining the requirement to ensure accessibility for users who can't perceive color.
Order elements in a logical way (A)
When designing, think of the intended order of the elements. Align with developers what should be the correct order of the items, so that when users who use screen readers are able to understand the right order and context of the read elements.
Don't rely solely on sensory characteristics (A)
Don't rely only on shape, color, size, visual location, orientation, or sound of an element for users to understand its intent, as visually impaired users will not be able to understand or perceive it. Use clear instructions or labels that provide meaning to users.
Use visual support for complex information (A)
Use images, colors and shapes as a support to visually help users digest complex graphs or blocks of information. But do not rely solely on it.
Design for flexible screen orientation (AA)
Make sure your website or app works in both portrait and landscape modes, so users can choose the orientation that works best for them. Some people, like those with mounted devices or dexterity impairments, can't easily rotate their screens. Only restrict orientation if it's absolutely necessary for the content, such as with apps that require landscape mode for specific tasks like check deposits or playing a piano. This flexibility ensures better accessibility for all users.
Make form completion easier (AA)
You can improve form accessibility by using clear, concise labels and implementing autofill. Add visual cues like icons to clarify input purposes and simplify forms by reducing unnecessary fields. Break complex forms into smaller sections, provide easy-to-understand instructions, and offer real-time validation with clear error messages. Support multiple input methods, and always test forms with assistive technologies to ensure they work for users with cognitive and physical disabilities.
Distinguishable
Avoid color dependency (A)
Don't rely solely on color to convey information. For different lighting conditions and for visually impaired or color blind users it will be harder to perceive different colors on the screen.
Add visual cues that help users distinguish the difference between elements they are looking at. (e.g. underline for links, active tabs with a dot or a line indicator or different stroke and fill options etc.)
Include audio playing controls (A)
Avoid using automatic audio playing as the sound may interfere with users who use screen readers. Make sure your design includes volume and play/pause controls.
Respect small text – 4.5:1 color contrast ratio (AA)
Small text (defined below) needs to pass the 4.5:1 color contrast ratio in order to achieve maximum readability.
Bold text = 13pt and below Regular text = 17pt and below
Respect large text – 3:1 color contrast ratio (AA)
Large text (defined below) needs to pass the 3:1 color contrast ratio in order to achieve maximum readability.
Bold text = 14pt and up Regular text = 18pt and up
Support scalable UI (AA)
Be aware that users can increase or decrease font sizes on their browsers or devices. This may impact readibility of elements. Make sure your UI can adapt to these changes. Consider designing your elements for scenarios where font size is increased by its maximum and decreased to its minimum.
Avoid image dependency (AA)
Avoid placing important information inside an image. Images can be stretched, the right color contrast may not be met, content inside can become blurred or pixelated, all which makes it harder for users to perceive it.
Ensure accessible content reflow (AA)
Design content that can be enlarged up to 400% without requiring horizontal scrolling. Implement responsive design techniques to ensure text reflows within the viewport, allowing users with low vision to read seamlessly without losing information or functionality. Prioritize legibility by adjusting layouts at different zoom levels while recognizing that certain content types may require two-dimensional scrolling.
Respect non-text elements contrast ratio (AA)
For every actionable or critical element you need to make sure there is enough contrast for it to be easily distinguishable. For elements 16px and above follow the rule of 3:1, and for elements below 16px follow the rule of 4:5:1.
Allow users to adjust text spacing for easier readability (AA)
Design your content to stay functional and readable when users adjust text spacing for accessibility. Ensure that increased line, word, or letter spacing doesn't break the layout, overlap elements, or hide content, allowing users to customize their experience without issues.
Design accessible hover and focus content (AA)
1.4.13 Content on Hover or Focus
When adding hover-triggered or focus-triggered content like tooltips, pop-ups, and drop-downs, ensure it's dismissable, hoverable, and persistent. This means users can easily close the content without moving focus (pressing Esc on keyboard), hover over it without it disappearing, and keep it visible until they dismiss it or it's no longer needed. Pay special attention to users who have larger pointers or rely on keyboard navigation.