WCAG Success Criterion for Perceivable Principle

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.

1.3.4 Orientation

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.

1.4.10 Reflow

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.

1.4.12 Text spacing

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.