Accessibility Testing with Vitest and Angular

Vitest ships with toHaveAccessibleName, toHaveAccessibleDescription, and toHaveAccessibleErrorMessage, but chances are you've never used them. They're easy to skip past, because it's not obvious what they actually check or why it matters, so most of us fall back on toBeInTheDocument() and hope for the best.

This talk fixes that. We'll unpack the accessibility concepts behind these three assertions: how the accessible name and description are computed and where aria-label, aria-labelledby, aria-describedby, and native HTML semantics come in. Along the way, we'll look at real, sometimes surprising cases, icon buttons, custom form controls, validation messages – where the accessible name isn't what the markup suggests.

Tests will run in an Angular project, but the underlying accessibility model is universal. Whatever stack you test in, you'll leave knowing what to assert, why it matters, and how to spot the a11y bugs toBeInTheDocument() will always miss.

Maria Korneeva

Consultant and Trainer, Angular GDE

Dr. Maria Korneeva is a consultant, trainer and a Google Developer Expert with a focus on Angular and accessibility. With a solid background in linguistics and business informatics, she works as a freelancer developing frontend applications.

She also enjoys speaking at tech events, and conducting workshops for web developers. In her book “Accessible Web Development: From Fundamentals and Legal Considerations to Practical Application”, Maria gives her knowledge back to the developer community she deeply admires.

All speakers →