Skip to main content

Accessibility for designers

Baseline: WCAG 2.2, target Level AA.

If you’re a engineer, you use a technical version of accessibility guidelines.

Interactive elements​

  • Button: performs action on current page (submit, toggle, open modal)
  • Link: navigates to new URL or resource

Labels​

  • Every interactive element needs a visible label
  • Icon-only buttons need a text label for screen readers (note in design specs)
  • Provide clear instructions when input requires specific format

Color and contrast​

Text contrast (against background)​

  • Normal text (16px): minimum 4.5:1
  • Large text (18px+ or 14px+ bold): minimum 3:1
  • Disabled elements: exempt

Non-text contrast​

  • UI components, icons, input borders: minimum 3:1 against adjacent colors
  • Disabled elements: exempt

Don't rely on color alone​

  • Supplement with icons, text labels, or patterns
  • Example: error state needs red color + error icon + error message

Focus states​

  • Design visible focus indicator for all interactive elements
  • Focus outline must have sufficient contrast against all backgrounds
  • Never remove focus outlines without replacement

Structure​

Headings​

  • Use h1–h6 to create logical hierarchy
  • Don't skip levels (h1 → h3 is wrong, use h1 → h2 → h3)
  • Visual size doesn't dictate heading level

Page title​

  • Every page needs descriptive title (browser tab)
  • Main h1 should match or be similar to page title

Images​

  • Meaningful images: need descriptive alt text (note in design specs)
  • Decorative images: mark as decorative (empty alt)

Hover/focus content (tooltips, popovers)​

Avoid hiding critical content behind hover. If unavoidable:

  • Must appear on both hover and keyboard focus
  • User can dismiss without moving pointer
  • Content stays visible until user dismisses
  • Pointer can move over revealed content without it disappearing

Consistency​

  • Same action = same label across all screens
  • Don't mix "Save" and "Confirm" for identical actions
  • Navigation looks and works identically everywhere

Responsive and text​

Text resizing​

  • Content must work at 200% text zoom
  • No broken layouts or cut-off text

Reflow​

  • Content works without horizontal scroll at 320px width
  • Exception: data tables that require 2D layout

Text spacing​

  • Design must tolerate increased line-height, letter-spacing, word-spacing

Touch targets​

Minimum size​

  • Interactive targets: at least 24×24 CSS px
  • If smaller: 24px circle around target must not overlap adjacent targets

Gestures​

  • Multipoint gestures (pinch, swipe) need single-tap alternative
  • Drag interactions need non-drag alternative (buttons, arrows)

Logical order​

  • Tab order follows visual reading order
  • Primary actions are reachable where users expect them
  • Modals trap focus inside until closed, then return focus to trigger

Error states​

  • Errors clearly visible (not just color)
  • Error message near the input or referencing it by name
  • Message explains the problem and how to fix it