WCAG Flashcards
1
Information and user interface components must be presentable to users in ways they can perceive.
Perceivable
1.1
Provides text alternatives for any non-text content so it can be changed as the user needs it: large print, braille, speech, symbols, simpler language
Text alternatives
1.1.1
A
All non-text content has a text alternative that serves equivalent purpose
Non-text Content
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.
1.2
Provides alternatives for time-based media
Time-based media
1.2.1
A
For prerecorded audio-only or video-only media an alternative is provided that presents equivalent information
Audio-only and Video-only (Prerecorded)
A video-only file with an audio track
A silent movie includes an audio track which includes a description of the action in the video.
1.2.2
A
Captions are provided for all prerecorded media in a synchronised way
Captions (prerecorded)
A video clip shows how to tie a knot. The captions read,
“(music)
Using rope to tie knots was an important skill
for the likes of sailors, soldiers and woodsmen..”
1.2.3
A
Audio description or an alternative for time-based media of the prerecorded video content is provided
Audio description or media alternative (prerecorded)
A movie with audio description
Describer: A title, “Teaching Evolution Case Studies. Bonnie Chen.” A teacher shows photographs of birds with long, thin beaks.
Bonnie Chen: “These photos were all taken at the Everglades.”
1.2.4
AA
Captions are provided for all live audio content in syncronised media
Captions (live)
A Web cast
A news organization provides a live, captioned Web cast.
1.2.5
AA
Audio description is provided for all prerecorded video in synchronised media
Audio description (prerecorded)
A movie with audio description
Describer: A title, “Teaching Evolution Case Studies. Bonnie Chen.” A teacher shows photographs of birds with long, thin beaks.
Bonnie Chen: “These photos were all taken at the Everglades.”
1.2.6
AAA
Sign language interpretation is used for prerecorded audio content
Sign language (prerecorded)
A corporation is making an important announcement to all of its employees. The announcement will be held in the main headquarters and later streamed to the Web. A sign language interpreter is provided at the announcement location for the employees that are present in the meeting room. For the Web version of the announcement, the sign language interpreter is shown/superimposed in the corner of the display.
1.2.7
AAA
When pauses in foreground audio are insuficient to insert audio description, extended audio description is provided for all prerecorded video content
Extended audio description (prerecorded)
Video of a lecture. A physics professor is giving a lecture. The professor makes freehand sketches on the whiteboard, speaking rapidly while drawing. As soon as discussion on one problem is finished, the professor erases the drawing and makes another sketch while continuing to speak and gesture. The video is paused between problems, and extended audio description of the professor’s drawings and gestures is provided; the video is then resumed.
1.2.8
AAA
An alternative is provided for all prerecorded synchronised and video-only media
Media alternative (prerecorded)
Braille or other type of material that can be used by someone who can neither see nor hear properly
1.2.9
AAA
An alternative for media that presents equivalent information for live audio-only content is provided
Audio-only (live)
A public relations firm uses Web based caption services to cover live events; the output from the service is incorporated in a sub frame of the Web page which includes the streaming audio control.
A transcript is provided when live captions are not an option.
1.3
Create content that can be presented in different ways (e.g. simpler) without losing information or structure
Adaptable
1.3.1
A
Information, structure and relationships conveyed through presentation can be programmatically determined or is available in text
Info and relationships
A form with required fields
A form contains several required fields. The labels for the required fields are displayed in red. In addition, at the end of each label is an asterisk character, *. The instructions for completing the form indicate that “all required fields are displayed in red and marked with an asterisk *”, followed by an example.
1.3.2
A
When the sequence in which content is presented affects meaning, a correct reading sequence should be programmatically determined
Meaningful sequece
In a multi-column document, the linear presentation of the content flows from the top of a column to the bottom of the column, then to the top of the next column.
1.3.3
A
Instructions for understanding and operating content do not rely solely on sensory characteristics such as shape, colour, size, visual location, orientation or sound.
Sensory characteristics
An online multi-page survey uses a link implemented as a green arrow icon placed in the lower right hand corner of the content to move from one survey page to the next. The arrow is clearly labeled with “Next” and the instructions state, “To move to the next section of the survey, select the green arrow icon labeled ‘Next’ in the lower right corner below the last survey question.” The instruction uses positioning and color to help identify the icon; the instruction does not rely on these sensory characteristics since it also refers to the label, so it passes this criterion.
1.3.4
AA
Content does not restrict its view to a single display orientation (portrait or landscape)
Orientation
A video is shown in either portrait or in landscape based on the user’s chosen orientation.
An example where orientation is essential could be a banking app that requires the device be in landscape mode to easily and accurately capture an image of a check for deposit.
1.3.5
AA
The purpose of each input field that collects user information can be programmatically determined when the input field serves a purpose previously identified and the content is implemented using technologies which support identifying the expected meaning of the input
Identify input purpose
A browser plugin to add icons inserts icons representing the person’s name, home address, telephone number and email address to identify the input purpose visually.
1.3.6
AAA
In content implemented using markup languages, the purpose of user interface components, icons, and regions can be programmatically programmed
Indetify purpose
A website uses ARIA landmarks to identify the regions of the page, and users can hide areas that do not have a role of main.
The links in the navigation of a website are marked up so that users can add their own icons.
1.4
Make it easier for users to see and hear content including separating foreground from background
Distinguishable