Is your app usable without a mouse?
Keyboard navigation, labelled inputs, and ARIA roles that make your app usable for everyone and your Playwright tests more reliable.
Tab through it yourself
Press Tab on your app's main form. If focus skips an input or you can not reach submit without a mouse, the form is broken for anyone on a keyboard or screen reader.
I just tabbed through my main form: [describe what happened]. Can I complete it using only the keyboard from first field to submitted state, and where does focus break?
Labels and roles are just correct HTML
Every <input> needs a connected <label>, and any element you make interactive by hand needs an explicit role. None of this is extra work, it is the markup you should have written anyway.
How do I check that every input in my app has an associated label, using browser devtools or the Accessibility panel?
Accessible markup is testable markup
getByRole('button', { name: 'Submit' }) only works when the button has a real role and a real label. Fixing accessibility makes your locators reliable.
For [describe one element in my app], show the accessible role and label it needs so a getByRole locator can target
it without a CSS class or test ID.
A keyboard-usable, labelled app is just correct HTML. As a bonus, that same markup is what Playwright locates most reliably.
Additional Resources
Explore these carefully curated resources to deepen your understanding and practice the concepts covered in this lesson.
MDN ARIA
DocumentationReference for ARIA roles, states, and properties.
https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA
web.dev Accessibility
DocumentationPractical accessibility guidance with examples and audit tools.
https://web.dev/accessible/
Playwright accessibility testing
DocumentationHow to run axe-core accessibility scans inside Playwright tests.
https://playwright.dev/docs/accessibility-testing