WCAG Overview & 1. Perceivable Flashcards
- Perceivable
- Operable
- Understandable
- Robust
What to each of these mean?
- Information and user interface components must be presentable to users in ways they can perceive.
- User interface components and navigation must be operable for all.
- Both the Information contained on the page and the operation of the user interface must be understandable.
- Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.
What’s the hierarchy of WCAG look like?
Principle > Guideline > Success Criterion > Sufficient Techniques
Perceivable
1.1 Text Alternatives
1.1.1 Non-Text Content (pictures, charts, applets, audio files, video)
Level A
Intent- to make information conveyed by non-text content accessible through the use of a text alternative.
Success Criterion 1.1.1 Non-text Content (Level A): 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 and Input — these have names to describe purpose.
Time-Based Media, Tests, Sensory ( is not purely decorative and does not primarily convey important information or perform a function) – text alternatives at least provide descriptive identification of the non-text content.
CAPTCHA –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. At least two modes.
Decorative, Formatting, Invisible – implemented in a way that it can be ignored by assistive technology.
Perceivable
- 1 Text Alternatives
- 1.1 Non-Text Content
Failures
using CSS to include images that convey important information
having a text alternative that does not include information that is conveyed by color differences in the image
not updating text alternatives when changes to non-text content occur
using text alternatives that are not alternatives (e.g., filenames or placeholder text)
not marking up decorative images in HTML in a way that allows assistive technology to ignore them
providing a text alternative that is not null (e.g., alt=”spacer” or alt=”image”) for images that should be ignored by assistive technology
omitting the alt attribute or text alternative on img elements, area elements, and input elements of type “image”
providing long descriptions for non-text content that does not serve the same purpose or does not present the same information
using text look-alikes or ASCII-art to represent text without providing a text alternative
What are some “text alternative”s?
Short labels the describe content and/or the purpose of the content (if interactive)
longer descriptions of chart contents and summary of data
text transcript of audio
short description of animation and reference the longer explanation coming up
longer, detailed descriptions of images to convey why it is included (the two leaders shaking hands)
Additional descriptions to give context (may be linked to)
Text that replaces sounds like Right or Wrong answers
1.1.1 Non-Text
Note on Captcha – Name the three things you can do for Captcha accessibility
- Providing more than two modalities of CAPTCHAs
- Providing access to a human customer service representative who can bypass CAPTCHA
- Not requiring CAPTCHAs for authorized users
Combining adjacent image and text links for the same resource
Where there is both an image and text, the image should have an empty alt unless it is explicitly referred to elsewhere (such as an instruction that says to click on the trash can icon). Then, the alt should contain the exact reference, alt=”trash can icon”
Perceivable
- 2 Time-Based Media
- 2.1 Audio-only/Video-only Prerecorded
INTENT: make information conveyed by prerecorded audio-only and prerecorded video-only content available to all users
For both- creating a document that tells the same story and presents the same information as the prerecorded audio-only content
the document serves as a long description for the content and includes all of the important information as well as descriptions of scenery, actions, expressions, dialog, background sounds, etc. that are part of the presentation.
Failures:
using text alternatives that are not alternatives (e.g., filenames or placeholder text)
providing long descriptions for non-text content that does not serve the same purpose or does not present the same information
Perceivable
- 2 Time-Based Media
- 2.2 Captions (Prerecorded)
Intent: enable people who are deaf or hard of hearing to watch synchronized media presentations
Captions are provided for all prerecorded audio content in synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
Provide open or closed captions
Failures:
captions omitting some dialogue or important sound effects
providing synchronized media without captions when the synchronized media presents more information than is presented on the page
not labeling a synchronized media alternative to text as an alternative
- Perceivable
- 2 Time-Based Media
- 2.3 Audio Description or Media Alternative (Prerecorded)
Intent: to provide people who are blind or visually impaired access to the visual information in a synchronized media presentation.
An alternative for time-based media or audio description of the prerecorded video content is provided for synchronized media, except when the media is a media alternative for text and is clearly labeled as such.
How- provide audio description of the video content OR providing all of the information in the synchronized media (both visual and auditory) in text form.
FAILURES: none
- Perceivable
1.2 Time-Based Media
1.2.4 Captions Live
Level AA
INTENT: enable people who are deaf or hard of hearing to watch real-time presentations.
Captions are provided for all live audio content in synchronized media.
Either open or closed
Failures: none
- Perceivable
1.2 Time-Based Media
1.2.5 Audio Description Prerecorded
Level AA
Intent provide people who are blind or visually impaired access to the visual information in a synchronized media presentation.
Audio description (an audio track) is provided for all prerecorded video content in synchronized media. The audio description augments the audio portion of the presentation with the information needed when the video portion is not available. During existing pauses in dialogue, audio description provides information about actions, characters, scene changes, and on-screen text that are important and are not described or spoken in the main sound track. FAILURES: none
- Perceivable
- 2 Time-Based Media
- 2.6 Sign Language
Level AAA
INTENT: to enable people who are deaf or hard of hearing and who are fluent in a sign language to understand the content of the audio track of synchronized media presentations.
Sign language interpretation is provided for all prerecorded audio content in synchronized media.
Failures:none
- Perceivable
- 2 Time-Based Media
- 2.7 Extend Audio Description Prerecorded
Level AAA
Intent: provide people who are blind or visually impaired access to a synchronized media presentation beyond that which can be provided by standard audio description.
Where pauses in foreground audio are insufficient to allow audio descriptions to convey the sense of the video, extended audio description is provided for all prerecorded video content in synchronized media.
How- Using the track element to provide audio descriptions
Failures: none
- Perceivable
1.2 Time-Based Media
1.2.8 Media Alternative
Level AAA
INTENT: to make audio visual material available to individuals whose vision is too poor to reliably read captions and whose hearing is too poor to reliably hear dialogue and audio description.
An alternative for time-based media is provided for all prerecorded synchronized media and for all prerecorded video-only media.
This approach involves providing all of the information in the synchronized media (both visual and auditory) in text form. It reads something like a book.
Failures: none
- Perceivable
- 2 Time-Based Media
- 2.9 Audio only - Live
Level AAA
Intent: to make information conveyed by live audio, such as video conferencing, live speeches and radio Webcasts, accessible through the use of a text alternative.
An alternative for time-based media that presents equivalent information for live audio-only content is provided.
A live text caption service will enable live audio to be accessible to people who are deaf or hard of hearing, or who cannot otherwise hear the audio.
OR a script is provided or other text based alternative
Failures:none
- Perceivable
- 3 Adaptable
- 3.1 Info and Relationships
Level A
Intent: information and relationships that are implied by visual or auditory formatting are preserved when the presentation format changes.
Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (think headings)
How-
Semantic markup (if not available using text to convey what variations in text presentation mean)
Aria landmarks and roles (grouping, region)
Aria-labeledby
Using text to convey information that is conveyed by variations in presentation of text
A simple text document is formatted with double blank lines before titles, asterisks to indicate list items and other standard formatting conventions so that its structure can be programmatically determined.
Separating information and structure from presentation to enable different presentations
Font icons have role = “img”
Failures- tons of them, all not doing the above plus
inserting non-decorative content by using :before and :after pseudo-elements and the ‘content’ property in CSS
- Perceivable
- 3 Adaptable
- 3.2 Meaningful Sequence
Level A
intent: enable a user agent to provide an alternative presentation of content while preserving the reading order needed to understand the meaning.
When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.
Providing a particular linear order is only required where it affects meaning.
There may be more than one order that is “correct” (according to the WCAG 2.0 definition).
Only one correct order needs to be provided.
how- dom in right order, tabindex to order, unicode left-to-right or right-to-left mark, CSS letter-spacing
Failures: CSS to change order, whitespaces for tables, columns words, HTML layout table that loses meaning if linear,
- Perceivable
- 3 Adaptable
- 3.3 Sensory Characteristics
Intent: all users can access instructions for using the content, even when they cannot perceive shape or size or use information about spatial location or orientation.
Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.
how-Providing textual identification of items that otherwise rely only on sensory information to be understood
Failures: identifying content only by its shape or location
using a graphical symbol alone to convey information
- Perceivable
- 3 Adaptable
- 3.4 Orientation
Level AA
Intent: Content displays in the orientation (portrait or landscape) preferred by the user.
Content does not restrict its view and operation to a single display orientation, such as portrait or landscape, unless a specific display orientation is essential.
How-Using CSS to set the orientation to allow both landscape and portrait.
Use of show/hide controls to allow access to content in different orientations.
Failure- locking into one orientation or the other
- Perceivable
- 3 Adaptable
- 3.5 Identify Input Purpose
Level AA
Intent:to ensure that the purpose of a form input collecting information about the user can be programmatically determined, so that user agents can extract and present this purpose to users using different modalities.
The purpose of each input field collecting information about the user can be programmatically determined
This success criterion defines the types of user interface component input purposes, found in Section 7 of the WCAG 2.1 Recommendation, that must be programmatically identifiable.
how- the type attribute and HTML autocomplete attribute
Failures: none
- Perceivable
- 3 Adaptable
- Identify Purpose
Level AAA
Intent: ensure that the purpose of many elements on a page can be programmatically determined, so that user agents can extract and present that purpose to users using different modalities.
In content implemented using markup languages, the purpose of user interface components, icons, and regions can be programmatically determined.
how-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.
Icons on a website are marked up so that users can substitute their own icon sets into the page.
Enable user agents to find the version of the content that best fits their needs.
Using semantics to identify important features (coga-simplification=”simplest”).
Use of aria-invalid and aria-required.
Failures: none
- Perceivable
- 4 Distinguishable
- 4.1 Use of Color
Level A
Intent: to ensure that all sighted users can access information that is conveyed by color differences, that is, by the use of color where each color has a meaning assigned to it.
Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
How
in words- Ensuring that information conveyed by color differences is also available in text
Including a text cue for colored form control labels
Ensuring that additional visual cues are available when text color differences are used to convey information
Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on focus for links or controls where color alone is used to identify them
Color in an image:
Using color and pattern and Ensuring that information conveyed by color differences is also available in text
ADvidory- Using CSS to change the presentation of a user interface component when it receives focus
failures: not doing the above
- Perceivable
- 4 Distinguishable
- 4.2 Audio Control
Level A
intent: when using an SR it is important that the user be able to turn off the background sound from the site
If any audio on a Web page plays automatically for more than 3 seconds, either a mechanism is available to pause or stop the audio, or a mechanism is available to control audio volume independently from the overall system volume level.
Failures: sound longer than 3 seconds without a means to turn it off
No way to turn off an autoplaying HTML5 media element