Accessibility Checklist

Requirements for All Components

• Color is never the only means of conveying information
• All interactive elements reachable by keyboard (Tab, Shift+Tab)
• Focus indicator always visible — never outline: none without a custom replacement
• Touch targets minimum 44×44px on mobile
• Text contrast ≥ 4.5:1 (normal text), ≥ 3:1 (large text ≥18pt or 14pt bold)
• Non-text UI contrast ≥ 3:1 (borders, icons, focus rings)
• All images have descriptive alt text or alt="" if purely decorative
• Page has a logical heading hierarchy (H1 → H2 → H3)

Contrast Ratio Reference

Button

• Contrast ≥ 4.5:1 all states — Primary: white on #1955A6 = 4.8:1 ✓
• Focus ring: 3px #A8C4E4 outside stroke always visible
• Disabled: use aria-disabled='true' not disabled attr (stays keyboard-focusable)
• Icon-only buttons: aria-label required
• Non-button element: add role='button' + keyboard handler

Input

• Every input has a visible <label> — never use placeholder as label
• Error state: aria-invalid='true' + aria-describedby → error message
• Helper text: linked via aria-describedby
• Required fields: aria-required='true' + visual indicator (not color alone)
• Focus ring: 2px brand-primary border on :focus-visible

Checkbox

• Native <input type='checkbox'> or role='checkbox' + aria-checked
• Indeterminate state: aria-checked='mixed'
• Group: wrap in <fieldset> with <legend>
• Click target minimum 24×24px

Radio

• Group wrapped in <fieldset> with <legend> describing the question
• Use native <input type='radio'> inside the group
• Arrow keys navigate within group — native browser behavior
• Group error: aria-invalid on the fieldset

Toggle

• role='switch' + aria-checked='true/false'
• Visible label always present alongside toggle
• State announced on change via live region or updated aria-label
• Knob vs track contrast ≥ 3:1

Modal

• Focus trapped inside modal when open (Tab/Shift+Tab cycle within)
• Focus moves to modal header on open; returns to trigger on close
• role='dialog' + aria-modal='true' + aria-labelledby → modal title
• Escape key closes modal
• Backdrop click closes modal
• Scrollable content: overflow-y: auto on modal-body

Dropdown

• Trigger: aria-haspopup='listbox' + aria-expanded='true/false'
• Menu: role='listbox' or role='menu'
• Items: role='option' or role='menuitem'
• Arrow keys navigate items; Enter selects; Escape closes
• Selected item: aria-selected='true'

TabBar

• role='tablist' on container; role='tab' on each tab; role='tabpanel' on content
• Active tab: aria-selected='true'; all others aria-selected='false'
• Tab panel: aria-labelledby pointing to its tab id
• Arrow keys navigate tabs (left/right within tablist)
• Disabled tab: aria-disabled='true'

Navbar

• Wrapped in <nav> with aria-label='Main navigation'
• Current page: aria-current='page' on active link
• Skip link before navbar: 'Skip to main content'
• Mobile toggle: aria-expanded + aria-controls

Alert

• role='alert' for error/warning (live region, assertive announce)
• role='status' for info/success (live region, polite announce)
• Dismiss button: aria-label='Dismiss alert'
• Icon is decorative: aria-hidden='true'

Badge

• Decorative badges: aria-hidden='true'
• Meaningful (counts, status): provide text alternative in context
• Count badges in tabs: tab label should include count, e.g. 'All (128)'

DataTable

• Use <table> element with <th scope='col'> for column headers
• Sortable columns: aria-sort='ascending / descending / none'
• Table caption or aria-label on the <table>
• Loading state: aria-busy='true' on the table
• Empty state: descriptive message in <tbody>
• Row actions: aria-label includes row context

Avatar

• Decorative: aria-hidden='true' on the entire element
• Interactive (links to profile): aria-label='View [Name]'s profile'
• Text initials: aria-hidden='true' on the text element

Card

• Interactive cards: wrap in <a> or <button>
• Focus ring visible on interactive card wrapper
• Images inside: meaningful alt text or alt='' if decorative