WCAG 2.1 / 2.2 Simplified With Examples

An introduction with examples to Guideline 1.1, which states that text alternatives must be provided 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.

Alt text (alternative text), also known as "alt attributes," "alt descriptions," or "alt tags,” are used within an HTML code to describe the appearance and function of an image on a page.

Alt text uses:

1. Adding alternative text to photos is first and foremost a principle of web accessibility. Visually impaired users using screen readers will be read an alt attribute to better understand an on-page image.

2. Alt text will be displayed in place of an image if an image file cannot be loaded.

3. Alt text provide better image context/descriptions to search engine crawlers, helping them to index an image properly.

In this video, we'll take a look at some examples of bad alt text uses with images of text on Amazon and discuss just why good alt text is so important.

A discussion with examples of Guideline 1.2, Time-based Media; which states that alternatives for time-based media must be provided. This lecture covers WCAG Success Criteria 1.2.1 - 1.2.9.

A deeper discussion and focus on Success Criteria 1.2.7 Extended Audio Description (Prerecorded) and 1.2.8 Media Alternative (Prerecorded).

This lecture begins the discussion of Guideline 1.3 Adaptable, which states that content should be created in a way that can be presented in different ways (for example, a simpler layout) without losing information or structure. In this lecture, we focus on Success Criterion 1.3.1, Info and Relationships; which states that information, structure, and relationships conveyed through presentation need to be programmatically determined or are available in text.

In this lecture, we discuss Success Criterion 1.3.2, Meaningful Sequence, via multiple real-world examples. This criterion states that when the sequence in which content is presented affects its meaning, a correct reading sequence should be programmatically determined.

In this lecture, we discuss Success Criterion 1.3.3, Sensory Characteristics; which states that instructions provided for understanding and operating content must not rely solely on sensory characteristics of components such as shape, color, size, visual location, orientation, or sound.

This quick lecture includes an example of a website that violates Success Criterion 1.3.3, which we discussed in the previous lecture.

This lecture discusses the importance of and provides examples for Success Criteria 1.3.4 Orientation, 1.3.5 Identify Input Purpose, and 1.3.6 Identify Purpose.

This lecture begins the discussion of Guideline 1.4 Distinguishable, which states that we should make it easier for users to see and hear content, including separating foreground from background. In this lecture, we focus on Success Criteria 1.4.1 (Use of Color) and 1.4.2 (Audio Control).

This lecture discusses the importance of and provides examples for Success Criteria 1.4.3 Contrast (Minimum), 1.4.4 Resize text, 1.4.5 Images of Text, 1.4.6 Contrast (Enhanced), 1.4.7 Low or No Background Audio, 1.4.8 Visual Presentation, and 1.4.9 Images of Text (No Exception).

This lecture discusses the importance of and provides examples for Success Criteria 1.4.10 Reflow, 1.4.11 Non-text Contrast, 1.4.12 Text Spacing, and 1.4.13 Content on Hover or Focus.

This lecture begins the discussion of Guideline 2.1 Keyboard Accessible, which states that all functionality must be available from a keyboard. In this lecture, we focus on Success Criteria 2.1.1 Keyboard and 2.1.2 No Keyboard Trap.

This lecture discusses the importance of Success Criteria 2.1.3 Keyboard (No Exception) and 2.1.4 Character Key Shortcuts.

This lecture begins the discussion of Guideline 2.2 Enough Time, which states that users should be provided with enough time to read and use content. In this lecture, we focus on and give examples of Success Criteria 2.2.1 Timing Adjustable; 2.2.2 Pause, Stop, Hide; 2.2.3 No Timing; and 2.2.4 Interruptions.

In this lecture, we focus on and give examples of Success Criteria 2.2.5 Re-authenticating and 2.2.6 Timeouts.

This lecture covers the discussion of Guideline 2.3, Seizures and Physical Reactions; which states that it's important not to design content in a way that is known to cause seizures or physical reactions. In this lecture, we focus on all Success Criteria under this Guideline, including 2.3.1 Three Flashes or Below Threshold; 2.3.2 Three Flashes; and 2.3.3 Animation from Interactions.

This quick lecture includes an example of a website that violates the Success Criteria under Guideline 2.3, Seizures and Physical Reactions; which states that content should not be designed in a way that is known to cause seizures or physical reactions.

This lecture begins the discussion of Guideline 2.4 Navigable, which states that it's important to provide ways to help users navigate, find content, and determine where they are. In this lecture, we focus on Success Criterion 2.4.1, Bypass Blocks.

In this lecture, we focus on and provide examples for Success Criteria 2.4.2 Page Titled and 2.4.3 Focus Order.

This lecture discusses the importance of and provides examples for Success Criterion 2.4.4, Link Purpose (In Context); which states that the purpose of each link should be able to be determined from the link text alone or from the link text together with its programmatically determined link context, except where the purpose of the link would be ambiguous to users in general.

This lecture discusses the importance of and provides examples for Success Criterion 2.4.5, Multiple Ways; which states that more than one way should be available to locate a Web page within a set of Web pages, except where the Web Page is the result of, or a step in, a process.

This lecture discusses the importance of and provides examples for Success Criterion 2.4.6, Headings and Labels; which states that headings and labels should describe topic or purpose.

In this lecture, we focus on and give examples of Success Criteria 2.4.7 Focus Visible, 2.4.8 Location, 2.4.9 Link Purpose (Link Only), and 2.4.10 Section Headings.

This lecture covers the discussion of Guideline 2.5, Input Modalities; which states that we should make it easier for users to operate functionality through various inputs beyond a keyboard. In this lecture, we focus on and give examples of all Success Criteria under this Guideline, including 2.5.1 Pointer Gestures; 2.5.2 Pointer Cancellation; 2.5.3 Label in Name; 2.5.4 Motion Actuation; 2.5.5 Target Size; and 2.5.6 Concurrent Input Mechanisms.

This lecture covers the discussion of Guideline 3.1, Readable; which states that text content should be readable and understandable. In this lecture, we focus on and give examples of all Success Criteria under this Guideline, including 3.1.1 Language of Page; 3.1.2 Language of Parts; 3.1.3 Unusual Words; 3.1.4 Abbreviations; 3.1.5 Reading Level; and 3.1.6 Pronunciation.

This lecture covers the discussion of Guideline 3.2, Predictable; which states that web pages should appear and operate in predictable ways. In this lecture, we focus on and give examples of all Success Criteria under this Guideline, including 3.2.1 On Focus; 3.2.2 On Input; 3.2.3 Consistent Navigation; 3.2.4 Consistent Identification; and 3.2.5 Change on Request.

This lecture covers the discussion of Guideline 3.3, Input Assistance; which states that it's important to help users avoid and correct mistakes.  In this lecture, we focus on and give examples of all Success Criteria under this Guideline, including 3.3.1 Error Identification; 3.3.2 Labels or Instructions; 3.3.3 Error Suggestion; 3.3.4 Error Prevention (Legal, Financial, Data); 3.3.5 Help; and 3.3.6 Error Prevention (All).

This lecture covers the discussion of Guideline 4.1, Compatible; which states that it's important to maximize compatibility with current and future user agents, including assistive technologies. In this lecture, we focus on and give examples of all Success Criteria under this Guideline, including 4.1.1 Parsing; 4.1.2 Name, Role, Value; and 4.1.3 Status Messages.

WCAG 2.2 was released on February 27, 2020. There is only one new Success Criterion in WCAG 2.2., which is 2.4.11, Focus Visible (Enhanced). Although it is currently a working draft, you should start implementing it in your live sites and incorporating it as a criterion when auditing sites.

Congratulations on completing the course and thank you so much for taking the initiative to learn about web accessibility! If you'd like to learn more and interact with me and other web accessibility developers and students, I highly encourage you to join my web accessibility Facebook group and/or Discord server. See you there!

Facebook Group:
https://www.facebook.com/groups/webaccessibilityeducation

Discord: https://discord.gg/H3tGnKnGka