Accessibility by Design

Featured Snippet / AEO Answer : Accessibility by design means integrating accessibility standards perceivable, operable, understandable, and robust interfaces into design and development decisions from the beginning of a project, rather than auditing and remediating at the end. Research consistently shows that fixing an accessibility issue during design costs 3–10x less than fixing the same issue after development is complete making accessibility-first development both the ethically correct and the economically rational approach.

Quick Answer / TL;DR Accessibility as a final QA step auditing a finished product for WCAG compliance and remediating what's found is both the most expensive and the least effective way to make digital products accessible. It's expensive because fixing accessibility issues in shipped code costs 10–100x more than building them correctly the first time. It's ineffective because audits of finished products reveal structural issues wrong semantic HTML throughout the codebase, design system color choices that fail contrast requirements, component interaction patterns that don't work with keyboard navigation that require rebuilding, not fixing. Accessibility by design integrates accessibility into every phase of product development so that the audit confirms compliance rather than revealing it.

elements with click handlers instead of elements, using elements, generate forms without associated elements, and produce interactive components without keyboard interaction support. Accessibility-first development requires explicit accessibility requirements in the code generation prompts and human review of AI-generated code for accessibility correctness.

 

Design systems have made accessibility a scalable decision. The component-based development model where UI components are built once and used everywhere means that a semantically correct, accessible Button component is accessible everywhere it's used. A semantically incorrect Button component is inaccessible everywhere it's used. Building accessibility into the design system multiplies accessibility across the entire product; retrofitting it requires updating every component and every usage.

---

What Accessibility by Design Actually Means Across Each Development Phase

Accessibility by design is the integration of accessibility principles, standards, and testing into every phase of the product development lifecycle from initial discovery through design, development, testing, and ongoing maintenance so that accessibility is a continuous quality dimension rather than a final compliance check.

Phase 1 Discovery and Requirements

Accessibility constraints are requirements, not optional enhancements. At the discovery phase:

• Define the accessibility standard the product must meet (WCAG 2.1 AA for EAA compliance; WCAG 2.2 AA for best current practice)

• Include users with disabilities in user research the design decisions that emerge from research including users with visual, motor, cognitive, and auditory impairments are different from decisions that emerge from research with only non-disabled users

• Define accessibility acceptance criteria alongside functional acceptance criteria "users can complete the checkout flow using keyboard only" is an acceptance criterion that can be tested and passed or failed

Phase 2 Design

Design decisions made without accessibility consideration create the structural accessibility debt that post-launch remediation inherits:

• Color system: every color combination in the design system checked against WCAG 1.4.3 (4.5:1 contrast ratio for normal text, 3:1 for large text) before the system is used anywhere. Stark (Figma plugin), Colour Contrast Analyser, and similar tools make this check fast and definitive at design time.

• Typography: minimum font sizes defined (16px as default body text), line height and letter spacing within legible ranges, text resize to 200% without content loss

• Focus states: visible, clearly distinct focus indicators designed for every interactive element not the browser default outline that most design systems remove without replacement

• Touch targets: minimum 44×44px touch target size for all interactive elements on mobile

• Motion and animation: consideration of users with vestibular disorders provide reduced motion alternatives for any significant animation, never use flashing content above 3Hz

Phase 3 Development

The development phase is where accessibility by design either succeeds because design decisions were correct and developers implement them with accessible code or fails at the final step despite good design, because code implementation introduces accessibility issues:

• Semantic HTML as the default: use the correct HTML element for the purpose it serves.

for interactive controls,for navigation, for selection, for interactive controls,