We watched a blind user try to use one of our applications. It had zero axe violations, proper semantic HTML, and ARIA labels everywhere. She could not complete the primary workflow. She gave up after four minutes.
The issue was focus management. Our multi-step form moved between steps, but focus stayed on the previous submit button. She had no idea the page had changed. Error messages were not programmatically associated with fields at the right time. Loading states were visual spinners with no aria-live announcement, so she clicked submit repeatedly.
All technically compliant. None of it usable. That experience changed our approach.
Focus management is the foundation. When content changes dynamically -- a modal opens, a form step advances, an error appears -- focus must follow. We use a custom useFocusManager hook that moves focus after state transitions. We test by navigating every workflow keyboard-only with eyes closed.
Announcements use aria-live regions via a global announcer component. Any component can push a message: "Form submitted," "3 results found," "Error: email invalid." The announcer renders in an aria-live region -- the screen reader equivalent of a toast.
Error handling follows a specific pattern: each field has aria-describedby pointing to its error container. On validation failure, we move focus to the first invalid field. The screen reader announces the label and error together.
Color is never the only indicator. Red error borders need icons or text. Status indicators need labels. Charts need patterns or direct labels alongside color.
We test with four tools in priority order: keyboard-only navigation, VoiceOver or NVDA for screen reader experience, axe DevTools for automated scanning, and manual testing with reduced motion and two hundred percent zoom.
Accessible development adds roughly fifteen percent to frontend time. We include it in every estimate by default and treat it as non-negotiable. In three years, no client has pushed back after we explained the legal risk.
About the Author
Fordel Studios
AI-native app development for startups and growing teams. 14+ years of experience shipping production software.
Every team says they care about performance. Few enforce it. We share the performance budget system we use across all projects, including the CI gates that block deployments when budgets are exceeded.
We rebuilt the same component library twice, once with Tailwind and once with styled-components, to settle the styling debate with data instead of opinions.
Forms are deceptively complex. We built the same multi-step registration form with seven different libraries and compared bundle size, performance, developer experience, and edge case handling.
We love talking shop. If this article resonated, let's connect.
Start a ConversationTell us about your project. We'll give you honest feedback on scope, timeline, and whether we're the right fit.
Start a Conversation