#perceivable

no. 143

Make sure videos are provided in two versions, one with audio description and one without

Videos usually convey information on both the visual and audio tracks. Users who are blind and listening to dialogues may still struggle with understanding what is happening when important information taking place on the visual track (such as specific actions, characters, scene changes, on-screen text and so on) are not also conveyed on the audio track. While non-sighted users benefit from dialogues, they still need a reliable description of details happening visually, that may influence the storyline, the action or the outcome. This additional information layer can be provided through a second audio track that fills in the blanks whenever possible. Typically, this new layer is added during pauses in dialogues and sound effects, so it does not overlap with the content provided in the main audio track. Because there is only so much content that can thus be squeezed in, the amount of supplementary information that can be added to inform visually impaired users of what is going on is necessarily limited and is often insufficient.

To do so, simply provide a second version of the movie that also contains audio descriptions as part of the audio track. This can be done in a multiple of ways, such as providing another link to the second movie, or offering a media player that allow the user to choose between two versions of the same movie (one with audio descriptions and one without). Providing a second version including audio descriptions as part of the primary sound track will make this content accessible for blind people who need to hear not only the dialogue, but also the context and other aspects of the video that are not communicated by the characters' dialogue alone.

User Story

As a user who is blind, I want to have access to a version of the video that has audio descriptions, so that I will not miss any important information that is not conveyed on the visual track.

Simple Code Example

Not Applicable

Testing Methodology

Look for any media and check that a second version of the movie, complete with audio descriptions, is provided. Open this second version and listen to the movie, checking to see if gaps in dialogue are used to convey important information regarding visual content.

Specification Details

WCAG 2.0: Level A

Principle: Perceivable

Guideline: 1.2 Time-based Media

Success Criterion: 1.2.3 Audio Description or Media Alternative (Prerecorded)

Related Technique: G173

no. 141

Make sure users can turn images of text into real HTML text, styled with CSS

Despite an author’s best intention never to rely on images of text due to the potential issues those may create for some users, there will always be situations where the use of such images simply cannot be avoided. Maybe there isn’t enough real estate to embed a HTML text-based version of the image in the page; maybe the exact same result as the image itself cannot be achieved using HTML and CSS; maybe the designer just won’t accept anything but her carefully crafted visuals. Whatever the reason may be, when there is no way around using images of text, and authors still want to ensure users won’t run into issues while zooming in to read them, a practical option can be to provide an on-demand feature to let users turn those images of text into real HTML text, styled with CSS.

To do so, simply provide a mechanism, such as a button on the page, or a global user preference setting that will automatically replace all images of text with alternate versions, built with HTML and CSS instead. By doing so, users get to choose from different rendering options to control the visual presentation of the content, and while the majority of users would still rely on the default images of text provided, whenever users would need an option that provides more flexibility, the mechanism could come into play.

User Story

As a user who has low vision or has difficulty reading stylized text, I want every page to provide a mechanism allowing me to turn images of text into real HTML text styled with CSS, so that I can reliably control the presentation of the content in order to facilitate reading.

Simple Code Example

Not Applicable

Testing Methodology

Using the Web Developer Toolbar for Firefox, select the “Outline Images » Outline All Images” test under “Images” and check that none of the images contain informative or meaningful text. If any image contains text, validate that a mechanism is available to turn these images into HTML text, styled with CSS.

Specification Details

WCAG 2.0: Level AAA

Principle: Perceivable

Guideline: 1.4 Distinguishable

Success Criterion: 1.4.9 Images of Text (No Exception)

Related Technique: G140