Introduction-to-Testing-Accessibility

Accessibility-is...

Accessibility-for-Businesses

Accessibility-for-Society

What-is-Digital-Accessibility

Inaccessibility-is-Discrimination-in-Practice

The-Legal-Situation

Accessibility-as-a-Business-Case

Introducing-Terms

Browsers -Apps -and-Tools

Markup- -Code-Definitions

What-Makes-a-Website-Accessible

HTML-Headings

Inclusive- -Intuitive-Design

Landmarks

Semantic-Elements

VideoText-Alternatives

Forms

Accessibility-needs-all-of-us.

Interactivity-Goes-Beyond-the-Mouse

Workshop-Overview

WCAG-Overview

Inaccessible-Brand-Colors-Video

Icon-Buttons-without-Text-Labels-Video

Mobile-Accessibility-Issues-Video

Embedded-Content-with-Accessibility-Problems-Video

Accessibility-Overlay-Solutions

Workshop-Overview

Project-Overview

“Shifting-Left”-in-the-Software-Development-Lifecycle-Video

Disability-Impacts-All-of-Us-Video

Solution-Find-Accessibility-Issues-using-Keyboard-Only-Navigation

Test-User-Interfaces-with-People-with-Disabilities-Video

Lesson-Recap

Solution-Find-Low-Contrast-Ratio-Issues-using-Chrome-DevTools

Identifying-Accessibility-Bias-Video

Pattern-Libraries- -Style-Guides-Video

Notes-on-Interactivity-Video

Building-Blocks-of-Digital-Design-Systems-Video

Introduction-to-Design-Review

Affordances-in-Interaction-Design-Video

Find-Iconography-and-Label-Issues

Accessibility-Feedback-Loop

Find-Content-Layout-Issues-Video

Find-Color-Contrast-Issues-Video

Using-Animation- -Motion-Safely-Video

Prefers-Reduced-Motion-Video

WCAG-Criteria-Video

Identify-Accessibility-Issues-Related-to-Motion-Video

Add-Prefers-Reduced-Motion-to-an-SVG-Video

Add-Prefers-Reduced-Motion-to-a-Video

Review-of-Testing-ToolsProcesses

Using-WCAG-in-an-Organization

Finding-an-Answer-to-a-Problem-Demo-Video

Solution-Finding-an-Answer-to-a-Problem

Design-Ableism-Out-of-Systems

Creating-a-Culture-of-Accessibility-Video

Scoping-Accessibility-Issues-Video

Qualities-For-Creating-a-Culture-of-Accessibility

Prioritizing-Accessibility-Issues-Video

Qualify-and-Quantify-an-Accessibility-Issue-Video

Parting-Thoughts-Video

Encourage-a-More-Descriptive-Issue-Policy-Video

Find-Issues-by-Hitting-Tab

Investigating-Issues-by-Hitting-Tab

Fix-CSS-Outline

Change-MegaNav-divs-to-buttons

Update-MegaNav-Button-Styling

Hide-Submenus-with-CSS

More-Menu-CSS-Updates

Toggle-the-Active-Class-with-JavaScript

Escape-Key-Handling

Focus-Management-on-Menu-Close

Fixing-Button-Focus

Intro- -Setup

Fix-MegaNav-Contrast-Issues

Checking-Color-Contrast-in-Chrome-DevTools

Running-Lighthouse

Add-Image-Alt-Description- -Check-in-the-Accessibility-Tree

Scanning-the-Homepage-with-Axe-DevTools

Checking-Heading-Structure-with-the-Web-Developer-Toolbar

Fixing-the-Discernible-Button-Text-Issue

More-axe-Issue-Identification

Issue-Fixing

More-Changes

Heading-and-Landmark-Fixes

Checking-Work

Checking-in-Lighthouse-Again

Last-Lighthouse-Check

Heading-Order

Looking-at-WCAG-1.4.10-Reflow

Examining-Browser-Zoom-Behavior

Making-Changes-in-the-Browser

Fixing-the-Viewport-Meta-Tag

Update-Menu-Reflow- -Troubleshooting

Fix-the-3-Cards-Section

Fix-the-Header

Update-Layout-Styles

Checking-work

Check-it-out-on-mobile

Zoom-Wrap-Up

VoiceOver-Demo

Testing-VoiceOver-after-Improving-Form-Structure

VoiceOver-Navigation

An-Overview-of-Screen-Reader-Software

Testing-VoiceOver-after-Improving-MegaNav

Update-the-MegaNav-Structure-for-Better-VoiceOver-Experience

Update-CSS-for-MegaNav-and-Menu-Items

Update-Heading-Structure-in-the-MegaNav

Check-Work-in-Safari

Update-Form-Semantics

Check-Forms-with-VoiceOver

Workshop-Overview

Project-Overview

React-as-an-Abstraction

Application-Interface-Overview

Listings-Page-Overview

Component-Listing-Excerpt-Overview

Listing-Detail-Page-Overview

Date-Picker-Component-Overview

Adding-Headers-to-Build-Page-Structure

Add-Heading-Structure-to-Page-Listing-Detail

Analyze-Heading-Structure

Introducing-the-HeaderPortal-Component

Analyze-New-Page-Listing-Detail-Heading-Structure

Intro-to-Semantic-Landmarks-and-Axe-DevTools

Solution-Add-an-H1-with-React-Portal

Implement-Top-Level-Landmarks

Solution-Implement-Semantic-Landmarks-in-Page-Listing-Detail

Check-Current-Page-Accessibility-with-Voice-Over

Explore-More-Semantic-Landmark-Element-Options

About-the-React-Portal-Header-Solution

What-Is-ARIA-and-When-to-Use-It

Analyze-Date-Picker-and-Add-Implicit-ARIA-Roles

Solution-Add-Implicit-Roles-to-List-Items

Add-ARIA-States -Roles -and-Properties-to-the-Date-Picker

Test-Date-Picker-Accessibility-with-a-Screen-Reader

Analyze-the-Home-Page-Search-Feature-for-Accessible-Names

What-is-an-Accessible-Name

Fix-an-SVG-Icon-Accessibility-for-Voice-Over-in-Safari

Intro-to-Programmatic-Accessibility

Convert-the-Grid-of-divs-to-an-HTML-Table

Test-Our-Date-Picker-with-NVDA

Test-out-HTML-Table-Accessibility-in-Voice-over

Label-an-HTML-Table-with-aria-labelledby

What-is-the-Accessibility-Object-Model- AOM

Enable-AOM-in-Chrome-or-Firefox

Explore-AOM-Properties-vs.-HTML-Attributes-through-Attribute-Reflection

Implement-aria-current-in-the-MegaNav-as-an-Attribute

Check-aria-current-with-a-Screen-Reader-and-AOM-as-a-Promising-Technology

Implement-aria-current-functionality-with-AOM-as-a-Property

Examining-the-Dropdown- -Listings

Overview-and-Issue-Finding

An-Overview-of-the-ARIA-Authoring-Practices-Guide

The-Visually-hidden-Technique

An-Overview-of-the-Component-Sandbox

The-Opacity-Technique

The-Display-Technique

Debugging-Visibility-Techniques

The-Visibility-Technique

The-aria-hidden-Technique

Introducing-the-Skip-Links-Challenge

Implementing-the-SkipLinks-Component

Adding-the-SkipLinks-Component-to-the-Header

Updating-SkipLink-Component-Styling

Overview-of-Focus-Management

Roving-Tabindex- -Current-Date-Picker-Behavior

Focus-Management-in-the-Component-Sandbox

Arrow-Key-Challenge-Introduction

Current-DatePicker-Markup- -tabindex-Plan-of-Attack

Overriding-Browser-Scrolling-from-Up-and-Down-Arrows

Implementing- -Troubleshooting-Arrow-Key-Handling

Updating-the-Date-Picker-to-Track-tabindex

Using-Refs- -Writing-the-ArrowRight-Key-Handler

Wrapping-up-Focus-Management

Thoughts-on-Overriding-Default-Controls

Accessibility-Information- -Interactivity-Issues-in-Screen-Readers

VoiceOver-Navigation-with-Tab- -Arrow-Keys

Navigation-with-the-VoiceOver-Rotor

Navigating-with-NVDA

Checking-the-Date-Picker-with-NVDA

Intro-to-ARIA-Live-Regions

ARIA-Live-Region-Properties

ARIA-Live-Region-Roles

Preparing-to-add-a-Live-Region

Lesson-Introduction

Checking-Progress-in-the-Browser

Adding-State- -Writing-the-Submit-Handler

Form-Updates

Adding-onChange-Handlers-to-the-Inputs

Solution-Sending-Focus-to-the-First-Invalid-Field

Adding-aria-required-to-Required-Form-Fields

Checking-Form-Styling-in-the-Browser

Checking-work-in-NVDA- -Section-Wrap-Up

Checking-Focus-Management- -VoiceOver

Introduction-to-Advanced-Scripting

Slideshow-Overview

Solution-Part-1-Updating-Elements- -Adding-Keyboard-Supportb

Checking-our-work

VideoSemantic-Updates

Sortable-List-with-the-ARIA-Application-Role

Adding-a-Live-Region- -Focus-Management-to-the-Slideshow

Project-Overview

CampSpots-Project-Tour

Storybook-Story-Structure

Adding-a-DropdownList-Story-to-Storybook

An-Overview-of-Storybook

An-Overview-of-Unit-Testing

Jest-Configuration

Solution-Writing-a-Keyboard-Reachability-Test

Overview-of-the-Icon-Button

Writing-the-Keyboard-Reachable- -Operable-Test

Test-1-acts-as-one-tab-stop

Reading-the-Icon-Test

VideoTest-2-Enables-a-Custom-Field-Amount

Running-Cypress-Component-Testing

An-Overview-of-Cypress-Component-Testing

Reading-the-Keyboard-Operability-Test

Fixing-MegaNav-Markup-so-Tests-Pass

A-First-Pass-at-the-“Submenu-Should-Not-Be-Reachable”-Test

Fixing-a-Test-that-Passes-When-it-Shouldn t

Checking-Color-Contrast-with-cypress-axe

Testing-with-the-cypress-axe-Plugin

Integration-Testing-with-Cypress

Configuring- -Running-Cypress

Updating-Alt-Descriptions

Writing-a-Page-Level-Test-with-cypress-axe

Fixing-the-Button-Name-Issue

Updating-Landmarks

Implement-aria-current-Test

Write-a-Test-for-an-Accessible-Payment-Dialog

Analyzing-Test-Results

Implement-and-Pass-Dialog-Test

Preparing-the-Routing-Tests

Use-React-Helmet-to-Dynamically-Set-Page-Titles

Focus-Management-and-Inert-Attribute

Client-Side-Routing-Thoughts

Start-Page-Change-Test

Puppeteer-Overview

The-Accessibility-Tree-in-DevTools

An-Alternative-View-of-the-Accessibility-Tree

Writing-the-Accessibility-Tree-Snapshot-Test

Project-Overview

Examining-a-Snapshot

Updating-a-Snapshot

Viewing-CI-Issues-with-GitHub-Actions

Preparing-for-CI-with-GitHub-Actions

Push-Changes-to-Run-Tests-Again