Skip to main content

Design Guide

Build inclusive digital experiences from the start.

Designing forAccessibility

True accessibility isn't a patch—it's a fundamental design principle. Follow this guide to create experiences that work for everyone, regardless of ability.

Test Your PageW3C QuickRef

The POUR Principles

Perceivable

Information and UI components must be presentable to users in ways they can perceive.

  • Text Alternatives
  • Captions
  • Adaptable Content
  • Distinguishable Colors

Operable

User interface components and navigation must be operable.

  • Keyboard Accessible
  • Enough Time
  • Seizure Safe
  • Navigable

Understandable

Information and the operation of user interface must be understandable.

  • Readable Text
  • Predictable UI
  • Input Assistance

Robust

Content must be robust enough that it can be interpreted reliably by assistive technologies.

  • Parsing
  • Name, Role, Value
  • Status Messages

Instant Fixer

Paste your inaccessible code snippet below. Our engine will apply WCAG 2.1 best practices to automatically repair common violations.

Input Code
Remediated Output

Waiting for code...

Paste your snippet on the left and hit fix to see the magic happen.

Verified Patterns

Common components done right.

Buttons & Links

WCAG 2.1.1, 2.4.4, 2.4.7

Buttons trigger actions, links navigate. Ensure they are keyboard accessible and have clear labels.

Don't Do This

<div 
  onClick={submit} 
  className="btn"
>
  Submit
</div>
  • Not keyboard accessible
  • No semantic role
  • No focus state

Do This

<button 
  type="button"
  className="px-4 py-2 bg-blue-600 text-white rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
>
  Save Changes
</button>
  • Explicit type="button"
  • Focus ring with offset visible on all backgrounds
  • Good contrast (7.5:1)
  • Visible text is the accessible name

Developer's Quick Checklist

Structure

  • Use semantic HTML5 elements (<main>, <nav>, <header>)
  • Ensure logical heading hierarchy (h1 -> h2 -> h3)
  • Use list elements (<ul>, <ol>) for grouped items

Interaction

  • All interactive elements must be keyboard focusable
  • Focus order matches visual order
  • Focus indicators are clearly visible
  • No keyboard traps

Visuals

  • Text has 4.5:1 contrast ratio (3:1 for large text)
  • Color is not the only way to convey information
  • Support text resizing up to 200%

Media

  • Images have descriptive alt text
  • Videos have captions and transcripts
  • Audio controls don't autoplay