Information and user interface
components must be
presentable to users in ways they can
Easy to 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
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
For audio content that has no video (like a podcast), provide a transcript.
Provide captions for videos that are pre-recorded.
For videos that are pre-recorded, provide an equivalent text description, or audio description of what happens on screen.
Provide captions for videos and presentations that are performed live.
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
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.
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.
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.
1.3.5 Purpose of text fields
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
1.4.1 Use of color
Do not use color as the only way to convey any piece of information.
1.4.2 Audio control
If any audio content plays automatically for more than three seconds, give people a way to stop it.
1.4.3 Contrast minimum (AA)
Make sure that text has enough contrast against the background color.
1.4.4 Resize text
Make sure it is possible to complete all tasks when text is resized up to 200%.
1.4.5 Images of text
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.
1.4.11 Non-text contrast
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.
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.