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

16h 30m 59s
English
Paid

Course description

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.

If your applications are not user-friendly for people with disabilities, the work is not complete.

Your responsibility is to deliver high-quality applications that meet expectations and are accessible to as many users as possible.

There is no magic wand that will automatically make an application accessible, and there is no single tool that will solve all problems.

To create accessible applications, your team must prioritize accessibility. But most importantly, it is essential to change the approach to accessibility by embracing it as part of the mindset.

Read more about the course

Changing Approach to Accessibility

Ensuring accessibility requires changes not only from developers but also from designers and all stakeholders in your organization.

Each of these areas has its tasks:

  • How to prioritize the features of an application correctly?
  • What can be done to make my solutions suitable for people with disabilities?
  • How to gain support from the team?
  • How to solve accessibility issues that I am not even aware of?

Answers to these questions often require years of experience and become particularly challenging for newcomers.

To provide users with accessible features, it is necessary to develop both technical skills and people skills.

Planning and Implementing Accessibility in All Aspects of Web Accessibility

Build Accessibility Foundations

  • Learn general terms and concepts
  • Understand 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

  • Use industry-validated tools
  • Enable non-technical staff to identify accessibility issues

Best Practices from the Start

  • Design complex interactions with full consideration of assistive technologies
  • Implement automated testing to prevent the release of applications with accessibility issues

A Repeatable and Clearly Defined Accessibility Testing Process

Gain support for accessibility from stakeholders and colleagues through effective manual and automated testing plans.

  • Identify the most significant user flows in your application.
  • Document instructions for executing flows using "mouse-only" and "keyboard-only" approaches, adding expected results from browser-embedded accessibility tools.
  • Write targeted unit tests for each interactive element in the user flow to ensure they meet industry accessibility standards.
  • Simulate a user completing the most important flow through integration tests.

Develop Confidence and Pride in Your Skills

“Because it’s stated in WCAG” is better than nothing, but it’s not the most convincing argument for decision-making.

Practice testing, refactoring, and creating accessible solutions from scratch to gain a deeper understanding of why standards and guidelines are designed in such a way.

You will be able not only to explain but also to demonstrate accessible approaches.

Build confidence in your ability to show, describe, and develop accessible solutions for key interactions.

Accessibility is an opportunity to make a meaningful contribution.

It is important not only for users of your web application, who have a right to access, but also for your career growth.

Stop Relying on Guesses

What if your team had clear templates for design reviews, user testing procedures, and techniques for engaging with different departments in the company?

What if your team had all the necessary tools for creating inclusive web applications and became the champion of accessibility in your organization?

What if your team could identify and eliminate accessibility problems in the application and prevent their recurrence?

This is exactly what the Testing Accessibility course offers you and your team.

The lessons in Testing Accessibility are based on many years of experience working in companies of various scales.

Apply the acquired knowledge, and you will change the approach to accessibility in your organization.

Three Steps to Professionalism in Accessibility

1. Understanding Accessibility Basics

Learn about the components and standards of web accessibility and how to best utilize them. Develop skills to recognize issues at the design stage and propose alternative approaches.

2. Learn to Test Existing Applications

Master the testing tools that professionals use. Write practical unit and integration tests to guarantee the accessibility of your application.

3. Develop with Accessibility in Mind from the Start

Correctly use semantic elements and ARIA. Understand CSS hiding techniques and when to apply them. Programmatically convey accessibility information to assistive technologies.

Identifying Critical Problems at the Design Stage

Accessibility is not just about code.

To ensure successful accessibility, it needs to be integrated into the product design process, considering it already at the design stage.

In practice, the design that developers receive for implementation does not always cover all aspects of accessibility. Here, the ability to evaluate visual layouts for potential issues is crucial.

Some questions can be answered with a simple "yes" or "no":

  • Do the color combinations have sufficient contrast?

Other questions require deeper analysis and understanding of nuances:

  • Who can you talk to in order to learn personal experiences of using this pattern by people with disabilities?
  • What happens if you change the size of the viewport?

It is vital to be able to provide detailed explanations and suggestions to make the design process as inclusive as possible.

Preventing Barriers to Access

Accessibility is not just about adding attributes to tags. The law protecting the rights of people with disabilities explains it as follows:

Accessibility is about removing barriers to access.

If the main function of your application cannot be performed without a mouse, it creates a barrier for users.

Menus, modal windows, and forms are some of the most common elements on web pages.

The fact that a certain pattern is popular does not guarantee its accessibility or that it is the best solution.

Your team needs to have the knowledge to create accessible interactions that work intuitively with keyboards and screen readers.

It is important to consider the semantic structure of your code, the elements used, and the impact of CSS choices on user perception of the site.

Creating a component library for your application is a great way to test elements in various states without the need to navigate through the entire interface. This is also beneficial when working with components from design systems.

Be determined in testing your web application, and the barriers to access will disappear.

Identify and Fix Issues Before Users Notice Them

Automated testing cannot detect all errors.

Your team needs a testing workflow that allows for the detection and correction of issues before going into production. To do this, you need to know all the tools used in the industry and be able to conduct quality audits of the created applications.

To make sustainable changes and implement a focus on accessibility in your organization, your team needs to learn to prioritize, develop the process, and communicate effectively - even if it implies adjusting the design or the ability to communicate with higher-ups in certain situations.

Testing Accessibility - A Comprehensive Course for Creating Accessible Web Applications

Testing Accessibility provides you with the knowledge and skills necessary to ensure the accessibility and usability of your web application for everyone - from the earliest stages of visual design to mandatory testing before deployment.

Design

Identify potential issues with the visual presentation and proposed interactions of the web application before coding.

Development

Structure the correct elements and attributes to create the best experience for users of screen readers and other assistive technologies.

Testing

Use the best tools to identify issues in any web application. Expand your automated tests to ensure that components meet accessibility requirements.

Deployment

Block the deployment of a web application if any test fails through the implementation of continuous integration.

6 Workshops Focused on Accessibility at Every Stage of Development

Six stand-alone workshops in the Testing Accessibility course combine thoughtfully crafted text materials, supporting video content with transcripts, and educational tasks with ready solutions.

Testing Accessibility is the quintessence of years of experience in training hundreds of developers in live and remote workshops, supplemented by real experience working in accessibility with companies of all sizes.

It’s like participating in a live workshop, but with the ability to learn at a convenient time for you, without being tied to time zones and schedules.

Although the workshops are stand-alone, it's not just passive reading. Testing Accessibility is designed to put you in the driver's seat and encourage you to complete tasks. Each module contains carefully selected educational tasks that help you consolidate your knowledge.

Whether you are an experienced developer or a beginner, by the end of the course, you will have a deeper understanding of how to create accessible web applications.

Workshops in the Testing Accessibility Course Include:

Accessibility Basics

An introduction for specialists of any role, skills, and experience levels. Learn definitions and motivations for accessibility, including the business case for a global market. Explore the key components of accessibility that will form the foundation for the following workshops.

Design Thinking and Interaction Skills for Accessibility

Ensure that your designs are suitable for everyone by learning to identify potential problems early on and tactfully discussing alternative approaches. Learn how to create and implement a culture of accessibility in the organization.

Topics:

  • Accessibility as part of the user experience
  • Collaborative work on design and prototypes
  • The impact of animation on accessibility
  • Finding solutions for accessibility issues
  • Building an accessibility culture

Manual Accessibility Testing

Study manual testing techniques, such as keyboard work, DevTools, and browser extensions. In this module, you will learn testing steps and accessibility requirements to make testing a habit. You will test the CampSpots application and fix identified issues.

Topics:

  • Testing with the keyboard
  • Testing in DevTools
  • Browser extensions for accessibility
  • Testing scalability
  • Testing with a screen reader
  • Troubleshooting

Semantic Markup with HTML and ARIA

Master the best accessibility practices from the start by following the process of implementing accessible components in the CampSpots application. The module includes features for React applications but is also suitable for other web applications.

Topics:

  • Headers and key areas of the page
  • When and how to use ARIA
  • Accessible naming
  • Programmatic information for accessibility
  • AOM (Accessibility Object Model)
  • React Hooks and Portals

Programming Accessible Interactions and Mechanisms

Continue working on CampSpots with a focus on ensuring accessibility of interactive components for keyboard and screen reader users. Practice creating accessible versions of frequently used components from scratch.

Topics:

  • Accessible navigation and links
  • The impact of CSS on assistive technologies
  • Comfortable keyboard interaction for a date picker component
  • Focus management using key events
  • Notifications for assistive technologies
  • Advanced scenarios with ARIA
  • React Hooks and Refs

Automated Accessibility Testing

Learn to write reliable automated tests for accessibility assurance, such as checking keyboard control and ARIA states. Explore available automated tools and their features to configure tests that meet your team’s needs.

Topics:

  • Storybook
  • Jest
  • Cypress and Cypress component testing
  • Automated testing with browser snapshots
  • Continuous integration

Learning Through Testing and Developing a Real Application

In the Testing Accessibility series of workshops, you will gain practical experience in identifying and solving numerous issues in an application. You will learn how to find missing alt attributes for images using a linter in VSCode, set up key areas of a page using browser extensions, and manage roving tabindex using React and useState hooks - and these are just some examples you will encounter.

Watch Online

This is a demo lesson

You are viewing the first lesson for free. Subscribe to unlock all 249 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

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

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 Available
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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Developing LLM App Frontends with Streamlit

Developing LLM App Frontends with Streamlit

Sources: zerotomastery.io
This byte-sized course will teach Streamlit fundamentals and how to use Streamlit to create a frontend for your LLM-powered applications.
1 hour 43 minutes 52 seconds
Generating Fake Data with Faker.js

Generating Fake Data with Faker.js

Sources: vueschool.io
Every user application depends on data, whether it's user profiles, product listings, or blog posts. However, creating realistic datasets...
51 minutes 56 seconds
ScrollTrigger Express

ScrollTrigger Express

Sources: Carl (Creative Coding Club)
ScrollTrigger is GreenSock's most revolutionary plugin to date. With its help, you can control all your animations with precision and...
10 hours 31 minutes 38 seconds