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.
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:
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.
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.
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.
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.
<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.
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.
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.