accessibility-checklist

Accessibility Checklist (WCAG AA)

Keyboard Navigation

✅ Requirements

Tab Order:

• All interactive elements reachable via Tab
• Logical tab order (left-to-right, top-to-bottom)
• Skip links provided for repetitive navigation
• No keyboard traps

Interactive Elements:

• Buttons activate with Enter/Space
• Links activate with Enter
• Form inputs accessible via Tab
• Dropdowns navigable with Arrow keys
• Modals closable with Escape

Testing:

1. Unplug mouse
2. Navigate entire dashboard using only keyboard
3. Verify all features accessible
4. Check tab order is logical

---

Focus Indicators

✅ Requirements

Visibility:

• Focus indicators visible on ALL interactive elements
• Minimum 2px outline or 3px box-shadow
• Sufficient color contrast (3:1 minimum)
• Not removed with outline: none unless replaced

Implementation:

/* Good focus states */
.btn:focus-visible {
  outline: 3px solid var(--tableau-blue);
  outline-offset: 3px;
}

.data-toggle__option:focus-visible {
  outline: 2px solid var(--data-blue-primary);
  outline-offset: 2px;
  z-index: 1;
}

/* Chart canvas focus */
canvas:focus-visible {
  outline: 2px solid var(--data-cyan-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

---

Color Contrast

✅ Requirements (WCAG AA)

Normal Text (< 18px):

• Minimum 4.5:1 contrast ratio

Large Text (≥ 18px or 14px bold):

• Minimum 3:1 contrast ratio

UI Components:

• Buttons: 3:1 minimum
• Form inputs: 3:1 border contrast
• Icons: 3:1 against background

Verified Combinations:

Foreground	Background	Ratio	Status
White	Tableau Blue (#0176D3)	4.83:1	✅ AA
White	Tableau Navy (#032D60)	13.55:1	✅ AAA
Text (#333)	White	12.63:1	✅ AAA
Data Cyan (#33BBEE)	White	2.4:1	❌ (use dark text)

Testing Tool:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/