Playwright accessibility testing playground

These pages support the resource Accessibility testing with Playwright.

Each page contains working components and at least one deliberately broken one. Run the matching test against a page, and you should see it pass for the working components and fail for the broken one, for exactly the reason it should.

Examples

1. Example 1: buttons and accessible names

   An icon-only button with no accessible name. Test: buttons.spec.js

2. Example 2: disclosures

   A disclosure that shows and hides its content, but never updates aria-expanded. Test: disclosures.spec.js

3. Example 3: keyboard reachability

   A control with role="button" that can't be reached with the Tab key. Test: keyboard.spec.js

4. Example 4: dialogs

   A dialog that drops focus completely when it closes. Test: dialogs.spec.js

5. Example 5: form errors

   A form where one field never gets aria-invalid="true", and another's error message isn't linked to the field. Test: forms.spec.js

6. Example 6: a small website

   Three pages, each reusing checks from earlier examples: disclosures and dialogs on the home page, a product list with a button that can't be reached by keyboard, and a help page with a broken form. Test: site.spec.js