implement-accessible-ui

Give the slider role="slider" with aria-valuemin, aria-valuemax, aria-valuenow, and aria-valuetext, plus an aria-label. Arrow keys adjust by step, PageUp/PageDown by large steps, and Home/End jump to minimum and maximum.

Set tabindex="0" on the active item and tabindex="-1" on all others, so the toolbar is a single tab stop. Arrow keys move focus and update tabindex values, which applies to toolbars, menus, tab lists, and listboxes.

Keep the label constant and convey state with aria-pressed instead. For example a mute button keeps aria-label="Mute" while aria-pressed toggles between true and false, since changing labels breaks the accessible contract.

Use native HTML whenever possible because elements like button include built-in keyboard handling and implicit roles. Add ARIA only when native semantics cannot express the control, since ARIA adds semantics but not behavior.

Removing focus outlines without a visible replacement violates WCAG 2.4.7 because keyboard users cannot see where focus is. Use :focus-visible styles with at least 3:1 contrast, or reduce motion and styling through data attributes instead.

Create one visually hidden region with role="status", aria-live="polite", and aria-atomic="true" present in the DOM on load, then update its text to announce events like play, pause, volume, and seek. Reserve assertive announcements for errors only.