Keyboard-only navigation using the Tab key is one of the most effective accessibility testing methods. Pressing Tab reveals nine common issues: missing focus styles (fixable with CSS :focus/:focus-visible), non-interactive elements built with divs instead of semantic HTML, fake buttons that don't respond to Enter/Space, missing skip links, broken focus management in modals, infinite scrolling blocking footer access, off-screen items remaining in tab order, DOM order mismatches causing erratic focus jumps, and partially accessible custom JS components. Each issue includes a concrete code example and fix. A perfect Lighthouse score doesn't guarantee accessibility — manual Tab key testing is a fast, no-setup-required next step.

4m read timeFrom matuzo.at
Post cover image
Table of contents
1. Focus styles2. Interactive elements3. Real buttons4. Skip links5. Focus management6. Infinite scrolling7. Off-screen items8. DOM order9. Custom JS componentsThe Tab key is awesome
1 Impression