Quick Start

CSS
/* Color contrast compliant palette */
:root {
  --text-primary: #1a1a1a; /* 16.94:1 on white */
  --text-secondary: #4a4a4a; /* 9.64:1 on white */
  --link-color: #0066cc; /* 7.14:1 on white */
  --button-bg: #005299; /* 4.57:1 on white text */
  --focus-ring: #0066cc;
  --error-text: #d63031; /* 5.48:1 on white */
}

/* Focus states */
.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

Workflow

Progress:

• Apply color contrast requirements
• Design focus states
• Plan keyboard navigation
• Add ARIA labels where needed
• Define alt text strategy
• Choose semantic HTML
• Run accessibility audit

• Body text (16px-): 4.5:1 minimum ratio
• Large text (18px+ regular, 14px+ bold): 3:1 minimum ratio
• UI components: 3:1 for borders, icons, form controls
• Interactive states: Maintain ratios on hover/focus/active

• Visible focus rings on all interactive elements
• 2px minimum outline thickness
• High contrast color (not just darker/lighter)
• Never remove focus without providing alternative
• Avoid color-only indication

• Follow logical DOM sequence (left-to-right, top-to-bottom)
• Add skip links for main content
• Implement focus trapping in modals/dropdowns
• Ensure all interactive elements are keyboard accessible

• Icon-only buttons: aria-label="Close dialog"
• Form inputs: aria-describedby for help text
• Complex widgets: role, aria-expanded, aria-controls
• Avoid redundant labels (don't duplicate visible text)

• Informational images: Descriptive alt text
• Decorative images: alt="" (empty)
• Complex images: Alt + detailed description nearby
• Icons with text: aria-hidden="true" on icon

HTML
<!-- Use semantic elements to reduce ARIA -->
<nav>, <main>, <section>, <article>, <aside>
<h1-h6> for heading hierarchy
<button> vs <div role="button">
<input type="email"> vs <input type="text">

Examples

Example 1: Button Color Contrast Input: Blue button #3498db on white background Output: Fails at 2.96:1 ratio. Use #2980b9 for 4.51:1 compliance

Example 2: Focus State Input: Subtle shadow on focus Output: Add 2px #0066cc outline + 2px offset for keyboard users

Example 3: Icon Button Input: Search icon without text Output: <button aria-label="Search products"><svg aria-hidden="true">...</svg></button>

Best Practices

• Test with actual contrast checkers (WebAIM, Stark)
• Use browser dev tools to verify focus order
• Test keyboard navigation without mouse
• Validate HTML for semantic structure
• Consider dark mode contrast requirements
• Design error states with sufficient contrast
• Provide multiple ways to convey information (not just color)

Common Pitfalls

• Using placeholder text as labels
• Color-only error indication
• Missing focus states on custom components
• Insufficient contrast on disabled states
• Over-using ARIA instead of semantic HTML
• Forgetting about Windows High Contrast Mode
• Not testing actual keyboard navigation flow
• Assuming screen readers read everything visually apparent