Accessibility

WCAG compliance, ARIA patterns, keyboard navigation, and screen reader support.

Accessibility

Accessibility requirements for all pudge-ui components — color contrast ratios, focus management, screen reader support, and keyboard interaction patterns.

Color Contrast

All text/background combinations meet WCAG AA minimum (4.5:1 for normal text):

  • --text-primary on --bg-base: 11.2:1 (dark), 12.8:1 (light)
  • --text-secondary on --bg-base: 5.1:1 (dark), 5.8:1 (light)
  • --amber on --bg-inset: 6.3:1

Focus Management

  • Use native <button> elements for all interactive controls
  • Browser default focus rings are preserved (not overridden)
  • For custom controls (toggles, dials), add tabindex="0" and role attributes

Screen Reader Text

<span class="sr-only">Description for screen readers</span>

Uses the standard visually-hidden technique (1x1px, overflow hidden, clip rect).

Keyboard Interaction Patterns

  • Buttons: Enter/Space to activate
  • Toggles: Space to toggle
  • Tabs: Arrow keys to navigate, Enter to select
  • Steppers: Arrow keys to increment/decrement
  • Accordion: Enter/Space to expand/collapse

WCAG AA minimum. Physical-looking doesn't mean inaccessible.

Pudge