Perceivable

Draft
This page is not complete.

This article provides practical advice on how to write your web content so that it conforms to the success criteria outlined in the Perceivable principle of the Web Content Accessibility Guidelines (WCAG) 2.0. Perceivable states that users must be able to perceive it in some way, using one or more of their senses.

Note: To read the original W3C definitions for Perceivable and its guidelines and success criteria, see Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive.

Guideline 1.1 — Providing text alternatives for non-text content

The key here is that text can be converted to other forms people with disabilities can use, so for example spoken by a screenreader, zoomed in, or represented on a braille display. Non-text content refers to multimedia such as images, audio, and video.

Success criteria How to conform to the criteria Practical resource
1.1.1 Provide text equivalents wherever possible (A) All images that convey meaningful content should be given suitable alternative text. Text alternatives.
Complex images or charts should have an accessible alternative provided, either on the same page or linked to. Use a regular link rather than the longdesc attribute.

A text description may work, or an accessible data table (see HTML table advanced features and accessibility). Also see Other text alternative mechanisms for the argument against longdesc.

Multimedia content (e.g. audio or video) should at least have a descriptive identification available (e.g. a caption or similar).

See Text alternatives for static caption options, and Audio transcripts, Video text tracks, and Other multimedia content for other alternatives.

UI Controls such as form elements and buttons should have text labels that describe their purpose. Buttons are simple — you should make sure the button text describes the function of the button (e.g. <button>Upload image</button>). For further information on other UI controls, see UI controls.
1.1.1 Decorations should be invisible (A) Implement decorative (non-content) images, video, etc., in a way that is invisible to assistive technology, so it doesn't confuse users.

Decorative images should be implemented using CSS background images (see Backgrounds).  If you have to include an image via an <img> element, give it a blank alt (alt=""), otherwise screenreaders may try to read out the filepath, etc.

If you are including background video or audio that autoplays, make it as unobtrusive as possible. Don't make it look/sound like content, and provide a control to turn it off. Ideally, don't include it at all.

Guideline 1.2 — Providing text alternatives for time-based media

Time-based media refers to multimedia with a duration, i.e. audio and video. Also note that if the audio/video serves as an alternative to existing text content, you don't need to provide another text alternative.

Success criteria How to conform to the criteria Practical resource
1.2.1 Provide alternatives for pre-recorded audio-only and video-only content (A) A transcript should be provided for prerecorded audio-only media, and a transcript or audio description should be provided for prerecorded video-only media (i.e. silent video). See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.2 Provide captions for web-based video (A) You should provide captions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't hear the audio part of the video. See Video text tracks for HTML5 video captions, and Other multimedia content for other technologies. See also Add your own subtitles & closed captions (YouTube).
1.2.3 Provide text transcript or audio description for web-based video (A) You should provide text transcripts or audio descriptions for video presented on the web, e.g. HTML5 video. This is for the benefit of people who can't see the visual part of the video, and don't get the full content from the audio alone. See Audio transcripts for transcript information. No audio description tutorial available as yet.
1.2.4 Provide captions for live audio (AA) You should provide synchronized captions for all live multimedia that contains audio (e.g. video conferences, live audio broadcasts.)  
1.2.5 Provide audio descriptions for prerecorded video (AA) Audio descriptions should be provided for prerecorded video, but only where the existing audio does not convey the full meaning expressed by the video.  
1.2.6 Provide sign language equivalent to prerecorded audio (AAA) An equivalent sign language video should be provided for any prerecorded content containing audio.  
1.2.7 Provide extended video with audio descriptions (AAA) Where audio descriptions cannot be provided (see 1.2.5) due to video timing issues (e.g. there are no suitable pauses in the content in which to insert the audio descriptions), an alternative version of the video should be provided that includes inserted pauses (and audio descriptions).  
1.2.8 Provide an alternative for prerecorded media (AAA) For all content that features video, a descriptive text transcript should be provided, for example a script of the movie you are watching. This is for the benefit of hearing impaired viewers who cannot hear the content. See Audio transcripts for transcript information.
1.2.9 Provide a transcript for live audio (AAA) For any live audio content being broadcast, a descriptive text should be provided, for example a script of the play or musical you are listening to. This is for the benefit of hearing impaired viewers who cannot hear the content. See Audio transcripts for transcript information.

Guideline 1.3 — Create content that can be presented in different ways

GOT HERE

Document Tags and Contributors

 Contributors to this page: chrisdavidmills
 Last updated by: chrisdavidmills,