Easy to perceive
Information and user interface components must be presentable to users in ways they can perceive: A website is perceivable when a user can use their sense(s) of sight, sound, and touch to identify and process the information presented.
Under this principle you will find guidelines relating but not limited to:
- Using media content like video, audio and images
- Use of text alternatives through things like captioning and sign language
- The approach to the sequencing of content and layout
- The handling of color and contrast
- The control of text size and audio controls
- The handling content interactions i.e. hover and focus states
Let’s see how to apply the guidelines to our products
1.1. Provide text alternatives for images
1.1.1 Text alternatives for images
Provide an alternative text description for images. Make sure the description conveys the same message or functionality.
1.2. Provide alternatives for audio content, videos and presentations
1.2.1 Transcript for pre-recorded audio-only content
For audio content that has no video (like a podcast), provide a transcript.
1.2.2 Captions for pre-recorded videos
Provide captions for videos that are pre-recorded.
1.2.3 Text or audio description for pre-recorded videos
For videos that are pre-recorded, provide an equivalent text description, or audio description of what happens on screen.
1.2.4 Captions for live videos and presentations
Provide captions for videos and presentations that are performed live.
1.2.5 Audio description for pre-recorded videos
For videos that are pre-recorded, provide audio description of what happens on screen, even if you’ve already provided a text description.
1.3. Create content that can be presented in different ways
1.3.1 Information and relationships
Make sure that information and relationships that are conveyed visually (like distinct sections within a page, or a label next to a checkbox) are also identified in code.
1.3.2 Order of elements in code
Make sure that elements appear in a logical reading order in code, so that they are presented in a meaningful order to screen reader users.
1.3.3 Instructions don’t rely on sensory characteristics
If you give tips or instructions, do not assume that users can perceive colour, size, shape, sound or the location of elements on screen.
Make sure a page’s view is not locked to either portrait or landscape mode, unless this is essential.
If a text input field collects information about the user, identify its specific purpose in code (for example email, password or given name).
1.4. Make content easy for people to see and hear
Do not use color as the only way to convey any piece of information.
If any audio content plays automatically for more than three seconds, give people a way to stop it.
Make sure that text has enough contrast against the background color.
Make sure it is possible to complete all tasks when text is resized up to 200%.
Use real text rather than images of text.
Make sure users can access all information and functionality on a screen that’s as wide as on the iPhone5, without needing to scroll in both directions.
Make sure that visual information that identifies important graphics, interactive controls and their state has enough contrast against adjacent colors.
Ensure that no information or functionality gets lost if users increase the space between lines, paragraphs, letters and words.
1.4.13 Extra content on hover or focus
If content (like a tooltip) appears when users hover over an element with their mouse (or tab to it with their keyboard), it must be easy to dismiss, easy to reach and remain visible.