Developers are capable of so much with JavaScript these days – we can learn new APIs and build complex applications that look great on our resumés. But who are you building those apps for? If you’re selling a product online or trying to expand reach, doesn’t it make more sense to include as many users as you can?

By taking an inclusive design approach for your apps and really baking accessibility in with automated tests, you’ll raise the bar for quality software and be the hero of so many users.

Who Is This Workshop For?

The workshop is for web designers and developers comfortable with pushing their HTML, CSS, and JavaScript skills to create accessible and robust user interfaces.

You’ll learn how to prevent barriers to access for people with disabilities in UI design and development. You’ll leave with knowledge and direction necessary to identify and implement accessible patterns and workflows to build inclusive, innovative websites and web applications.

This Workshop, We Will Explore:

• Semantic structure in JavaScript apps and custom components
• Keyboard interactivity and focus management
• Updating views, toggling UI components and layers
• Notifying screen reader users
• Using motion and animation safely
• Accessible style guides and pattern libraries
• Debugging for accessibility
• Using accessibility testing tools
• Writing automated accessibility tests

What will attendees learn in this workshop?

• Semantic Structure and ARIA in JavaScript Apps and Components: How to write modern apps and components that are programmatically accessible for assistive technology like screen readers, voice control, and other helpful technologies. Gain knowledge on applying native HTML as well as the Accessible Rich Internet Applications (ARIA) standard to plumb accessibility through your user interfaces for a variety of platforms and web browsers.

• Keyboard and Screen Reader Interactivity: Learn the common interactions and mechanics required to support keyboards and screen readers on the Web. You’ll be immersed in concepts and code for focus management in interactive components, updating client-side views, toggling UI components and layers, and more. You’ll come away from this session with an understanding of the overlap and differences between keyboard and screen reader support.

• Accessibility in Design Systems and Pattern Libraries: Acquire knowledge to evaluate accessibility in a design system or pattern library, in order to solve and prevent issues at the source. You’ll learn what to look out for in terms of structure, color and design, interactivity, and more. You’ll also gain insight on configurability and flexibility for a design system so that implementations produce an accessible result when rendered.

• Automating Accessibility Tests with JavaScript: Bake accessibility into your applications and components with automated JavaScript testing. You’ll pick up skills on using modern tools like Jest, Testing Library, and Cypress, as well as where manual testing is required. This session will dive into code-heavy patterns with a realistic view on what can and can’t be done with automation.

• Building Your Accessibility Knowledge to Really Do the Work: Grow your accessibility muscles by learning where to find answers. You’ll learn how to discern between solutions to solve accessibility issues and build your confidence. This session will discuss the realities of accessibility work, including the necessity of an accessible culture and how to persuade stakeholders without burning ourselves out.

What Hardware/software Do You Need?

To get the most out of the workshop, make sure you have a text editor, Git, Node, and npm 12+ installed. Windows users should also have the NVDA screen reader installed, while Linux users can use the Orca screen reader.

About Marcy Sutton

Marcy Sutton is a freelance web developer who works with organizations as a lead accessibility engineer and teacher. In the past Marcy has worked on accessibility testing tools including axe-core, JavaScript frameworks, websites and web applications.

Marcy’s focus on access and user experience was recognized by O’Reilly in 2016 with a Web Platform Award. When away from the keyboard, Marcy can be found hiking with her dog, riding bicycles, adventuring in her camper van, or cooking something delicious.

Time & Schedule

This workshop is split over five days. Our virtual doors open at 8:45, we start at 9 AM PDT.

The workshop sessions will run on the following days:

• Tue, March 22, 09:00 – 11:30 AM PT (17:00 – 19:30 CET)
• Wed, March 23, 09:00 – 11:30 AM PT (17:00 – 19:30 CET)
• Tue, March 29, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Wed, March 30, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)
• Tue, April 5, 09:00 – 11:30 AM PT (18:00 – 20:30 CET)

Day 1 — Semantic Structure and ARIA in JavaScript Apps and Custom Components

8:30 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am
Learn key structural accessibility concepts for the Web Platform and how to apply them to modern applications and components. First, you’ll explore how to get functionality and accessibility for free with native HTML elements. Then, you’ll learn how to weave ARIA attributes through your components where appropriate. Before wrapping up for the day, we’ll go into some intricacies of accessibility APIs, platforms, and browsers ahead of Day 2 on accessible interactions and mechanics.

11:00 am – 11:30 am
Q&A with Marcy on the day’s material. Networking!

Day 2 — Keyboard and Screen Reader Interactivity and Focus Management

8:30 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am
A huge part of accessibility includes user interaction with keyboards and assistive technologies like screen readers. This session will cover interactions and mechanics of keyboard support in common patterns and widgets. We’ll also dig into the overlap between keyboard and screen reader support, and where these requirements differ. By the end of this session, you should have a much better understanding of accessible interactions including working code examples.

11:00 am – 11:30 am
Q&A with Marcy on the day’s material. Networking!

Day 3 — Accessibility in Design Systems and Pattern Libraries

8:30 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am
More and more, teams are realizing the potential of design systems and pattern libraries to centralize branding implementations and common functionality. In this session, you’ll learn what to anticipate in these systems for accessibility, including structural components, color and design, motion, interactivity, and more. You’ll come away from this session with ideas on how to zero in on a design system’s accessibility characteristics (or lack thereof) and create a better outcome for all.

11:00 am – 11:30 am
Q&A with Marcy on the day’s material. Networking!

Day 4 — Automating Accessibility Tests with JavaScript

8:30 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am
In this session, you’ll learn how to test for accessibility in various parts of the software development lifecycle using tools like Jest, Testing Library, and Cypress. It’s not always easy to assert accessibility with code even using today’s tools, so you’ll learn some of the gotchas and nuances necessary to implement tests that mimic real user experiences. You’ll also gain an understanding of how accessibility requires a shift in culture so we don’t simply throw code at the problem in vain. It’s important to know when and how to apply an automated accessibility testing approach, so we can ensure quality experiences that people with disabilities can use.

11:00 am – 11:30 am
Q&A with Marcy on the day’s material. Networking!

Day 5 — How to Build Your Accessibility Knowledge and Really Do the Work

8:30 am PDT
Virtual doors open, registration, chat and introductions.

9:00 am – 11:00 am
Apply your enthusiasm for accessibility and learn how to build a body of knowledge that gives you confidence to solve real user problems. In this session, we’ll explore how to find answers to accessibility questions and discern between various sources and solutions. We’ll discuss how to apply the Web Content Accessibility Guidelines to prioritize issues and work with teams. We’ll also focus on the requirements for an accessible culture, including getting accessibility into a “definition of done”. As we wrap up this workshop series, you’ll be better informed with the realities of accessibility work and how to thrive in it.

11:00 am – 11:30 am
Q&A with Marcy on the day’s material. Networking!