Keyboard shortcuts

Press ← or → to navigate between chapters

Press S or / to search in the book

Press ? to show this help

Press Esc to hide this help

Accessibility

Pattern

A reusable solution you can apply to your work.

Also known as: a11y

Understand This First

  • Affordance – accessible affordances work across multiple modalities (visual, auditory, tactile).
  • Feedback – accessible feedback reaches users through screen readers and other assistive technologies.

Context

This is a tactical pattern that extends UX to its logical conclusion: if software is meant to serve people, it must serve all people, including those with visual, auditory, motor, or cognitive disabilities. Accessibility isn’t an edge case or a nice-to-have. Roughly one in five people has some form of disability, and everyone experiences situational impairments (bright sunlight, a noisy room, a broken mouse, a temporary injury).

In agentic coding, accessibility matters early. AI agents can generate interfaces rapidly, but they rarely produce accessible output by default. If you don’t ask for accessibility, you won’t get it, and retrofitting it later costs far more than building it in from the start.

Problem

Software works beautifully for a sighted person using a mouse on a large screen, and is completely unusable for someone navigating with a keyboard, using a screen reader, or dealing with low vision. The functionality is there, but the interface locks people out. How do you build software that works for the widest possible range of human abilities?

Forces

  • Accessible design benefits everyone (captions help in noisy environments, keyboard navigation helps power users), but the investment is hard to justify with traditional ROI metrics.
  • Standards exist (WCAG, Section 508, ADA) but are complex and sometimes contradictory in practice.
  • Accessibility testing requires tools and expertise that many teams lack.
  • Retrofitting accessibility onto an existing UI is painful; building it in from the start is much easier.

Solution

Build accessibility into your design process from the beginning, not as an afterthought. This means following established standards (primarily the Web Content Accessibility Guidelines, or WCAG) and testing with assistive technologies.

The core principles are captured in the WCAG acronym POUR: Perceivable (can users sense the content?), Operable (can users interact with all controls?), Understandable (can users comprehend the content and interface?), and Robust (does it work with a variety of assistive technologies?).

In practice, this means: use semantic HTML elements instead of styled div tags. Provide alt text for images. Ensure sufficient color contrast. Make all functionality available via keyboard. Label form inputs properly. Do not rely on color alone to convey information. Test with screen readers. Provide captions for video and transcripts for audio.

When working with an AI agent, include accessibility requirements in your prompts. “Build a form” will produce a form. “Build an accessible form with proper labels, ARIA attributes, keyboard navigation, and error announcements for screen readers” will produce something people can actually use.

How It Plays Out

A developer asks an agent to build a dashboard with data visualizations. The agent produces charts using only color to distinguish data series: red for errors, green for success, yellow for warnings. A color-blind user can’t interpret the charts at all. Adding pattern fills, text labels, and ARIA descriptions makes the same data available to everyone.

A team builds a complex single-page application with custom dropdown menus, modals, and drag-and-drop interfaces. Keyboard users can’t reach half the controls because the custom components don’t manage focus correctly. Switching to components that follow WAI-ARIA patterns solves the problem without changing any business logic.

Warning

Automated accessibility scanners catch only about 30% of accessibility issues. They are a useful first step, not a substitute for manual testing with real assistive technologies.

Example Prompt

“The data charts use only color to distinguish series. Add pattern fills and text labels so color-blind users can read them. Also add ARIA descriptions for each chart.”

Consequences

Accessible software serves a broader audience, meets legal requirements in many jurisdictions, and often improves the experience for all users, not only those with disabilities. Keyboard navigation, clear labels, and good contrast benefit everyone.

The cost is real but often overstated. Building accessibility in from the start adds modest effort. The expensive part is neglecting it and then trying to retrofit it after the interface is already built and shipped. Accessibility also requires ongoing attention; new features need to be tested, and standards evolve over time.

  • Refines: UX — accessibility is a dimension of overall user experience quality.
  • Depends on: Affordance — accessible affordances work across multiple modalities (visual, auditory, tactile).
  • Depends on: Feedback — accessible feedback reaches users through screen readers and other assistive technologies.
  • Enables: Internationalization — many accessibility practices (semantic markup, separated content) also support internationalization.