Skip to main content

Front-End Accessibility Masterclass

Marcy Sutton
On the web
marcysutton.com
On Twitter
@marcysutton
Tickets
Get a ticket

Workshop includes:
  • Working examples to take away
  • Interactive sessions
  • Workshop recordings
  • Dedicated Q&A time
  • Smashing Certificate

Workshop, 5×2.5h + Q&A • Tue & Wed, June 16–30
09:00 – 11:30 AM PDT (Pacific Daylight Time)

Accessibility is critical in a world where services are increasingly only available online. By adopting an accessibility mindset and making improvements throughout the design and development process, we can truly make an impact in people’s lives.

This workshop will cover how to approach accessibility with HTML, CSS, and JavaScript using modern tools and techniques to eliminate barriers to access in web projects.


We’ll cover establishing an accessibility process in reactive and proactive ways, with live design reviews, prototyping, debugging, and screen reader testing. We’ll dive into technical accessibility mechanics with JavaScript-heavy apps, and learn how to serve more people by responding to user preferences and safely sparking joy and delight with motion. We’ll round out the workshop by embedding quality into sites and web applications with automated accessibility tests.

Who Is This For?

This is a full 8-hour workshop delivered in five 2-hour long sessions with lots of time for Q&A.

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 remove 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.

What will attendees learn in this workshop?

  • Immersive web accessibility with live prototyping: How design and development come together to impact web accessibility, as illustrated through live UI design reviews and front-end coding prototypes. Learn how to use design thinking to craft beautiful and accessible experiences right from the start.
  • Embedding accessibility into your workflow: Apply key web accessibility concepts in the browser by testing and debugging sites with the keyboard, browser tools, and assistive technologies to build a holistic testing methodology. Learn techniques for increasing accountability and continuous improvement by including accessibility in your “definition of done”.
  • Accessibility mechanics in JavaScript apps: Explore the unique parts of accessibility in web applications with tools such as Gatsby and React, Vue, Ember, Angular, and more. Learn how to evaluate the impact of JavaScript-heavy experiences by digging into semantics, focus management, announcements, and progressive enhancement.
  • Safe, accessible experiences that delight: Learn how to create delightful, useful, and safe websites using unobtrusive motion and thoughtful UI design. Explore animation, transitions, and media queries to respond to user preferences and needs for safety.
  • Ensuring quality with user-interface testing: Experience automated UI testing as a way to bake accessibility into your codebase. Explore scenarios for writing unit and integration tests, and where automated testing falls short to round out your accessibility approach.

Register for this workshop →

About Marcy Sutton

Marcy Sutton is a Lead Software Engineer in Developer Relations at Gatsby, a remote startup and modern website generator for React. Previously, she worked on the open source axe-core accessibility testing library and the Angular framework.

In 2016, O’Reilly gave Marcy a Web Platform Award for her work in accessibility, and she’s now a co-founder of the nonprofit Accessibility Seattle Foundation and meetup group. On an ideal day, Marcy would like to put the finishing touches on an article or workshop materials from her van and head out on a mountain adventure.

Time & Schedule

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

The workshop sessions will run on the following days:

  • Tue, Jun 16, 09:00 – 11:30 AM PDT
  • Wed, Jun 17, 09:00 – 11:30 AM PDT
  • Tue, Jun 23, 09:00 – 11:30 AM PDT
  • Wed, Jun 24, 09:00 – 11:30 AM PDT
  • Tue, Jun 30, 09:00 – 11:30 AM PDT

Tue, Jun 16: Web Accessibility Thinking with Live Design Review and Prototyping

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

9:00 am – 11:00 am
How design and development come together to impact web accessibility, as illustrated through live UI design reviews and front-end coding prototypes. Learn key web accessibility concepts for the modern web platform and how to apply them to produce inclusive, innovative experiences.

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

Wed, Jun 17: Embedding Manual Accessibility Testing and Debugging into your Workflow

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

9:00 am – 11:00 am
Making accessibility testing part of your regular design and development process is key to making it stick. This session will cover manual testing and debugging accessibility in the web browser using the keyboard, browser tools, and assistive technologies, to start building a consistent testing process.

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

Tue, Jun 23: Accessibility Mechanics in JavaScript Applications

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

9:00 am – 11:00 am
Learn how to evaluate JavaScript frameworks by exploring the unique parts of accessibility in web applications built with tools such as Gatsby and React, Vue, Ember, Angular, etc. Modern JavaScript frameworks and libraries provide ample opportunities for discussing impacts on user access: semantics, focus management, announcements, progressive enhancement, and more.

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

Wed, Jun 24: Accessible Experiences that Delight: Motion, Style, and Responding to User Preferences

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

9:00 am – 11:00 am
In this workshop, we’ll explore how to create delightful, useful, and safe experiences using unobtrusive motion and thoughtful UI design. CSS animation, transitions, and media queries come together to provide flexible tools for responding to user preferences and needs for safety. How else can we support users in our applications with user preferences for accessibility?

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

Tue, Jun 30: User Interface Testing for Web Accessibility

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

9:00 am – 11:00 am
Learn about automated UI testing as a way to bake accessibility into your codebase. Explore scenarios for writing unit and integration tests with JavaScript using Jest and Testing Library, Cypress, and where automated accessibility testing falls short. Apply the knowledge from previous workshop sessions to round out your accessibility workflow!

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

Register for this workshop →