More Web Accessibility Network

WCAG 2.0 and Transcripts

The word "transcript" doesn't appear in WCAG 2.0 because it is strictly interpreted as being only the verbatim text version of that which is spoken. For optimal web accessibility for users with auditory disabilities, information in addition to the spoken content (such as indications of laughter or explosions, or the presentation of visual-only content) are necessary. WCAG uses the term "alternative for time-based media" to describe this descriptive transcript. WCAG 2.0 Success Criterion 1.2.3 (Level A) requires synchronized captions and either audio descriptions or an "alternative for time-based media" (i.e., descriptive transcript).

---

Auto-playing Audio

Audio, such as background music, that automatically plays when a user comes to a web page can be very distracting and will interfere with screen reader audio. WCAG 2.0 Level A requires that "a mechanism is provided to stop, pause, mute, or adjust volume for audio that automatically plays on a page for more than 3 seconds". It is usually better to not automatically play audio, but allow the user to manually play the audio if they choose.

---

Pop-up Windows

Pop-up windows (new windows that are triggered automatically or when a user activates a link) can cause confusion and disorientation for all users. While screen readers typically indicate that a new window has opened, managing multiple windows can be complicated, especially for blind users. Because of the various difficulties with pop-up windows, they should generally be avoided. If pop-up windows are triggered via a link, the user should typically be informed within the link text that the link opens a new window.

---

Layout Tables

Tables in HTML are intended for tabular data. Although using tables for page layout is not considered best practice, this typically has minimal impact on accessibility, as long as two primary guidelines are kept in mind. First, do not use any markup that is typically used to identify data tables. This includes table headers

To access the Center for Disability Resources Library and its materials, please click this link

Web Accessibility Network

Icons vs. Text

Icons can present complex information, meaning, and functionality in a very small amount of space. A browser's "Home" icon (typically an illustration of a house) readily conveys rather complex meaning and functionality - activating it will take you to the browser's defined home page. While such icons can be very useful, care must also be taken to ensure that the icon is understandable to the end user and reflects well-known conventions. The floppy disk icon, for example, is used for "Save", yet the real-world connection between saving a file and an actual floppy disk (something that is rarely seen and no longer produced) is not present for many people, particularly newcomers to the web and youth. Real text ("Home" or "Save") should be used in place of an icon, or perhaps in conjunction with an icon.

---

Avoid Redundant Alternative Text

Images and related text are often paired together, such as a product image with the product name immediately below it, or a photograph with a caption. In instances where the text conveys the content of the image, the image should usually be given null or empty alternative text (alt=""). This avoids the redundancy of having a screen reader read the same information twice (once for the image alternative text and once for the caption or adjacent text).

If the image and the adjacent text are links to the same location, combine both the image and the text into one link and give the image null alternative text. This avoids redundancy, results in fewer links for the user to navigate, and results in fewer links for the user to navigate.

---

Extraneous Alternative Text

Alternative text should convey the content and function of an image, but it should not be used to convey additional information that is not presented visually by the image. For example, file size, file format, copyright details, that a graphical link opens in a new window, link destination, price (on e-commerce sites), keywords for search engines, etc. should not be included in alternative text. If this content is important, it should be included in the page in a way (such as in nearby text) that makes it available to all users. If this information is not necessary, it should be removed or may be presented in the title attribute value (which is intended for this type of advisory information).

---

Sensory Characteristics

Avoid relying on sensory characteristics, such as shape, size, or visual location. For example, "Click the green button" will not be useful to screen reader users or some users who are color blind. Instead, use "Click on the green button labeled 'submit'" or simply "Click the 'submit' button". Similarly, "Use the form on the right" could be changed to something more descriptive such as, "Use the search form on the right." Other examples include prompts such as "Click the larger button," "Select a state on the east coast on the map", "Instructions are included in the sidebar", etc. Purely auditory cues ("Click 'Continue' after you hear the beep") should also be avoided.

To access the Center for Disability Resources Library and its materials, please click this link

Web Accessibility Network

Voice Control Software and Image Alternative Text

To activate links on a page, users of voice control software, such as Dragon NaturallySpeaking, speak the visible link text. When an image is linked, the alternative text of that image can be spoken to activate that link. When an image presents graphical text, the alternative text of the image should match the visible text to ensure voice control software users can easily activate that link.

---

Use True Text

True text has several advantages over graphical text and should be used whenever possible. True text is easier to read, especially if it is enlarged. The user can more easily customize the appearance of the text to make it more readable (changing color, size, font, etc.). File size is typically smaller for true text and it can be translated into other languages.

WCAG 2.0 Level AA requires that if the same presentation can be accomplished using true text, then you must use true text rather than an image of text. Level AAA requires that text cannot generally be used within images at all.

---

Text Readability

Keep the following guidelines in mind for displaying text:

• Avoid very small text. This not only impacts some users with low vision, but many users with cognitive disabilities as well.
• While serif fonts (e.g., Times) are more readable when printed, both serif and sans-serif fonts are appropriate when displaying body text onscreen, as long as the font is clean and readable.
• Underlined text should be avoided, except to designate links.
• Minimize the number of different fonts used on a page. Two to three fonts is optimal.
• ALL CAPS should be used minimally. It is more difficult to read and is often interpreted as "shouting". Additionally, screen readers may read all-caps text letter by letter (like an acronym) rather than as full words.

---

WCAG 2.0 and Reading Level

It is always a good idea to make content as readable and understandable as is suitable for the audience. For complex content (defined as that which requires a reading ability more advanced than the lower secondary education level), WCAG 2.0 Success Criterion 3.1.5 (Level AAA) requires that a more simplified and readable version of the content be provided. Much content cannot be made perfectly understandable at these levels (consider a college-level chemistry class, for example), thus it's a Level AAA success criterion. Regardless of the limitations for some content, for a page to be optimally accessible, it should be written so as to be easily readable and understandable to the target audience.

To access the Center for Disability Resources Library and its materials, please click this link