English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 249 Lessons (16h 31m) | 2.38 GB
Comprehensive Accessibility Training for Shipping High-Quality Web Applications
A self-paced workshop designed to teach you the principles and effective patterns of accessibility, from design to deployment.
If your applications aren’t usable by people with disabilities, your job isn’t done.
It is your responsibility to deliver high-quality applications that work as expected for as many users as possible.
There is no magic wand that you can wave and create accessible applications.
There is no single tool that will make these challenges go away.
To build accessible applications, your team needs to make accessibility a priority.
Most importantly, your team needs to acquire an accessibility mindset shift.
The Accessibility
Mindset Shift
Ensuring your application is accessible requires a mindset shift— not just for you as a developer but also for your designers and the stakeholders in your organization.
Each of these areas brings its own set of challenges:
- How should I prioritize application features?
- What can I do to ensure my solutions work for people with disabilities?
- How do I get buy-in from my team?
- How do I approach working through accessibility issues that I don’t even know I have?
These questions typically require years of hard-won experience to answer and are even harder if you’re just getting started.
Work needs to be done on both the technical skills and people-skills parts of the business to deliver accessible features and functionality to your users.
Plan and Execute in Every
Area of Web Accessibility
Build Your Accessibility Foundation
- Learn the common vocabulary
- Understand the business case for accessibility
Develop an Organizational Culture of Accessibility
- Recognize potential issues before writing a line of code
- Enable focused cross-team collaboration
Identify Issues in Your Web Application
- Use industry-standard tools
- Empower non-developers to identify accessibility issues
Best Practices from the Start
- Develop complex interactions that fully support Assistive Technology
- Implement automated testing that prevents issues from being deployed
A Repeatable, Well-Defined Process for Accessibility Testing
Get accessibility buy-in from stakeholders and colleagues through effective manual and automated testing plans.
Identify the highest value user flows in your application.
Document “mouse only” and “keyboard only” instructions for completing the flow, supplemented with expected output from browser-based accessibility tools.
Write focused unit tests for every interactive control involved in a user flow to ensure they meet industry-standard accessibility guidelines.
Simulate a user working through the most important flow through integration testing.
Table of Contents
Foundations of Accessibility
1 Introduction-to-Testing-Accessibility
2 What-is-Digital-Accessibility
3 Accessibility-is…
4 Inaccessibility-is-Discrimination-in-Practice
5 Accessibility-for-Businesses
6 Accessibility-for-Society
7 Accessibility-as-a-Moral-Case
8 Accessibility-as-a-Business-Case
9 The-Legal-Situation
10 Introducing-Terms
11 Markup-_-Code-Definitions
12 Browsers_-Apps_-and-Tools
13 What-Makes-a-Website-Accessible
14 Inclusive-_-Intuitive-Design
15 HTML-Headings
16 Landmarks
17 Semantic-Elements
18 VideoText-Alternatives
19 Forms
20 Interactivity-Goes-Beyond-the-Mouse
21 Accessibility-needs-all-of-us.
Design Thinking & People Skills for Accessibility
Intro & Overview
22 Workshop-Overview
23 WCAG-Overview
24 Inaccessible-Brand-Colors-Video
25 Mobile-Accessibility-Issues-Video
26 Icon-Buttons-without-Text-Labels-Video
27 Embedded-Content-with-Accessibility-Problems-Video
28 Accessibility-Overlay-Solutions
Accessibility as User Experience
29 “Shifting-Left”-in-the-Software-Development-Lifecycle-Video
30 Disability-Impacts-All-of-Us-Video
31 Test-User-Interfaces-with-People-with-Disabilities-Video
32 Solution-Find-Accessibility-Issues-using-Keyboard-Only-Navigation
33 Solution-Find-Low-Contrast-Ratio-Issues-using-Chrome-DevTools
34 Lesson-Recap
35 Identifying-Accessibility-Bias-Video
Designs as Prototyping
36 Pattern-Libraries-_-Style-Guides-Video
37 Building-Blocks-of-Digital-Design-Systems-Video
38 Notes-on-Interactivity-Video
39 Affordances-in-Interaction-Design-Video
40 Introduction-to-Design-Review
41 Find-Color-Contrast-Issues-Video
42 Find-Iconography-and-Label-Issues
43 Find-Content-Layout-Issues-Video
44 Accessibility-Feedback-Loop
Using Animation & Motion Safely
45 Using-Animation-_-Motion-Safely-Video
46 Prefers-Reduced-Motion-Video
47 WCAG-Criteria-Video
48 Identify-Accessibility-Issues-Related-to-Motion-Video
49 Add-Prefers-Reduced-Motion-to-a-Video
50 Add-Prefers-Reduced-Motion-to-an-SVG-Video
Finding Answers to Accessibility Issues
51 Review-of-Testing-ToolsProcesses
52 Using-WCAG-in-an-Organization
53 Finding-an-Answer-to-a-Problem-Demo-Video
54 Solution-Finding-an-Answer-to-a-Problem
Establish a Culture of Accessibility
55 Creating-a-Culture-of-Accessibility-Video
56 Design-Ableism-Out-of-Systems
57 Qualities-For-Creating-a-Culture-of-Accessibility
58 Scoping-Accessibility-Issues-Video
59 Prioritizing-Accessibility-Issues-Video
60 Qualify-and-Quantify-an-Accessibility-Issue-Video
61 Encourage-a-More-Descriptive-Issue-Policy-Video
62 Parting-Thoughts-Video
Manual Accessibility Testing
Intro
63 Intro-_-Setup
Keyboard Testing
64 Find-Issues-by-Hitting-Tab
65 Investigating-Issues-by-Hitting-Tab
66 Fix-CSS-Outline
67 Change-MegaNav-divs-to-buttons
68 Update-MegaNav-Button-Styling
69 Hide-Submenus-with-CSS
70 More-Menu-CSS-Updates
71 Toggle-the-Active-Class-with-JavaScript
72 Escape-Key-Handling
73 Focus-Management-on-Menu-Close
74 Fixing-Button-Focus
Testing with Tools & Browser Extensions
75 Checking-Color-Contrast-in-Chrome-DevTools
76 Fix-MegaNav-Contrast-Issues
77 Add-Image-Alt-Description-_-Check-in-the-Accessibility-Tree
78 Running-Lighthouse
79 Scanning-the-Homepage-with-Axe-DevTools
80 Checking-Heading-Structure-with-the-Web-Developer-Toolbar
81 Fixing-the-Discernible-Button-Text-Issue
82 More-axe-Issue-Identification
83 Issue-Fixing
84 More-Changes
85 Heading-and-Landmark-Fixes
86 Checking-Work
87 Checking-in-Lighthouse-Again
88 Heading-Order
89 Last-Lighthouse-Check
Magnification and Zoom Testing
90 Examining-Browser-Zoom-Behavior
91 Looking-at-WCAG-1.4.10-Reflow
92 Making-Changes-in-the-Browser
93 Fixing-the-Viewport-Meta-Tag
94 Update-Menu-Reflow-_-Troubleshooting
95 Update-Layout-Styles
96 Fix-the-3-Cards-Section
97 Fix-the-Header
98 Check-it-out-on-mobile
99 Checking-work
100 Zoom-Wrap-Up
Screen Reader Testing
101 An-Overview-of-Screen-Reader-Software
102 VoiceOver-Demo
103 VoiceOver-Navigation
104 Testing-VoiceOver-after-Improving-MegaNav
105 Testing-VoiceOver-after-Improving-Form-Structure
106 Update-the-MegaNav-Structure-for-Better-VoiceOver-Experience
107 Update-CSS-for-MegaNav-and-Menu-Items
108 Update-Heading-Structure-in-the-MegaNav
109 Check-Work-in-Safari
110 Update-Form-Semantics
111 Check-Forms-with-VoiceOver
Semantic Markup with HTML and ARIA
Introduction & Overview
112 Workshop-Overview
113 Project-Overview
114 Application-Interface-Overview
115 React-as-an-Abstraction
116 Listings-Page-Overview
117 Component-Listing-Excerpt-Overview
118 Listing-Detail-Page-Overview
119 Date-Picker-Component-Overview
Build Page Structure Through Headings and Semantic Landmark Elements
120 Analyze-Heading-Structure
121 Add-Heading-Structure-to-Page-Listing-Detail
122 Adding-Headers-to-Build-Page-Structure
123 Analyze-New-Page-Listing-Detail-Heading-Structure
124 Introducing-the-HeaderPortal-Component
125 Solution-Add-an-H1-with-React-Portal
126 Intro-to-Semantic-Landmarks-and-Axe-DevTools
127 Implement-Top-Level-Landmarks
128 Solution-Implement-Semantic-Landmarks-in-Page-Listing-Detail
129 Check-Current-Page-Accessibility-with-Voice-Over
130 Explore-More-Semantic-Landmark-Element-Options
131 About-the-React-Portal-Header-Solution
Add Accessibility Information through ARIA
132 What-Is-ARIA-and-When-to-Use-It
133 Analyze-Date-Picker-and-Add-Implicit-ARIA-Roles
134 Add-ARIA-States_-Roles_-and-Properties-to-the-Date-Picker
135 Solution-Add-Implicit-Roles-to-List-Items
136 Test-Date-Picker-Accessibility-with-a-Screen-Reader
Craft Accessible Names to Expose the Purpose of Elements on a Page
137 What-is-an-Accessible-Name
138 Analyze-the-Home-Page-Search-Feature-for-Accessible-Names
139 Fix-an-SVG-Icon-Accessibility-for-Voice-Over-in-Safari
Programmatic Accessibility Information with ARIA
140 Intro-to-Programmatic-Accessibility
141 Convert-the-Grid-of-divs-to-an-HTML-Table
142 Label-an-HTML-Table-with-aria-labelledby
143 Test-out-HTML-Table-Accessibility-in-Voice-over
144 Test-Our-Date-Picker-with-NVDA
Accessibility Object Model (AOM)
145 What-is-the-Accessibility-Object-Model-_AOM_
146 Enable-AOM-in-Chrome-or-Firefox
147 Explore-AOM-Properties-vs.-HTML-Attributes-through-Attribute-Reflection
148 Implement-aria-current-functionality-with-AOM-as-a-Property
149 Implement-aria-current-in-the-MegaNav-as-an-Attribute
150 Check-aria-current-with-a-Screen-Reader-and-AOM-as-a-Promising-Technology
Coding Accessible Interactions and Mechanics
Intro & Overview
151 Workshop-Overview
152 Project-Overview
The Keyboard
153 Overview-and-Issue-Finding
154 Examining-the-Dropdown-_-Listings
155 An-Overview-of-the-ARIA-Authoring-Practices-Guide
156 An-Overview-of-the-Component-Sandbox
157 The-Visually-hidden-Technique
158 The-Opacity-Technique
159 The-Display-Technique
160 The-Visibility-Technique
161 The-aria-hidden-Technique
162 Debugging-Visibility-Techniques
163 Introducing-the-Skip-Links-Challenge
164 Implementing-the-SkipLinks-Component
165 Adding-the-SkipLinks-Component-to-the-Header
166 Updating-SkipLink-Component-Styling
Focus Management
167 Overview-of-Focus-Management
168 Focus-Management-in-the-Component-Sandbox
169 Roving-Tabindex-_-Current-Date-Picker-Behavior
170 Current-DatePicker-Markup-_-tabindex-Plan-of-Attack
171 Updating-the-Date-Picker-to-Track-tabindex
172 Arrow-Key-Challenge-Introduction
173 Using-Refs-_-Writing-the-ArrowRight-Key-Handler
174 Implementing-_-Troubleshooting-Arrow-Key-Handling
175 Overriding-Browser-Scrolling-from-Up-and-Down-Arrows
176 Thoughts-on-Overriding-Default-Controls
177 Wrapping-up-Focus-Management
Check Your Work with Screen Readers
178 Accessibility-Information-_-Interactivity-Issues-in-Screen-Readers
179 VoiceOver-Navigation-with-Tab-_-Arrow-Keys
180 Navigation-with-the-VoiceOver-Rotor
181 Navigating-with-NVDA
182 Checking-the-Date-Picker-with-NVDA
Announcements with Assistive Technology
183 Intro-to-ARIA-Live-Regions
184 ARIA-Live-Region-Roles
185 ARIA-Live-Region-Properties
186 Lesson-Introduction
187 Preparing-to-add-a-Live-Region
188 Adding-State-_-Writing-the-Submit-Handler
189 Checking-Progress-in-the-Browser
190 Adding-onChange-Handlers-to-the-Inputs
191 Form-Updates
192 Checking-Form-Styling-in-the-Browser
193 Solution-Sending-Focus-to-the-First-Invalid-Field
194 Checking-Focus-Management-_-VoiceOver
195 Adding-aria-required-to-Required-Form-Fields
196 Checking-work-in-NVDA-_-Section-Wrap-Up
Advanced Scripting with ARIA
197 Introduction-to-Advanced-Scripting
198 Sortable-List-with-the-ARIA-Application-Role
199 Slideshow-Overview
200 Solution-Part-1-Updating-Elements-_-Adding-Keyboard-Supportb
201 Adding-a-Live-Region-_-Focus-Management-to-the-Slideshow
202 VideoSemantic-Updates
203 Checking-our-work
Automated Accessibility Testing
Intro & Setup
204 Project-Overview
205 CampSpots-Project-Tour
Isolate Components with Storybook
206 An-Overview-of-Storybook
207 Storybook-Story-Structure
208 Adding-a-DropdownList-Story-to-Storybook
Unit Testing with Jest and Testing Library
209 An-Overview-of-Unit-Testing
210 Jest-Configuration
211 Reading-the-Icon-Test
212 Overview-of-the-Icon-Button
213 Writing-the-Keyboard-Reachable-_-Operable-Test
214 Solution-Writing-a-Keyboard-Reachability-Test
215 Test-1-acts-as-one-tab-stop
216 VideoTest-2-Enables-a-Custom-Field-Amount
Test Components with Cypress Component Testing
217 An-Overview-of-Cypress-Component-Testing
218 Running-Cypress-Component-Testing
219 Reading-the-Keyboard-Operability-Test
220 Fixing-MegaNav-Markup-so-Tests-Pass
221 A-First-Pass-at-the-“Submenu-Should-Not-Be-Reachable”-Test
222 Fixing-a-Test-that-Passes-When-it-Shouldn_t
223 Testing-with-the-cypress-axe-Plugin
224 Checking-Color-Contrast-with-cypress-axe
Integration Testing with Cypress
225 Integration-Testing-with-Cypress
226 Configuring-_-Running-Cypress
227 Writing-a-Page-Level-Test-with-cypress-axe
228 Updating-Alt-Descriptions
229 Updating-Landmarks
230 Fixing-the-Button-Name-Issue
231 Implement-aria-current-Test
232 Write-a-Test-for-an-Accessible-Payment-Dialog
233 Analyzing-Test-Results
234 Implement-and-Pass-Dialog-Test
235 Focus-Management-and-Inert-Attribute
236 Preparing-the-Routing-Tests
237 Use-React-Helmet-to-Dynamically-Set-Page-Titles
238 Client-Side-Routing-Thoughts
239 Start-Page-Change-Test
Functional Accessibility Testing with Jest-Puppeteer
240 Puppeteer-Overview
241 The-Accessibility-Tree-in-DevTools
242 An-Alternative-View-of-the-Accessibility-Tree
243 Project-Overview
244 Writing-the-Accessibility-Tree-Snapshot-Test
245 Examining-a-Snapshot
246 Updating-a-Snapshot
Continuous Integration (CI) with GitHub Actions
247 Preparing-for-CI-with-GitHub-Actions
248 Viewing-CI-Issues-with-GitHub-Actions
249 Push-Changes-to-Run-Tests-Again
Resolve the captcha to access the links!