Web Accessibility

Join Newsletter

* indicates required

PC Pitstop Is your PC slow?
Risk Management
affiliate_link

Accessibility

April 03, 2020 | The Kodemonkey

Guideline 1.1 – Text Alternatives

Overview

For those of you that may not know, Kaffeinated Kodemonkey is an Accessibility Driven Web Design Agency. Our mission is to develop websites that are accessible by nature in doing so we follow POUR Web Design.

We will start with the first principle in POUR Web Design, Perceivable, the four (4) Guidelines, and how to use them.

What does Perceivable mean?

Information and user interface components must be presentable to users in ways they can perceive. ]

This means the user can comprehend the information being presented.

Guidelines we will cover in this series:

  • 1.1 Text Alternatives
  • 1.2 Time-based Media
  • 1.3 Adaptable
  • 1.4 Distinguishable

Guideline - 1.1 Text Alteratives

Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Article 1.1.1 - Level A Criterion

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.

  • Controls, Input: If non-text content is a control or accepts user input, then it has a name that describes its purpose.
  • Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content.
  • Test: If non-text content is a test or exercise that would be invalid if presented in text, then text alternatives at least provide descriptive identification of the non-text content.
  • Sensory: If non-text content is primarily intended to create a specific sensory experience, then text alternatives at least provide descriptive identification of the non-text content.
  • captcha: If the purpose of non-text content is to confirm that content is being accessed by a person rather than a computer, then text alternatives that identify and describe the purpose of the non-text content are provided, and alternative forms of captcha using output modes for different types of sensory perception are provided to accommodate different disabilities.
  • Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.

Okay, What does that mean?

First, we have "non-text" - which refers to any content that is not a series of characters that can be programmatically determined or where the series is not expressing something in human language. Such as an image, form inputs, video or audio.

Second, we have "text alternative" - which refers to text that is programmatically associated with non-text content or referred to from text that is programmatically associated with non-text content.

Programmatically associated text is text whose location can be programmatically determined from the non-text content. Such as an image of a chart is described in the text in the paragraph after the chart. The short text alternative for the chart indicates that a description follows.

Putting it into action

Here how this works. Let's take the Data chart we used above. Say we have an image of a pie chart showing productivity over six (6) months. You would use the alt tag to let the user know a detailed explanation is below.

Example:

<img src="pie-chart.png alt="six month productivity pie chart. See Explanation below."> <p>In May we showed 10% productivity, in June we have 30% however in July productivity levels dropped by 10% showing an increase from May of 20%. </p>

You could even follow the description with a table outlining the pie chart.

Examples where this would come into play:

Animation

Or animation showing how a car engine works. There is no audio and the animation is part of a tutorial that describes how an engine works. Since the text of the tutorial already provides a full explanation, the image is an alternative for text and the text alternative includes only a brief description of the animation and refers to the tutorial text for more information.

A traffic Web camera

A Web site allows users to select from a variety of Web cameras positioned throughout a major city. After a camera is selected, the image updates every two minutes. A short text alternative identifies the Web camera as a "traffic Web camera." The site also provides a table of travel times for each of the routes covered by the Web cameras. The table is also updated every two minutes.

An audio recording of a press conference

A Web page includes a link to an audio recording of a press conference. The link text identifies the audio recording. The page also links to a text transcript of the press conference. The transcript includes a verbatim record of everything the speakers say. It identifies who is speaking as well as noting other significant sounds that are part of the recording, such as applause, laughter, questions from the audience, and so on.

An audio recording of a speech

The link to an audio clip says, "Chairman's speech to the assembly." A link to a text transcript is provided immediately after the link to the audio clip.

Benefits:

  • This Success Criterion helps people who have difficulty perceiving visual content. Assistive technology can read text aloud, present it visually, or convert it to braille.
  • Text alternatives may help some people who have difficulty understanding the meaning of photographs, drawings, and other images (e.g., line drawings, graphic designs, paintings, three-dimensional representations), graphs, charts, animations, etc.
  • People who are deaf, are hard of hearing, or who are having trouble understanding audio information for any reason can read the text presentation. Research is ongoing regarding the automatic translation of the text into sign language.
  • Deaf-blind people can read the text in braille.
  • Additionally, text alternatives support the ability to search for non-text content and to repurpose content in a variety of ways.

Disclaimer:

This article is written by our accessibility expert in the effort to help individuals better understand the meaning of WCAG 2.1 Guideline 1.1 Text Alternative. We gathered our information form the WCAG and invite you to visit their site for more information and further explanations.