Back to Home
accessibility cheat sheet
Key accessibility guidelines, ARIA patterns, and WCAG standards for building inclusive web experiences.
wcag fundamentals
Web Content Accessibility Guidelines (WCAG) is the standard for building inclusive web experiences.
- 1Perceivable: Information must be presented in ways users can perceive
- 2Operable: Interface components must be operable by all users
- 3Understandable: Information and UI must be understandable
- 4Robust: Content must work with current and future technologies
- 5Level A: Basic accessibility (minimum)
- 6Level AA: Industry standard (aim for this)
- 7Level AAA: Enhanced accessibility (nice to have)
- 8Color contrast ratio of at least 4.5:1 for text
- 9All functionality available via keyboard
aria attributes
ARIA fills the gaps for dynamic content and custom widgets.
- 1Navigation:
<nav role="navigation" aria-label="Main"> - 2Modal dialog:
<div role="dialog" aria-modal="true"> - 3Alert:
<div role="alert" aria-live="assertive"> - 4Expanded state:
<button aria-expanded={isOpen}> - 5Current page:
<a aria-current="page"> - 6Hidden content:
<div aria-hidden="true"> - 7Descriptions:
<input aria-describedby="password-hint"> - 8First rule of ARIA: Don't use ARIA. Use semantic HTML first.
keyboard navigation
Many users rely solely on keyboards or assistive devices.
- 1Tab: Navigate forward through focusable elements
- 2Shift + Tab: Navigate backward
- 3Enter/Space: Activate buttons and links
- 4Escape: Close modals and dialogs
- 5Arrow keys: Navigate within components (menus, tabs)
- 6Make focusable:
<div tabIndex={0}> - 7Remove from tab order:
<div tabIndex={-1}> - 8Skip to content:
<a href="#main" class="sr-only focus:not-sr-only"> - 9Focus visible:
<button class="focus-visible:ring-2">
visual accessibility
Design for all vision abilities with proper contrast and clear focus indicators.
- 1Normal text: 4.5:1 contrast ratio minimum
- 2Large text (18.66px+): 3:1 contrast ratio minimum
- 3UI components: 3:1 contrast ratio for borders, icons
- 4Don't rely on color alone to convey information
- 5Allow text resizing up to 200%
- 6Sufficient line height:
line-height: 1.5 - 7Proper heading hierarchy: h1, h2, h3...
- 8Visible focus ring:
outline: 2px solid blue; outline-offset: 2px;
accessible forms
Proper labels and error handling are essential for accessible forms.
- 1Associate labels:
<label htmlFor="email">Email</label><input id="email" /> - 2Required fields:
<input required aria-required="true" /> - 3Error messages:
<input aria-invalid={hasError} aria-describedby="error" /> - 4Descriptive errors:
<p id="error" role="alert">Please enter valid email</p> - 5Group inputs:
<fieldset><legend>Shipping Address</legend></fieldset>
common mistakes
Avoid these accessibility pitfalls that break the experience for users.
- 1Using divs as buttons
Use <button> instead of <div onClick> - 2Missing alt text on images
Always include alt="" for decorative images - 3Low contrast text
Test with WebAIM or Lighthouse - 4Placeholder as label
Use proper <label> elements - 5Auto-playing media
Provide play/pause controls - 6Testing tools: axe DevTools, WAVE, Lighthouse, NVDA, VoiceOver