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
CRITICAL
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
CRITICAL
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.
CRITICAL
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
CRITICAL
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.
CRITICAL
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
CRITICAL
1.4.1
A
Colour is not used as the only visual means of conveying information
Use of colour
Students view an SVG image of a chemical compound and identify the chemical elements present based both on the colors used, as well as numbers next to each element. A legend shows the color and number for each type of element.
1.4.2
A
If an audio is autoplayed for more than 3 seconds, there’s a way to pause or stop it, or to control the volume independently to the device
Audio control
An audio file begins playing automatically when a page is opened. However, the audio can be stopped by the user by selecting a “silent” link at the top of the page.
1.4.3
AA
Text and images of text have a contrast ratio of 4.5:1 except large scale, decoration or logos
Contrast (minimum)
Some people with cognitive disabilities require color combinations or hues that have low contrast, and therefore we allow and encourage authors to provide mechanisms to adjust the foreground and background colors of the content. Some of the combinations that could be chosen may have contrast levels that will be lower than those those specified here. This is not a violation of this Success Criterion, provided there is a mechanism that will return to the required values set out here.
1.4.4
AA
Except for captions and images, text can be resized without assistive technology up to 200% without loss of content or functionality
Resize text
A user changes the scale of the content with the browser’s full-page zoom function. All the content scales uniformly, and the browser provides scroll bars, if necessary.
CRITICAL
1.4.5
AA
Text is used instead of images of text except it it’s customisable or essential (logos)
Images of text
Rather than using bitmap images to present headings in a specific font and size, an author uses CSS to achieve the same result.
1.4.6
AAA
Text and images of text have contrast ratio of at least 7:1, except large text (4.5:1), incidental (inactive component, decoration or not visible), or logos
Contrast (enhanced)
Images of text do not scale as well as text because they tend to pixelate. It is also harder to change foreground and background contrast and color combinations for images of text, which is necessary for some users.
1.4.7
AAA
For prerecorded audio-only content, there is no background noise, it can be turned off, or it’s 20dB lower than the foreground speech
Low or no background audio
Ensure that any non-speech sounds are low enough that a user who is hard of hearing can separate the speech from background sounds or other noise foreground speech content.
1.4.8
AAA
Blocks of text can have the foreground and background colours personalised by the user, width is no more than 80 characters, text is not justified left or right, line spacing is at least 1.5, paragraph spacing is 1.5x larger than line spacing, text can be resized without use of assistive technology
Visual presentation
People with some cognitive disabilities can read text better when they select their own foreground and background color combinations; can track their locations more easily when blocks of text are narrow and when they can configure the amount of space between lines and paragraphs; can read text more easily when the spacing between words is regular.
1.4.9
AAA
Images of text are only used for decoration or when they are essential (logos)
Images of text (no exception)
A Web page contains a menu of navigation links that have both an icon and text to describe their target. CSS is used to display the text’s font family, size and foreground and background colors; as well as the spacing between the navigation links.
1.4.10
AA
Content is presented without loss of presentation and functionality, and not needing scrolling with vertical scrolling content at a width of 320 px and horizontal scrolling content at a height of 256 px
Reflow
This Success Criterion helps people with low vision who require text enlargement by enabling them to read the content seamlessly, eliminating the necessity to scroll in multiple directions.
1.4.11
AA
Visual presentation has a contrast ratio of 3:1 against adjacent colours in user interface components (controls) and graphical objects
Non-text contrast
Status icons on an application’s dashboard (without associated text) have a 3:1 minimum contrast ratio.
A text input has a dark border around the white editable area.
A graph uses a light background and ensures that the colors for each line have a 3:1 contrast ratio against the background.
1.4.12
AA
No loss of content or functionality if these styles are changed in relation to the font size: line height to 1.5x, spacing following paragraphs to 2x, letter spacing to 0.12x, word spacing to 0.16x
Text spacing
If the markup-based technologies being used are capable of overriding text to the Success Criterion’s metrics, then this SC is applicable.
Text fits within the bounds of its containing box without being cut off.
Text fits within the bounds of its containing box without overlapping other boxes.
1.4.13
AA
When hovering or focusing triggers content to become visible/hidden, it is possible to dismiss the content without moving the pointer/focus, pointer can be moved on additional content without it disappearing, content remains visible until dismissed or content no longer valid
Content on hover or focus
A button’s tooltip is displayed directly below it on mouse hover which can easily be obscured by a large pointer. The tooltip itself is able to be hovered so the mouse pointer can be moved down to its bottom edge in order to view the tooltip text.
2
User interface components and navigation must be operable.
Operable
2.1
Make all functionality available from a keyboard
Keyboard accessible
CRITICAL
2.1.1
A
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes, except where the underlying function requires input that depends on the path of the user’s movement and not just the endpoints.
Keyboard
A drawing program allows users to create, size, position and rotate objects from the keyboard.
Exception - Model helicopter flight training simulator
A model helicopter flight training simulator passes as an exception because the nature of the simulator is to teach real-time behavior of a model helicopter.
CRITICAL
2.1.2
A
If keyboard focus can be moved to a component of the page using just the keyboard, then focus can be moved away from that component using only the kewyboard
No keyboard trap
A Web application brings up a dialog box. At the bottom of the dialog are two buttons, Cancel and OK. When the dialog has been opened, focus is trapped within the dialog; tabbing from the last control in the dialog takes focus to the first control in the dialog. The dialog is dismissed by activating the Cancel button or the OK button.
2.1.3
AAA
All functionality of the content is operable through a keyboard interface without requiring specific timings for individual keystrokes.
Keyboard (no exceptions)
It means that content that uses path-dependent input cannot conform to this Success Criterion and therefore cannot meet Guideline 2.1 at Level AAA
2.1.4
A
If a keyboard shortcut is implemented using only a letter, punctuation or number, then there is either a way to turn it off, reconfigure it, or make it only active on focus
Character key shortcut
Keyboard-only users are in a long issues thread. While reading the thread they accidentally hit the S key, which moves focus to the search bar at the top of the document. This causes them to lose their place and train of thought. However, a mechanism is provided to allow users to change character-key shortcuts. They change the shortcut to include another key so they can avoid future interruptions.
2.2
Provide users enough time to read and use content.
Enough time