The Angular Accessibility Testing Pyramid: Vitest, Harness, Guidepup & Storybook

Using a real-world example of a comic book store, we will implement a new feature step by step, showing how accessibility can be built into the development workflow from the very beginning. The talk demonstrates how to introduce accessibility testing and inclusive coding practices into an organization in a simple, practical, and repeatable way.

You’ll see how different layers of the accessibility testing pyramid work together - from fast unit tests catching WCAG violations, screen-reader integration tests, all the way to end-to-end accessibility checks in Storybook.

We’ll use Vitest, Angular Component Harness, Guidepup, and Storybook Play Functions to show how each tool fits into the workflow and helps prevent accessibility regressions and future legal or compliance risks.

Finally, you’ll learn how Nx generators can scaffold accessible components, harnesses, stories, and tests, making accessibility an automatic part of the development process, not an afterthought.

Vorkenntnisse

To get the most out of this talk, learners should have:

• Basic knowledge of HTML and JavaScript/Typescript
  
• Basic experience with Angular (components, templates, and testing concepts)
  
• No prior experience with accessibility testing is required – all accessibility concepts, tools, and practices are introduced during the session
  

Lernziele

After this session, learners will be able to:

• Understand and apply an accessibility testing pyramid in Angular applications
  
• Implement accessibility checks at multiple levels: unit, integration, and end-to-end
  
• Use Vitest and Angular Component Harnesses to detect WCAG violations and test accessible component behavior
  
• Write screen-reader integration tests using Guidepup
  
• Validate accessibility in Storybook using Play Functions
  
• Use Nx generators to scaffold accessible components, tests, and stories, making accessibility part of the default workflow