Add accessibility checks
Add Axe, Pa11y, Lighthouse Accessibility, and computed role or label Checks.
Last updated
Add Axe, Pa11y, Lighthouse Accessibility, and computed role or label Checks.
Accessibility Checks catch role, label, and WCAG issues in the same journey as your functional steps. Mix page-level Validators with Checks on the controls that matter most.
Use the Flow Builder for this walkthrough.
Run a WCAG conformance scan on the page
Run a WCAG conformance scan with Pa11y
Assert a Lighthouse accessibility score
Assert the accessible role of an Element
Assert the accessible name of an Element
Start with Axe or Pa11y for a page scan. Add computed role and label Checks on buttons, links, headings, and form fields that users must understand.
Add Accessibility when you want a score threshold as well as a conformance scan.
Choose a Comparison Type and a Value, such as greater than or equal to 85.
Add Check computed role.
Choose the Element, a Comparison Type, and the expected role, such as button or link.
Add Check computed label on the same or another Element. Set the expected accessible name, such as Create account.
Pro tip: Put accessibility Validators after the screen is fully loaded and after any consent or overlay steps, so the scan sees the same UI a user would.
You can add Performance, SEO, and other Lighthouse Validators on the same screen when you want several scores in one journey. See Test page performance and Test SEO.
Last updated