Accessibility

What is it?

Accessibility (a11y) is the practice of designing products and experiences that can be used by people with a range of abilities and disabilities. This includes visual impairments, motor limitations, cognitive differences, and auditory conditions. Accessibility is not a checklist — it's a design philosophy that benefits every user.

Why it matters

1 in 4 adults in the US has some form of disability. Beyond the moral imperative, accessible design is legally required in many jurisdictions (ADA, EAA, EN 301 549). It also improves usability for all users — captions help in noisy environments, high contrast helps outdoors, keyboard navigation helps power users. Accessibility and good UX are the same thing.

Best Practices

• Maintain a minimum contrast ratio of 4.5:1 for normal text, 3:1 for large text (WCAG AA). Use a contrast checker — don't guess.
• Every interactive element must be keyboard-accessible. Tab order should match visual reading order.
• Provide visible focus indicators. The browser default outline is often removed by CSS resets — always replace it.
• All images that convey information need descriptive alt text. Decorative images get empty alt="".
• Use semantic HTML elements: <button> for buttons, <nav> for navigation, <main> for main content. Divs with click handlers are not accessible.
• Form fields must have visible, associated labels. Placeholder text is not a label — it disappears when the user types.
• Error messages must identify the specific field and explain how to fix it. Don't just say "error" — say "Email address is not valid."
• Provide text alternatives for all non-text content: captions for video, transcripts for audio.
• Touch targets on mobile must be at least 44×44px (Apple) or 48×48dp (Google).
• Don't rely on color alone to convey information. Add icons, patterns, or text labels.

Common Mistakes

• Removing focus styles with outline: none in CSS without replacing them. This makes keyboard navigation invisible.
• Using placeholder text as the only label for a form field.
• Building custom components (dropdowns, modals, sliders) without ARIA attributes.
• Autoplay media without pause controls — disorienting for users with cognitive and vestibular conditions.
• Poor color contrast that looks fine to designers on calibrated monitors but fails for many users.
• Click targets that are too small — especially on mobile where motor precision varies.
• Using images of text instead of actual text — screen readers can't read it.
• Relying on hover interactions for critical functionality — keyboard and touch users have no hover.

Checklist

Research & Theory

Real-World Examples