Accessibility

VOXFM is built to be inclusive. These guidelines ensure our components and media interfaces remain usable by everyone, regardless of hardware, software, or sensory abilities.

Color & Contrast

Since VOXFM leans heavily into high-contrast dark modes and muted metadata layers, strict adherence to WCAG contrast ratios is enforced.

  • Text Contrast: Standard body text must maintain a minimum contrast ratio of 4.5:1 against its background. Large text (H1, H2) requires a 3:1 ratio.
  • Non-Text Contrast: UI components, such as custom audio sliders, waveform visualizations, and active component borders, must meet a 3:1 contrast ratio.
  • Color Independence: Never use color as the sole visual means of conveying information, indicating an action, or prompting a response. Always pair color shifts with icons or text labels.

Screen Readers & ARIA

Audio-centric interfaces often rely on icon-only buttons (like play, pause, and skip). These must be properly labeled for assistive technologies.

  • Semantic HTML: Always prefer native HTML elements (<button>, <nav>, <main>) over custom ARIA roles when possible.
  • Aria-Labels: Any icon-only interactive element (e.g., a volume toggle or settings cog) must include an explicitly descriptive aria-label.
  • Live Regions: Use aria-live attributes to announce dynamic content changes, such as a new track loading or a background download completing, without stealing focus.

Keyboard Navigation

Robust keyboard support is critical for power users and users with motor disabilities, especially within media player contexts.

  • Focus Indicators: All interactive elements must have a visible focus ring. VOXFM relies on the global outline-ring/50 utility to ensure consistent focus states.
  • Logical Tab Order: Ensure the DOM structure follows a logical left-to-right, top-to-bottom reading order, mirroring the visual layout.
  • Media Controls: Ensure standard keyboard interactions map to media controls (e.g., Spacebar for Play/Pause, Arrow keys for volume or scrubbing) when focused.

Resources