Build & Test Accessible Web Apps | Testing Accessibility (PRO)
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
Watch Online Build & Test Accessible Web Apps | Testing Accessibility (PRO)
All Course Lessons (249)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionComments
0 commentsSimilar courses
Developing LLM App Frontends with Streamlit
Generating Fake Data with Faker.js
Want to join the conversation?
Sign in to comment