irahardianto Accessibility Principles
Baseline: WCAG 2.1 Level AA.
Semantic HTML
- Use
<nav>,<main>,<article>,<section>,<button>,<form>over<div>/<span> - One
<h1>per page, proper hierarchy (no skipping) <label>associated with inputs (for/id or wrapping)<table>for data only, never layout
Keyboard
- All interactive elements Tab-reachable
- Logical focus order
- Visible focus indicators (never
outline: nonewithout replacement) - Custom components: arrows for menus, Escape for modals
- No keyboard traps
ARIA
- First rule: don't use ARIA if native HTML suffices
aria-label/aria-labelledbyfor elements without visible textaria-livefor dynamic updates (toasts, notifications)roleonly for custom widgets lacking native semanticsaria-expanded,aria-controlsfor disclosures
Color & Contrast
- Text: min 4.5:1 (AA normal), 3:1 (AA large)
- Never color alone for meaning (add icons/text/patterns)
- Light + dark themes with proper contrast
Images & Media
alttext on all<img>(alt=""for decorative)- Video captions/transcripts
- Accessible audio controls
Forms
- Errors associated with inputs (
aria-describedby) - Required: visual + programmatic (
required) - Validation errors announced to screen readers
Checklist
- Keyboard reachable
- Visible focus indicators
- Semantic HTML (no div buttons)
- Heading hierarchy correct
- Contrast AA (4.5:1)
- Color not sole indicator
- Images have alt text
- Form inputs labeled
- ARIA correct (native first)
Related
- Core Design GEMINI.md § Core Design Principles
- Security GEMINI.md § Security Principles (XSS)
- Testing GEMINI.md § Testing Strategy (a11y testing)