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.
Which statement(s) is true about automatic captions? (Check all that apply.)
- can save you alot time and effort
- are generally reliable enough for accessibility
- need to be edited to ensure correctness
- can save you alot time and effort
- need to be edited to ensure correctness
Auto-captioning is when the media platforms will use speech recognition software to try and understand the words being spoken and add them to the multimedia as captions. As exciting as this technology is, it is not yet 100% reliable. Your best bet at this point in time is to use the auto-captioning feature as a “first step” in your captioning process.
There should be several h1 headings on a single page. (True or False)
False
An h1’s job is to tell the user what the webpage is about. In most cases, there is only one “main point” of the webpage - so only h1 is needed.
Typically heading levels should not skip levels. For example, h5 should not directly follow h3 without h4 in between. (True or False)
True
In an ideal situation, the headings on a webpage would follow in hierarchical order. This is not always the case in the real world, so the overall context of the headings should factor into your decision making as well.
Which of the following are types of components to look for this basic structure check? (Check all that apply.)
- page titles
- lists
- headings
- colors
- tables
- lists
- headings
- tables
Page titles are not found on the actual webpage, but in the browser tab, so they do not factor into the webpage structure.
Colors are considered part of a website’s style, not structure.
Adding styles for the different levels of headings is beneficial to screen reader users. (True or False)
False
Screen reader users don’t care about your website’s style - they care about the underlying structure.
A webpage with only h2 headings would help a person using an assistive technology device get a good understanding of the page.
(True or False)
False
A webpage with only h2’s does not have any inherent meaning to it, since all the headings have the same weight. Just like the outline to a term paper or article, a webpage needs to have different levels of headings so the reader knows what is the main idea, followed by the secondary idea, and so on.
Color should be the only way of conveying information. (True or False)
False
You need to consider users who do not see color - how would they press the “red” button if they couldn’t tell the button colors apart? You need to provide an alternate way to convey the information.
When you put a video which starts automatically up on your website, what should you do? (Check all that apply.)
- Provide a control to turn off sounds that play automatically
- Provide a control to adjust the volume of the audio
- Provide a link to text version of the video content
- Provide a control to pause the video
- Provide a control to turn off sounds that play automatically
- Provide a control to adjust the volume of the audio
- Provide a control to pause the video
For videos on websites, it is important that the user has control over the sound so it doesn’t interfere with assistive technology device users.
What is the minimum contrast ratio for graphical objects and large-sized text?
at least 7:1
at least 4.5:1
at least 3:1
at least 3:1
The minimum contrast ratio for regular-sized text is 3:1, but it is recommended that you exceed this number whenever possible.
Images of text should be replaced with actual text mark-up, or avoided where possible (True or False)
True
In order for text to be read to people using assistive technology devices, mark-up or image alt text is required. For people using screen magnification software, actual text may scale better than an image.
If you provide text alternative for an active image (ex. link or button), the web content provided by the image should be: (Check all that apply)
- able to be read aloud by screen readers
- displayed on Braille output devices
- usable by voice recognition (speech input)
- able to be read aloud by screen readers
- displayed on Braille output devices
- usable by voice recognition (speech input)
Screen reader users, Braille output device users, and people using speech input should all be able to trigger a link or click a button by their various assistive technology devices. Alternative text on an image helps a user know what link or button they are triggering.
Decorative images should include alternative text describing the image. (True or 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.
If you use a video (with audio) on your website, you should provide: (Check all that apply.)
- captions for users who can’t hear sounds
- audio description for users who can’t see video
- email address for users to send feedback
- text transcripts as an alternative for users
- captions for users who can’t hear sounds
- audio description for users who can’t see video
- text transcripts as an alternative for users
Captions, audio descriptions, and text transcripts are accessibility requirements.
Websites and apps that automatically play music can interfere with screen readers and speech input devices. (True or False)
True
t is important not to auto-play music so it doesn’t affect assistive technology users.
For users to be able to change the presentation of content, you need to properly code the following structures: (Check all that apply.)
- headings
- lists
- input fields
Font color is considered a style and not a structure.
What is the minimum contrast ratio for regular-sized text to meet WCAG A or AA requirements?
at least 4.5:1
The minimum contrast ratio for regular-sized text is 4.5:1, but it is recommended that you exceed this number whenever possible.
Web content must be distinguishable to make it easier to see and hear. Good examples include: (Check all that apply)
- only color is used to convey information
- default text and background color combinations have sufficient contrast
- information will be omitted when users resize text
- all web content is provided in text
default text and background color combinations have sufficient contrast
all web content is provided in text
Color should not be used alone to convey information.
Information should always be visible, even when a user resizes the text on the screen.
Images of text should be replaced with actual text mark-up, or avoided where possible. (True or False)
True: In order for text to be read to people using assistive technology devices, mark-up or image alt text is required. For people using screen magnification software, actual text may scale better than an image.
What are some text alternatives for non-text context?
- Short equivalents for images, including icons, buttons, and graphics
- Description of data represented on charts, diagrams, and illustrations
- Brief descriptions of non-text content such as audio and video files
- Labels for form controls, input, and other user interface components
https://www.w3.org/WAI/fundamentals/accessibility-principles/#perceivable
Guideline 1,1 Text Alternatives
What are some examples of captions and other alternatives for multimedia?
People who cannot hear audio or see video need alternatives.
Examples include:
- Text transcripts and captions for audio content, such as recordings of a radio interview
- Audio descriptions, which are narrations to describe important visual details in a video
- Sign language interpretation of audio content, including relevant auditory experiences
- Well-written text transcripts containing the correct sequence of any auditory or visual information provide a basic level of accessibility and facilitate the production of captions and audio descriptions.
Guideline 1.2 Time Based Media
https://www.w3.org/WAI/fundamentals/accessibility-principles/
What should the colour contrast ratio of text against background be, for a large text of 30 pixels?
- A colour contrast ratio of at least 3 : 1
- A colour contrast ratio of at least 4.5 : 1
- There is no success criterion for that font size.
A colour contrast ratio of at least 3 : 1
What is the difference between a success criterion and a technique?
- A success criterion describes how to test a guideline, while a technique is a possible way to implement a feature, so it conforms to a guideline.
- A technique is the only right way to conform to a guideline.
- None, they are the same.
A success criterion describes how to test a guideline, while a technique is a possible way to implement a feature, so it conforms to a guideline.
A strong accessibility statement should include:
Check all answers that apply.
- A way to contact you to report accessibility issues.
- The accessibility guidelines you aim to comply with.
- A link to a duplicate of the website, made especially for blind users.
- A way to contact you to report accessibility issues.
- The accessibility guidelines you aim to comply with.
