Build & Test Accessible Web Apps | Testing Accessibility (PRO)

16h 30m 59s
English
Paid

Comprehensive Training on Accessibility for Creating Quality Web Applications

A self-paced course designed to teach principles and effective accessibility patterns—from design to implementation. Ensure your applications are user-friendly for people with disabilities and deliver high-quality solutions accessible to as many users as possible.

Importance of Accessibility

Ensuring accessibility requires changes not just from developers but also from designers and all stakeholders. Each area has its unique tasks to handle:

  • Prioritizing application features effectively.
  • Adapting solutions for people with disabilities.
  • Gaining team support.
  • Identifying and solving unknown accessibility issues.

Developing both technical and people skills is essential to provide users with truly accessible features.

Plan and Implement Accessibility Effectively

Build Accessibility Foundations

  • Understand key terms and concepts.
  • Recognize the business benefits of accessibility.

Foster an Organizational Culture of Accessibility

  • Identify potential issues before development begins.
  • Facilitate smooth interactions between teams.

Identify Issues in Web Applications

  • Utilize industry-validated tools.
  • Enable non-technical staff to recognize accessibility issues.

Adopt Best Practices from the Start

  • Design complex interactions with consideration for assistive technologies.
  • Implement automated testing to prevent accessibility issues.

Testing Process for Accessibility

Develop a clearly defined accessibility testing process that includes support from stakeholders and colleagues through both manual and automated testing plans.

  • Identify significant user flows in your application.
  • Document instructions for "mouse-only" and "keyboard-only" user flow execution and use browser-embedded accessibility tools.
  • Write targeted unit tests for each interactive element in line with industry standards.
  • Simulate user engagement through integration tests.

Advance Your Skills in Accessibility

Build confidence in your ability to showcase, describe, and develop accessible solutions. Accessibility is a key opportunity for both user inclusivity and career growth.

Enhance Your Team's Approach to Accessibility

Equip your team with design review templates, user testing procedures, and comprehensive accessibility tools to create inclusive web applications. The Testing Accessibility course aims to empower you and your team with invaluable experience and knowledge.

Steps to Professionalism in Accessibility

1. Understanding Accessibility Basics

Learn the components and standards of web accessibility to recognize issues from the design stage.

2. Testing Existing Applications

Master professional tools for writing practical unit and integration tests for accessibility assurance.

3. Develop with Accessibility in Mind

Use semantic elements, ARIA, and CSS hiding techniques appropriately to programmatically convey accessibility information.

Integrating Accessibility at the Design Stage

Ensure design processes account for accessibility by evaluating visual layouts for potential issues and providing comprehensive feedback.

Remove Barriers to Access

Accessibility extends beyond coding—it involves removing barriers to access. Develop knowledge to create accessible and intuitive interactions for keyboard and screen reader users.

Create a Robust Accessibility Testing Workflow

Develop a testing process that identifies and rectifies issues swiftly, understanding industry-standard tools for comprehensive audits.

Testing Accessibility Course Overview

This comprehensive course provides essential skills for accessibility, from visual design through mandatory pre-deployment testing, across six focused workshops.

Workshops in the Testing Accessibility Course Include:

Accessibility Basics

An introduction setting the foundation for accessibility motivation, components, and business case discussions.

Design Thinking and Interaction Skills

Build an accessibility culture by identifying early design issues and promoting alternative approaches.

Manual Accessibility Testing

Learn hands-on techniques for keyboard testing, DevTools, browser extensions, and more.

Semantic Markup with HTML and ARIA

Explore accessibility practices for implementing accessible components in applications, with React insights.

Programming Accessible Interactions

Enhance interactive component accessibility for keyboard and screen reader users through practical exercises.

Automated Accessibility Testing

Configure reliable automated tests for team-specific needs using popular frameworks like Jest and Cypress.

Enhance your expertise by participating in practical tasks that consolidate learning throughout the course. By completion, you'll possess a stronger understanding of creating accessible web applications, ready for real-world implementation.

About the Author: Marcy Sutton

Marcy Sutton thumbnail

Marcy Sutton Todd is a senior engineer focused on frontend infrastructure at Khan Academy, where she works on designing systems and ensuring accessibility. Before joining Khan Academy, Marcy was an independent web developer and trainer known for launching the online workshop series Testing Accessibility in collaboration with Egghead.io. She also contributed to the development of accessibility testing tools like axe-core, worked with JavaScript frameworks, and created numerous websites and web applications with a focus on accessibility and user-friendliness. For her contributions to accessibility and improving user experience, Marcy was awarded the Web Platform Award from O’Reilly in 2016. Outside of work, Marcy enjoys walking in the woods with her family, cycling, weightlifting, and cooking delicious food.

Watch Online 249 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 249 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 1.1.1. Introduction to Testing Accessibility
All Course Lessons (249)
#Lesson TitleDurationAccess
1
1.1.1. Introduction to Testing Accessibility Demo
02:32
2
1.1.2.1. What is Digital Accessibility
01:26
3
1.1.2.2. Accessibility is...
03:14
4
1.1.2.3. Inaccessibility is Discrimination in Practice
01:16
5
1.1.2.4. Accessibility for Businesses
03:23
6
1.1.2.5. Accessibility for Society
01:55
7
1.1.3.1. Accessibility as a Moral Case
01:44
8
1.1.3.2. Accessibility as a Business Case
01:14
9
1.1.3.3. The Legal Situation
04:03
10
1.1.4.1. Introducing Terms
00:54
11
1.1.4.2. Markup & Code Definitions
07:35
12
1.1.4.3. Browsers, Apps, and Tools
13:52
13
1.1.5.1. What Makes a Website Accessible
00:50
14
1.1.5.2. Inclusive & Intuitive Design
06:41
15
1.1.5.3. HTML Headings
03:52
16
1.1.5.4. Landmarks
01:51
17
1.1.5.5. Semantic Elements
03:48
18
1.1.5.6. VideoText Alternatives
04:03
19
1.1.5.7. Forms
07:04
20
1.1.5.8. Interactivity Goes Beyond the Mouse
04:38
21
1.1.6. Accessibility needs all of us.
01:16
22
2.1.1.1. Workshop Overview
02:32
23
2.1.1.2. WCAG Overview
03:00
24
2.2.1.1. Inaccessible Brand Colors Video
02:34
25
2.2.1.2. Mobile Accessibility Issues Video
00:40
26
2.2.1.3. Icon Buttons without Text Labels Video
01:13
27
2.2.1.4. Embedded Content with Accessibility Problems Video
02:06
28
2.2.1.5. Accessibility Overlay Solutions
04:59
29
2.2.2.1. “Shifting Left” in the Software Development Lifecycle Video
03:19
30
2.2.2.2. Disability Impacts All of Us Video
01:40
31
2.2.2.3. Test User Interfaces with People with Disabilities Video
02:40
32
2.2.3.1. Solution Find Accessibility Issues using Keyboard-Only Navigation
05:20
33
2.2.3.2. Solution Find Low Contrast Ratio Issues using Chrome DevTools
05:04
34
2.2.3.3. Lesson Recap
01:48
35
2.2.4. Identifying Accessibility Bias Video
04:25
36
2.3.1.1. Pattern Libraries & Style Guides Video
07:24
37
2.3.1.2. Building Blocks of Digital Design Systems Video
03:57
38
2.3.2.1. Notes on Interactivity Video
05:02
39
2.3.2.2. Affordances in Interaction Design Video
03:05
40
2.3.3.1. Introduction to Design Review
02:45
41
2.3.3.2. Find Color Contrast Issues Video
03:11
42
2.3.3.3. Find Iconography and Label Issues
03:55
43
2.3.3.4. Find Content Layout Issues Video
03:36
44
2.3.4. Accessibility Feedback Loop
01:44
45
2.4.1. Using Animation & Motion Safely Video
02:56
46
2.4.2. Prefers Reduced Motion Video
03:37
47
2.4.3. WCAG Criteria Video
03:25
48
2.4.4.1. Identify Accessibility Issues Related to Motion Video
04:01
49
2.4.4.2. Add Prefers Reduced Motion to a Video
05:29
50
2.4.4.3. Add Prefers Reduced Motion to an SVG Video
06:33
51
2.5.1. Review of Testing ToolsProcesses
03:39
52
2.5.2. Using WCAG in an Organization
03:44
53
2.5.3.1. Finding an Answer to a Problem Demo Video
05:46
54
2.5.3.2. Solution Finding an Answer to a Problem
08:49
55
2.6.1.1. Creating a Culture of Accessibility Video
04:40
56
2.6.1.2. Design Ableism Out of Systems
06:40
57
2.6.1.3. Qualities For Creating a Culture of Accessibility
06:53
58
2.6.2.1. Scoping Accessibility Issues Video
05:03
59
2.6.2.2. Prioritizing Accessibility Issues Video
06:55
60
2.6.3.1. Qualify and Quantify an Accessibility Issue Video
07:23
61
2.6.3.2. Encourage a More Descriptive Issue Policy Video
04:36
62
2.6.4. Parting Thoughts Video
01:17
63
3.1.1. Intro & Setup
08:09
64
3.2.1.1. Find Issues by Hitting Tab
02:28
65
3.2.1.2. Investigating Issues by Hitting Tab
06:02
66
3.2.2.1. Fix CSS Outline
04:21
67
3.2.2.2. Change MegaNav divs to buttons
03:49
68
3.2.2.3. Update MegaNav Button Styling
02:17
69
3.2.2.4. Hide Submenus with CSS
02:25
70
3.2.2.5. More Menu CSS Updates
06:03
71
3.2.3.1. Toggle the Active Class with JavaScript
05:18
72
3.2.3.2. Escape Key Handling
06:34
73
3.2.3.3. Focus Management on Menu Close
02:32
74
3.2.4. Fixing Button Focus
03:24
75
3.3.1.1. Checking Color Contrast in Chrome DevTools
06:13
76
3.3.1.2. Fix MegaNav Contrast Issues
02:46
77
3.3.2. Add Image Alt Description & Check in the Accessibility Tree
01:28
78
3.3.3.1. Running Lighthouse
02:45
79
3.3.3.2. Scanning the Homepage with Axe DevTools
07:07
80
3.3.4. Checking Heading Structure with the Web Developer Toolbar
01:34
81
3.3.5.1. Fixing the Discernible Button Text Issue
01:21
82
3.3.5.2. More axe Issue Identification
03:05
83
3.3.5.3. Issue Fixing
05:11
84
3.3.6.1. More Changes
02:27
85
3.3.6.2. Heading and Landmark Fixes
03:07
86
3.3.6.3. Checking Work
01:53
87
3.3.6.4. Checking in Lighthouse Again
01:00
88
3.3.6.5. Heading Order
05:31
89
3.3.6.6. Last Lighthouse Check
01:07
90
3.4.1.1. Examining Browser Zoom Behavior
03:30
91
3.4.1.2. Looking at WCAG 1.4.10 - Reflow
01:29
92
3.4.2.1. Making Changes in the Browser
04:04
93
3.4.2.2. Fixing the Viewport Meta Tag
01:41
94
3.4.3.1. Update Menu Reflow & Troubleshooting
01:51
95
3.4.3.2. Update Layout Styles
05:09
96
3.4.3.3. Fix the 3 Cards Section
03:33
97
3.4.3.4. Fix the Header
03:16
98
3.4.3.5. Check it out on mobile
02:08
99
3.4.3.6. Checking work
02:04
100
3.4.3.7. Zoom Wrap-Up
01:24
101
3.5.1. An Overview of Screen Reader Software
08:02
102
3.5.2.1. VoiceOver Demo
05:17
103
3.5.2.2. VoiceOver Navigation
05:54
104
3.5.2.3. Testing VoiceOver after Improving MegaNav
04:13
105
3.5.2.4. Testing VoiceOver after Improving Form Structure
01:36
106
3.5.3.1. Update the MegaNav Structure for Better VoiceOver Experience
10:13
107
3.5.3.2. Update CSS for MegaNav and Menu Items
03:56
108
3.5.3.3. Update Heading Structure in the MegaNav
02:16
109
3.5.3.4. Check Work in Safari
04:13
110
3.5.3.5. Update Form Semantics
02:39
111
3.5.3.6. Check Forms with VoiceOver
01:36
112
4.1.1. Workshop Overview
01:36
113
4.1.2. Project Overview
00:56
114
4.1.3. Application Interface Overview
01:41
115
4.1.4. React as an Abstraction
01:49
116
4.1.5. Listings Page Overview
02:33
117
4.1.6. Component Listing Excerpt Overview
01:05
118
4.1.7. Listing Detail Page Overview
02:08
119
4.1.8. Date Picker Component Overview
01:27
120
4.2.1. Analyze Heading Structure
04:07
121
4.2.2.1. Add Heading Structure to Page Listing Detail
02:10
122
4.2.2.2. Adding Headers to Build Page Structure
01:01
123
4.2.2.3. Analyze New Page Listing Detail Heading Structure
01:30
124
4.2.3.1. Introducing the HeaderPortal Component
02:12
125
4.2.3.2. Solution Add an H1 with React Portal
03:27
126
4.2.4.1. Intro to Semantic Landmarks and Axe DevTools
04:07
127
4.2.4.2. Implement Top Level Landmarks
06:45
128
4.2.5. Solution Implement Semantic Landmarks in Page Listing Detail
05:34
129
4.2.6. Check Current Page Accessibility with Voice Over
05:29
130
4.2.7. Explore More Semantic Landmark Element Options
03:27
131
4.2.8. About the React Portal Header Solution
03:53
132
4.3.1. What Is ARIA and When to Use It
07:05
133
4.3.2. Analyze Date Picker and Add Implicit ARIA Roles
04:07
134
4.3.3.1. Add ARIA States, Roles, and Properties to the Date Picker
08:40
135
4.3.3.2. Solution Add Implicit Roles to List Items
02:08
136
4.3.4. Test Date Picker Accessibility with a Screen Reader
07:28
137
4.4.1. What is an Accessible Name
05:16
138
4.4.2.1. Analyze the Home Page Search Feature for Accessible Names
04:56
139
4.4.2.2. Fix an SVG Icon Accessibility for Voice Over in Safari
05:51
140
4.5.1.1. Intro to Programmatic Accessibility
03:21
141
4.5.1.2. Convert the Grid of divs to an HTML Table
08:13
142
4.5.1.3. Label an HTML Table with aria-labelledby
01:57
143
4.5.2.1. Test out HTML Table Accessibility in Voice over
08:27
144
4.5.2.2. Test Our Date Picker with NVDA
06:16
145
4.6.1.1. What is the Accessibility Object Model (AOM)
04:56
146
4.6.1.2. Enable AOM in Chrome or Firefox
01:00
147
4.6.1.3. Explore AOM Properties vs. HTML Attributes through Attribute Reflection
05:15
148
4.6.2. Implement aria-current functionality with AOM as a Property
09:53
149
4.6.3. Implement aria-current in the MegaNav as an Attribute
07:12
150
4.6.4. Check aria-current with a Screen Reader and AOM as a Promising Technology
08:41
151
5.1.1.1. Workshop Overview
01:46
152
5.1.1.2. Project Overview
05:09
153
5.2.1.1. Overview and Issue Finding
03:07
154
5.2.1.2. Examining the Dropdown & Listings
02:47
155
5.2.2. An Overview of the ARIA Authoring Practices Guide
01:27
156
5.2.3.1. An Overview of the Component Sandbox
03:11
157
5.2.3.2. The Visually-hidden Technique
02:28
158
5.2.3.3. The Opacity Technique
01:27
159
5.2.3.4. The Display Technique
01:19
160
5.2.3.5. The Visibility Technique
01:05
161
5.2.3.6. The aria-hidden Technique
03:09
162
5.2.3.7. Debugging Visibility Techniques
02:04
163
5.2.4.1. Introducing the Skip Links Challenge
03:54
164
5.2.4.2. Implementing the SkipLinks Component
01:47
165
5.2.4.3. Adding the SkipLinks Component to the Header
01:59
166
5.2.4.4. Updating SkipLink Component Styling
03:43
167
5.3.1.1. Overview of Focus Management
01:20
168
5.3.1.2. Focus Management in the Component Sandbox
06:52
169
5.3.2.1. Roving Tabindex & Current Date Picker Behavior
01:50
170
5.3.2.2. Current DatePicker Markup & tabindex Plan of Attack
03:43
171
5.3.3.1. Updating the Date Picker to Track tabindex
04:12
172
5.3.3.2. Arrow Key Challenge Introduction
04:03
173
5.3.3.3. Using Refs & Writing the ArrowRight Key Handler
07:52
174
5.3.3.4. Implementing & Troubleshooting Arrow Key Handling
07:50
175
5.3.3.5. Overriding Browser Scrolling from Up and Down Arrows
04:56
176
5.3.4.1. Thoughts on Overriding Default Controls
02:20
177
5.3.4.2. Wrapping up Focus Management
02:31
178
5.4.1. Accessibility Information & Interactivity Issues in Screen Readers
05:32
179
5.4.2.1. VoiceOver Navigation with Tab & Arrow Keys
06:19
180
5.4.2.2. Navigation with the VoiceOver Rotor
03:15
181
5.4.3.1. Navigating with NVDA
04:51
182
5.4.3.2. Checking the Date Picker with NVDA
08:37
183
5.5.1.1. Intro to ARIA Live Regions
01:27
184
5.5.1.2. ARIA Live Region Roles
05:42
185
5.5.1.3. ARIA Live Region Properties
05:38
186
5.5.2.1. Lesson Introduction
02:00
187
5.5.2.2. Preparing to add a Live Region
06:55
188
5.5.2.3. Adding State & Writing the Submit Handler
03:13
189
5.5.2.4. Checking Progress in the Browser
03:31
190
5.5.2.5. Adding onChange Handlers to the Inputs
03:32
191
5.5.2.6. Form Updates
03:23
192
5.5.2.7. Checking Form Styling in the Browser
03:30
193
5.5.2.8. Solution Sending Focus to the First Invalid Field
06:47
194
5.5.2.9. Checking Focus Management & VoiceOver
04:00
195
5.5.2.10. Adding aria-required to Required Form Fields
03:49
196
5.5.2.11. Checking work in NVDA & Section Wrap-Up
03:58
197
5.6.1. Introduction to Advanced Scripting
02:30
198
5.6.2. Sortable List with the ARIA Application Role
02:55
199
5.6.3. Slideshow Overview
02:04
200
5.6.4. Solution Part 1 Updating Elements & Adding Keyboard Supportb
07:52
201
5.6.5. Adding a Live Region & Focus Management to the Slideshow
05:37
202
5.6.6.1. VideoSemantic Updates
03:44
203
5.6.6.2. Checking our work
02:00
204
6.1.1.1. Project Overview
02:45
205
6.1.1.2. CampSpots Project Tour
06:48
206
6.2.1. An Overview of Storybook
07:48
207
6.2.2.1. Storybook Story Structure
09:48
208
6.2.2.2. Adding a DropdownList Story to Storybook
05:03
209
6.3.1.1. An Overview of Unit Testing
05:15
210
6.3.1.2. Jest Configuration
02:47
211
6.3.2.1. Reading the Icon Test
10:12
212
6.3.2.2. Overview of the Icon Button
02:40
213
6.3.2.3. Writing the Keyboard Reachable & Operable Test
09:27
214
6.3.2.4. Solution Writing a Keyboard Reachability Test
03:12
215
6.3.3.1. Test 1 acts as one tab stop
05:59
216
6.3.3.2. VideoTest 2 Enables a Custom Field Amount
06:51
217
6.4.1.1. An Overview of Cypress Component Testing
05:15
218
6.4.1.2. Running Cypress Component Testing
02:29
219
6.4.2.1. Reading the Keyboard Operability Test
04:53
220
6.4.2.2. Fixing MegaNav Markup so Tests Pass
04:06
221
6.4.3.1. A First Pass at the “Submenu Should Not Be Reachable” Test
04:06
222
6.4.3.2. Fixing a Test that Passes When it Shouldn't
02:38
223
6.4.4.1. Testing with the cypress-axe Plugin
01:12
224
6.4.4.2. Checking Color Contrast with cypress-axe
01:44
225
6.5.1.1. Integration Testing with Cypress
02:57
226
6.5.1.2. Configuring & Running Cypress
07:42
227
6.5.2.1. Writing a Page-Level Test with cypress-axe
09:25
228
6.5.2.2. Updating Alt Descriptions
02:43
229
6.5.2.3. Updating Landmarks
05:29
230
6.5.2.4. Fixing the Button Name Issue
02:47
231
6.5.3. Implement aria-current Test
07:06
232
6.5.4.1. Write a Test for an Accessible Payment Dialog
05:34
233
6.5.4.2. Analyzing Test Results
02:03
234
6.5.4.3. Implement and Pass Dialog Test
05:23
235
6.5.4.4. Focus Management and Inert Attribute
02:46
236
6.5.5.1. Preparing the Routing Tests
01:56
237
6.5.5.2. Use React Helmet to Dynamically Set Page Titles
01:24
238
6.5.5.3. Client-Side Routing Thoughts
05:38
239
6.5.5.4. Start Page Change Test
03:20
240
6.6.1.1. Puppeteer Overview
01:36
241
6.6.1.2. The Accessibility Tree in DevTools
01:52
242
6.6.1.3. An Alternative View of the Accessibility Tree
02:41
243
6.6.2.1. Project Overview
01:11
244
6.6.2.2. Writing the Accessibility Tree Snapshot Test
03:23
245
6.6.2.3. Examining a Snapshot
01:52
246
6.6.2.4. Updating a Snapshot
01:17
247
6.7.1.1. Preparing for CI with GitHub Actions
02:08
248
6.7.1.2. Viewing CI Issues with GitHub Actions
03:37
249
6.7.1.3. Push Changes to Run Tests Again
07:23
Unlock unlimited learning

Get instant access to all 248 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription