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

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.