Keyboard Navigation and Focus Management: The Accessibility Bugs That Make Good UIs Feel Broken
A practical playbook for fixing keyboard traps, invisible focus, and broken dialogs before they block real users.
Read articleAccessibility guidance from real scan results.
Keyboard access, readable UI, labels, structure, and mobile usability.
ARIA Labels Missing on Interactive Elements
When interactive elements don't have accessible labels, screen readers announce them as "button" or "link" with no context — forcing blind users to guess what each control does. Notable accessibility settlements include Bashin's $2M settlement and accessiBe's $1M FTC settlement (Accessibility.Works, 2024). Proper ARIA labels are foundational accessibility requirements under WCAG 2.1.
Open guideColour Contrast Too Low — Fails WCAG AA Requirements
Approximately 8% of males and 0.5% of females have colour vision deficiency — roughly 1 in 12 men worldwide (Vision Center). WCAG AA requires a minimum 4.5:1 contrast ratio for normal text. Low contrast also affects everyone reading on mobile screens in bright sunlight. With over 5,100 ADA web accessibility lawsuits filed in 2025 — a 20% increase from 2024 (EcomBack) — contrast failures are actionable legal risk.
Open guideForm Inputs Missing Associated Labels
When a label isn't programmatically associated with its input (via for/id or wrapping), screen readers don't announce what the field is for, and voice control users can't say "click email field." Form label errors are among the most commonly cited issues in accessibility audits, and they're straightforward to fix — just add matching for and id attributes.
Open guideMissing Image Alt Text — Accessibility and SEO Issue
22.1% of all images on website home pages lack alt text (WebAIM, 2024). Screen readers — used by JAWS (41% market share) and NVDA (38%) users — announce images without alt text as just "image," providing zero context. Missing alt text also means Google Image Search can't index your visuals. Over 5,100 web accessibility lawsuits were filed in 2025 alone (EcomBack), and missing alt text is one of the most commonly cited violations.
Open guideARIA Landmark Roles Missing — Page Navigation Broken for Screen Readers
88.8% of screen reader users find headings and landmarks very or somewhat useful for navigation (WebAIM Survey #10, 2024). Without landmarks, navigating your site requires listening to every element sequentially — there's no way to jump to the main content, search bar, or footer. Semantic HTML5 elements (nav, main, aside, footer) automatically create landmarks.
Open guideMobile Tap Targets - Practical Fix Guide
This check estimates whether interactive controls are large enough for touch users. Undersized targets increase accidental taps, form errors, and mobile frustration.
Open guideMobile Text Too Small or Lines Too Cramped
Over 60% of global ecommerce traffic comes from mobile devices (Alli AI). If text is too small to read comfortably (below 16px base) or lines are too cramped (below 1.4 line-height), mobile users either zoom — breaking your layout — or leave. Users with low vision, dyslexia, or age-related presbyopia are disproportionately affected.
Open guideSkip-to-Content Link Missing
Keyboard-only users and screen reader users must tab through every navigation link on every page load without a skip link. On a site with 50+ nav links, this means pressing Tab 50 times before reaching content. A skip link is one line of HTML and a few lines of CSS — it's the simplest accessibility win with the highest impact for keyboard users.
Open guide