WCAG 2.2 - Perceivable Flashcards
What does the POUR stand for?
Perceivable, Operable, Understandable, and Robust?
What is meant by Perceivable?
Information and user interface components must be presentable to users in ways they can perceive.
Perceivable:
- Provide text alternatives for non-text content.
- Provide captions and other alternatives for multimedia.
- Create content that can be presented in different ways, including by assistive technologies, without losing meaning.
- Make it easier for users to see and hear content.
Videos must have captions for deaf or hard-of-hearing users.
Audio files must have transcripts for deaf or hard-of-hearing users.
Images must have alternative text describing the image for visually-impaired users.
Text must be added to the page via HTML rather than CSS so the text can still be read if styles are turned off completely.
Deque Resource: https://dequeuniversity.com/class/iaap-cpacc-2.0/principles/
What is meant by Operable?
User interface components and navigation must be operable.
- Make all functionality available from a keyboard.
- Give users enough time to read and use content.
- Do not use content that causes seizures or physical reactions.
- Help users navigate and find content.
- Make it easier to use inputs other than a keyboard.
Additional Tips
Key features of operable websites include:
Multiple ways to interact with the website.
User control over time limits/timing.
Clear instructions and error recovery options that can be controlled regardless of ability.
Semantic HTML on links and buttons, rather than using <div> or <span> tags.
No elements that require drag-and-drop interactions unless there is an accessible alternative.</span>
Deque Resource: https://dequeuniversity.com/class/iaap-cpacc-2.0/principles/
What is meant by Understandable?
Information and the operation of the user interface must be understandable.
- Make text readable and understandable.
- Make content appear and operate in predictable ways.
- Help users avoid and correct mistakes.
Additional Tips:
Appropriately targeted language and reading level (typically at 8th- or 9th-grade reading level if writing for the general public).
Supplemental representation of information, such as:
Summaries or excerpts before long articles.
Written descriptions of information contained in charts or graphs.
Transcripts of audio or video files.
Audio files that let people listen to pages instead of reading them.
Understandable functionality, which typically comes from elements like:
Consistent font styles (family, colors, and sizing) across all pages of the site.
A well-thought-out and easy-to-use navigation structure.
Clear instructions for forms and visible form labels.
Tooltips or “getting started” guides for special features.
Deque Resource: https://dequeuniversity.com/class/iaap-cpacc-2.0/principles/
What is meant by Robust?
User interface components and navigation must be operable
- Maximize compatibility with current and future user tools.
Additional Tips:
Ideally, robust websites must:
Be functional across current and (as much as possible) future devices, operating systems, and browsers.
Support some outdated operating systems and browser versions, as elderly people and people who use assistive technology are less likely to be running the most up-to-date versions of their browser or operating system.
Validate against technical standards for any applicable platforms.
Deque Resource: https://dequeuniversity.com/class/iaap-cpacc-2.0/principles/
Guideline 1,1 Text Alternatives
Guideline 1.1 Text Alternatives
- 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.
Text alternatives is a foundational aspect of digital accessibility. There are typically many graphical and non-text objects on the screen, such as images, buttons, form controls. These need text alternatives, which are read aloud by screen readers or used by speech input to activate links for example.
Examples: Alt text for images
- https://webaim.org/techniques/alttext/
- https://www.w3.org/WAI/tutorials/images/
- https://learning.edx.org/course/course-v1:W3Cx+WAI0.1x+3T2019/block-v1:W3Cx+WAI0.1x+3T2019+type@sequential+block@e14d56ad7d1449f28a1699a3fb7644e7/block-v1:W3Cx+WAI0.1x+3T2019+type@vertical+block@7e6b83d50baf4ed5a0bc16aae3073c47
SC 1.1.1
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. (Refer to Success Criterion 4.1.2 for additional requirements for controls and content that accepts user input.)
- Time-Based Media: If non-text content is time-based media, then text alternatives at least provide descriptive identification of the non-text content. (Refer to Guideline 1.2 for additional requirements for media.)
- 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.
- https://www.w3.org/TR/WCAG22/#non-text-content
- https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html
Guideline 1.2 Time Based Media
Time-Based Media
Provide alternatives for time-based media.
Time-based media refers to content that is dependent on time. The purpose of this check is to make sure people have access to time-based and synchronized media using alternative formats.
Success Criteria
1.2.1 - Audio-only and Video-only (Prerecorded) Level A
1,2.2 Captions (Prerecorded) Level A
1.2.3 Audio Description or Media Alternative (Prerecorded) Level A
1.2.4 Captions: Live AA
1.2.5 Audio Description (Prerecorded) Level AA
Level AAA
1.2.6 Sign Language (Prerecorded) Level AAA
1.2.7 Extended Audio Description (Prerecorded) Level AAA
1.2.8 Media Alternative (Prerecorded) Level AAA
1.2.9 Audio-only (Live) Level AAA
Resources:
https://learning.edx.org/course/course-v1:W3Cx+WAI0.1x+3T2019/block-v1:W3Cx+WAI0.1x+3T2019+type@sequential+block@e14d56ad7d1449f28a1699a3fb7644e7/block-v1:W3Cx+WAI0.1x+3T2019+type@vertical+block@6e29a41060d84135b64299e2c33a5ff0
________________________________
There are four primary methods for providing alternatives for time-based media:
captions
transcripts
audio descriptions
sign language
Guideline 1.3 Adaptable
Adaptable: Create content that can be presented in different ways (for example simpler layout) without losing information or structure
1.3.1 Info and Relationships: A
1.3.2 Meaning Sequence: A
1.3.3 Sensory Characteristics: A
1.3.4 Orientation: AA
1.3.5 Identify Input Purpose: AA
1.3.6 Identify Purpose Level AAA( Added in 2.1)
*This guideline deals mostly with semantic HTML
Examples:
- A form with required fields
- A form that uses color and text to indicate required fields
- A bus schedule table where the headers for each cell can be programmatically determined
- A form where the labels for the checkboxes can be programmatically determined
- A text document
Resources:
https://learning.edx.org/course/course-v1:W3Cx+WAI0.1x+3T2019/block-v1:W3Cx+WAI0.1x+3T2019+type@sequential+block@e14d56ad7d1449f28a1699a3fb7644e7/block-v1:W3Cx+WAI0.1x+3T2019+type@vertical+block@8639d71bfa88427eac446e15771cf6d7
- https://www.w3.org/WAI/fundamentals/accessibility-principles/#adaptable
- https://www.w3.org/WAI/tutorials/page-structure/
- https://www.w3.org/WAI/tutorials/tables/
- https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html#content-structure-separation-programmatic-examples-head
Guideline 1.4 Distinguishable
Make it easier for users to see and hear content including separating foreground from background
Examples of making content distinguishable include:
- Color is not used as the only way of conveying information or identifying content
- Default foreground and background color combinations provide sufficient contrast
- When users resize text up to 200% or change text spacing, no information is lost
- Text reflows in small windows (“viewports”) and when users make the text larger
- Images of text are resizable, replaced with actual text, or avoided where possible
- Users can pause, stop, or adjust the volume of audio that is played on a website
- Background audio is low or can be turned off, to avoid interference or distraction
1.4.1 Use of Color: A
1.4.2 Audio Control: A
1.4.3 Contrast (Minimum): AA
1.4.4 Resize Text: AA
1.4.5 Images of Text: AA
Level AAA
1.4.6 Contrast (Enhanced) Level AAA
1.4.7 Low or No Background Audio Level AAA
1.4.8 Visual Presentation Level AAA
1.4.9 Images of Text (No Exception) Level AAA
1.4.10 Reflow: AA
1.4.11 Non-text Contrast: AA
1.4.12 Text Spacing: AA
1.4.13 Content on Hover or Focus: AA
Resources:
https://learning.edx.org/course/course-v1:W3Cx+WAI0.1x+3T2019/block-v1:W3Cx+WAI0.1x+3T2019+type@sequential+block@e14d56ad7d1449f28a1699a3fb7644e7/block-v1:W3Cx+WAI0.1x+3T2019+type@vertical+block@7d4b974b457148aba4f514fc7ba54d35
Text alternatives for images
Decorative images should include alternative text describing the image. (True or False)
False
Some images - like decorative images - need to be “hidden” from screen readers and other assistive technologies. These images need to have an empty text alternative or be rendered using another method, like CSS, so that assistive technologies know to ignore them.
Empty text alternative
An empty/null text alternative is not the same as a missing alternative text attribute. (True or False)
True
If an SVG (or any graphic) is purely decorative, it needs to have an empty/null alternative text attribute. This sends a signal to the assistive technology device to ignore this image as it is not necessary for understanding the content or action on the page.
An empty/null alternative text attribute is not the same as a missing alternative text attribute. If the alternative text attribute is missing, the AT might read out the file name or surrounding content in an attempt to give the user more information about the image.
Missing alt example:
img src=“here-is-some-image.jpg”
Empty/null alt example:
img src=“here-is-some-image.jpg” alt=””
Describing an image
You should always use phrases like “image of” or “graphic of” to describe an image. (True or False)
False
Most of the time, the format of the file is conveyed to the assistive technology device so you do not need to add this information.
Length of alt attribute (True or False)
True
Keep your alternative text as short as possible, while still being descriptive. If you need more characters, use caption text or further describe the image in the main text area on the page.
Text alternative content
Which content might need text alternatives?
- Charts
- Graphs
- Lists
- Images
- Headings
- Charts, graphs, and images
Lists and headings do not need text alternative information, since both (if marked-up correctly) are already able to be read by assistive technology users.
What are captions?
Captions are text synchronized with the multimedia for people who cannot hear the spoken words. People often confuse “captions” and “subtitles,” but they are not the same thing. Both are text synchronized with the words in a video and both often appear in the same location in the media (usually the bottom of the screen). However captions can be thought of as a transcription of dialogue for people who are Deaf and hard-of-hearing, while subtitles are essentially helper text for people who can hear the audio but may not understand what was said (ex. garbled speech or words spoken in a language you don’t understand).
( 1.2 Time Based Media)
What are transcripts?
Transcripts are the full text of the spoken words and important visual information in the media file, to read as an alternative to watching or listening to the media file. Transcripts are text-based documents that serve as an alternative to information presented in an audible and visual format. They are similar to captions, but they take the experience to the next level by including important sound effects and other significant visual descriptions (ex. describing eerie sounds in the background). Depending on your type of video, transcripts may be easy to generate from captions and vice-versa.
( 1.2 Time Based Media)
What are Audio descriptions?
Audio descriptions are a version of the multimedia file that includes a narrator explaining important visual information - such as unspoken actions and events - for the benefit of people who cannot see what’s happening on the screen. Audio descriptions, unlike captions and transcripts, are a recording of a person explaining the visual aspects of the video that aren’t in the video’s original dialog or narration (ex. describing facial expressions or scenery). Audio descriptions should convey visual information verbally–that dialogue and other sounds cannot.
(1.2 Time Based Media)
What is sign language?
Sign language interpretation for multimedia is when you add a video of an interpreter, sometimes shown in a box to the side of the video, who narrates the audio portion through sign language. If you are live streaming your event, typically the sign language interpreter is in the same room as the speaker. Sign language interpretation is important for multimedia since for many people who are Deaf, sign language is their first and most fluent language. Sign language interpretation is often more expressive than just written transcripts, so can provide a much richer experience than captions or transcripts alone.
(1.2 Time Based Media)
Types of multimedia alternatives
What are some of the main types of accessible alternatives for multimedia? (Check all that apply.)
- sign language
captions
transcripts
audio descriptions
What should captions include?
- speaker identification
- meaningful sound effects
- Meaningful music
- meaning laughter
Speaker identification needs captions, especially if there are several people in the video and it is not clear who is speaking.
Captions should remain verbatim like a literal translation, so clarifications beyond the audio information is not necessary.
Sound effects like an opening door or footsteps, should be included in captions when they are relevant.
Music, like background music, is important to capture when they are relevant.
Similarly, laughter laughter or applause, is important to capture when they are relevant.
Sign language is the primary language for communicating for some deaf people. (true or false)
True
Audio descriptions provide which of the following?
- am alternative for those who can not see the video
an alternative for those who cannot hear the content
description of the visual information
description of the audio information
am alternative for those who can not see the video
description of the visual information
Audio descriptions provide an alternative to both the spoken words and relavant visual information on the screen.
