From f13687c0a23a439c6ef623a0e9e1f525d88b446d Mon Sep 17 00:00:00 2001 From: Darius Cepulis Date: Wed, 18 Mar 2026 10:49:01 -0500 Subject: [PATCH 1/5] docs(site): add accessibility concepts page --- .../content/docs/concepts/accessibility.mdx | 52 +++++++++++++++++++ site/src/docs.config.ts | 1 + 2 files changed, 53 insertions(+) create mode 100644 site/src/content/docs/concepts/accessibility.mdx diff --git a/site/src/content/docs/concepts/accessibility.mdx b/site/src/content/docs/concepts/accessibility.mdx new file mode 100644 index 000000000..d15dfc37b --- /dev/null +++ b/site/src/content/docs/concepts/accessibility.mdx @@ -0,0 +1,52 @@ +--- +title: Accessibility +description: How Video.js approaches accessible media playback, covering standards, ARIA, keyboard, captions, and color and motion preferences. +--- + +import DocsLink from '@/components/docs/DocsLink.astro'; + +Video.js's built-in components handle ARIA semantics, keyboard interaction, focus management, and user preferences so your player works for everyone out of the box. Accessibility is an ongoing effort we actively invest in. The W3C WAI guides on [making audio and video media accessible](https://www.w3.org/WAI/media/av/) and [accessible media players](https://www.w3.org/WAI/media/av/player/) are good starting points for understanding what accessible media playback involves. + +## Standards we target + +These are the standards we build toward: + +- [**WAI-ARIA 1.2**](https://www.w3.org/TR/wai-aria-1.2/) defines roles, states, and properties that assistive technologies use to understand controls. +- [**WCAG 2.2**](https://www.w3.org/TR/WCAG22/) provides success criteria for perceivable, operable, understandable, and robust web content. +- [**CVAA**](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa) is a U.S. federal law requiring closed captioning and accessible controls for video content. + +## ARIA roles and labels + +Built-in components set appropriate ARIA roles and attributes. Sliders use `role="slider"` with `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `aria-orientation`. Popovers and tooltips use `role="dialog"` with `aria-expanded`, `aria-haspopup`, and `aria-controls` on their triggers. Controls groups use `role="group"` when labeled. + +Decorative elements like time separators and thumbnail previews are hidden from assistive technologies with `aria-hidden="true"`. Slider value displays use `aria-live="off"` to prevent constant announcements during drag operations. + +You should verify that ARIA labels are contextually correct for your content and language. See each component's reference page for the specific ARIA attributes it sets. + +## Keyboard interaction + +All interactive components support keyboard control. Sliders respond to: + +- **Arrow keys** for stepping through values +- **Shift + Arrow** for larger steps +- **Home** and **End** to jump to minimum and maximum +- **Page Up** and **Page Down** for large increments +- **0 through 9** to jump to a percentage (0% through 90%) + +Popovers and tooltips close with **Escape**. The [WAI-ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) documents keyboard patterns for common widget types. + +## Focus management + +Interactive elements manage their `tabindex` based on disabled state: `0` when enabled, `-1` when disabled. Popover triggers are associated with their popups through `aria-controls` and `aria-expanded`. + +## Captions and subtitles + +The text tracks feature supports captions and subtitles. Closed captions in the U.S. are governed by the FCC under the CVAA, and non-compliance carries legal risk. + +## Color scheme + +Built-in skins adapt to `prefers-color-scheme`. Borders, backgrounds, and text colors adjust automatically through CSS custom properties. Custom components can use the same design tokens. See Skins for details. + +## Reduced motion + +Built-in skins respect `prefers-reduced-motion`. When a user prefers reduced motion, animations shorten, blur and scale effects are removed, and easing is simplified. Caption transitions reduce to near-instant. Follow the same pattern in your custom components. diff --git a/site/src/docs.config.ts b/site/src/docs.config.ts index ff24ec259..f62af9bfc 100644 --- a/site/src/docs.config.ts +++ b/site/src/docs.config.ts @@ -32,6 +32,7 @@ export const sidebar: Sidebar = [ { slug: 'concepts/skins' }, { slug: 'concepts/presets' }, { slug: 'concepts/ui-components' }, + { slug: 'concepts/accessibility' }, ], }, { From d314125946a72227792fdcbe171ff89fba64fe0b Mon Sep 17 00:00:00 2001 From: Darius Cepulis Date: Wed, 18 Mar 2026 11:20:01 -0500 Subject: [PATCH 2/5] docs(site): expand accessibility guide with contrast, touch, and testing sections Add ADA to standards list, new sections for color contrast, touch targets, and assistive technology testing. Simplify existing ARIA, keyboard, and focus sections to use examples instead of exhaustive lists, deferring details to each component's reference page. Fix inaccuracies in pre-existing text (tooltip role, tabindex scope). Co-Authored-By: Claude Opus 4.6 (1M context) --- .../content/docs/concepts/accessibility.mdx | 49 +++++++++++-------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/site/src/content/docs/concepts/accessibility.mdx b/site/src/content/docs/concepts/accessibility.mdx index d15dfc37b..9484fb067 100644 --- a/site/src/content/docs/concepts/accessibility.mdx +++ b/site/src/content/docs/concepts/accessibility.mdx @@ -1,47 +1,48 @@ --- title: Accessibility -description: How Video.js approaches accessible media playback, covering standards, ARIA, keyboard, captions, and color and motion preferences. +description: How Video.js approaches accessible media playback, covering standards, ARIA, keyboard, captions, contrast, touch targets, and user preferences. --- import DocsLink from '@/components/docs/DocsLink.astro'; -Video.js's built-in components handle ARIA semantics, keyboard interaction, focus management, and user preferences so your player works for everyone out of the box. Accessibility is an ongoing effort we actively invest in. The W3C WAI guides on [making audio and video media accessible](https://www.w3.org/WAI/media/av/) and [accessible media players](https://www.w3.org/WAI/media/av/player/) are good starting points for understanding what accessible media playback involves. +Video.js's built-in components handle accessibility so your player works for everyone out of the box. ## Standards we target -These are the standards we build toward: - - [**WAI-ARIA 1.2**](https://www.w3.org/TR/wai-aria-1.2/) defines roles, states, and properties that assistive technologies use to understand controls. - [**WCAG 2.2**](https://www.w3.org/TR/WCAG22/) provides success criteria for perceivable, operable, understandable, and robust web content. - [**CVAA**](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa) is a U.S. federal law requiring closed captioning and accessible controls for video content. +- [**ADA**](https://www.ada.gov/) is a U.S. civil rights law that prohibits disability discrimination. Courts increasingly apply it to websites, including video players. ## ARIA roles and labels -Built-in components set appropriate ARIA roles and attributes. Sliders use `role="slider"` with `aria-valuemin`, `aria-valuemax`, `aria-valuenow`, and `aria-orientation`. Popovers and tooltips use `role="dialog"` with `aria-expanded`, `aria-haspopup`, and `aria-controls` on their triggers. Controls groups use `role="group"` when labeled. - -Decorative elements like time separators and thumbnail previews are hidden from assistive technologies with `aria-hidden="true"`. Slider value displays use `aria-live="off"` to prevent constant announcements during drag operations. +Built-in components set appropriate ARIA roles and attributes automatically. For example, sliders render with `role="slider"` and value attributes, buttons update their `aria-label` based on player state, and decorative elements like time separators are hidden with `aria-hidden="true"`. -You should verify that ARIA labels are contextually correct for your content and language. See each component's reference page for the specific ARIA attributes it sets. +Verify that ARIA labels are contextually correct for your content and language. Each component's reference page documents the specific attributes it sets. ## Keyboard interaction -All interactive components support keyboard control. Sliders respond to: - -- **Arrow keys** for stepping through values -- **Shift + Arrow** for larger steps -- **Home** and **End** to jump to minimum and maximum -- **Page Up** and **Page Down** for large increments -- **0 through 9** to jump to a percentage (0% through 90%) - -Popovers and tooltips close with **Escape**. The [WAI-ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) documents keyboard patterns for common widget types. +All interactive components support keyboard control. For example, buttons activate with **Enter** and **Space**, sliders respond to **Arrow keys**, **Home**, **End**, and **Page Up/Down**, and popovers close with **Escape**. Each component's reference page lists its full keyboard support. The [WAI-ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) documents the keyboard patterns we follow. ## Focus management -Interactive elements manage their `tabindex` based on disabled state: `0` when enabled, `-1` when disabled. Popover triggers are associated with their popups through `aria-controls` and `aria-expanded`. +Interactive elements are focusable when enabled and removed from the tab order when disabled. Popover triggers are associated with their popups through `aria-controls` and `aria-expanded`. ## Captions and subtitles -The text tracks feature supports captions and subtitles. Closed captions in the U.S. are governed by the FCC under the CVAA, and non-compliance carries legal risk. +The text tracks feature supports captions and subtitles. Closed captions in the U.S. are governed by the FCC under the [CVAA](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa), and non-compliance carries legal risk. + +## Color contrast + +Built-in skins respond to `prefers-contrast: more` by increasing background opacity on overlays and controls. They also respond to `prefers-reduced-transparency: reduce` by raising baseline opacity so text stays readable over video. Both are handled through CSS media queries, so the player follows whatever the user has set at the OS level. + +Custom components should test against [WCAG 1.4.3 (contrast minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) and [1.4.11 (non-text contrast)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) to make sure controls and text remain visible over video content. + +## Touch targets + +Built-in controls use rem-based sizing so they scale with the user's font size preference. All interactive elements set `touch-action: manipulation` to eliminate tap delay on touch devices. Skins also use `pointer: fine` and `pointer: coarse` to adapt transitions for mouse vs touch input. + +If you build custom controls, target at least 24x24 CSS pixels per [WCAG 2.5.8 (target size minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum). Larger is better on touch-first surfaces. ## Color scheme @@ -49,4 +50,12 @@ Built-in skins adapt to `prefers-color-scheme`. Borders, backgrounds, and text c ## Reduced motion -Built-in skins respect `prefers-reduced-motion`. When a user prefers reduced motion, animations shorten, blur and scale effects are removed, and easing is simplified. Caption transitions reduce to near-instant. Follow the same pattern in your custom components. +Built-in skins respect `prefers-reduced-motion`. When a user prefers reduced motion, animations and transitions are simplified or removed. Follow the same pattern in your custom components. + +## Test with assistive technology + +Automated tools catch markup issues but miss real usability problems. Test your player with a screen reader (VoiceOver on macOS, NVDA or JAWS on Windows) and keyboard-only navigation. Verify that every control is reachable, operable, and announces its purpose and state. The [WAI "Easy Checks"](https://www.w3.org/WAI/test-evaluate/preliminary/) are a good starting point. + +## Further reading + +Interested in learning more? The W3C WAI guides on [making audio and video media accessible](https://www.w3.org/WAI/media/av/) and [accessible media players](https://www.w3.org/WAI/media/av/player/) are good starting points for understanding what accessible media playback involves. From 34cf4ea80ddf74b18efd573d02d7e05eaee639eb Mon Sep 17 00:00:00 2001 From: Darius Cepulis Date: Wed, 18 Mar 2026 11:26:42 -0500 Subject: [PATCH 3/5] docs(site): link jargon and tools in accessibility guide Link assistive technologies, screen readers, FCC, VoiceOver, NVDA, JAWS, and all CSS media queries to their reference pages so beginners can learn more without leaving the guide. Co-Authored-By: Claude Opus 4.6 (1M context) --- site/src/content/docs/concepts/accessibility.mdx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/site/src/content/docs/concepts/accessibility.mdx b/site/src/content/docs/concepts/accessibility.mdx index 9484fb067..2370a8c8a 100644 --- a/site/src/content/docs/concepts/accessibility.mdx +++ b/site/src/content/docs/concepts/accessibility.mdx @@ -9,7 +9,7 @@ Video.js's built-in components handle accessibility so your player works for eve ## Standards we target -- [**WAI-ARIA 1.2**](https://www.w3.org/TR/wai-aria-1.2/) defines roles, states, and properties that assistive technologies use to understand controls. +- [**WAI-ARIA 1.2**](https://www.w3.org/TR/wai-aria-1.2/) defines roles, states, and properties that [assistive technologies](https://www.w3.org/WAI/people-use-web/tools-techniques/) use to understand controls. - [**WCAG 2.2**](https://www.w3.org/TR/WCAG22/) provides success criteria for perceivable, operable, understandable, and robust web content. - [**CVAA**](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa) is a U.S. federal law requiring closed captioning and accessible controls for video content. - [**ADA**](https://www.ada.gov/) is a U.S. civil rights law that prohibits disability discrimination. Courts increasingly apply it to websites, including video players. @@ -26,35 +26,35 @@ All interactive components support keyboard control. For example, buttons activa ## Focus management -Interactive elements are focusable when enabled and removed from the tab order when disabled. Popover triggers are associated with their popups through `aria-controls` and `aria-expanded`. +Interactive elements are focusable when enabled and removed from the [tab order](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) when disabled. Popover triggers are associated with their popups through `aria-controls` and `aria-expanded`. ## Captions and subtitles -The text tracks feature supports captions and subtitles. Closed captions in the U.S. are governed by the FCC under the [CVAA](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa), and non-compliance carries legal risk. +The text tracks feature supports captions and subtitles. Closed captions in the U.S. are governed by the [FCC](https://www.fcc.gov/) under the [CVAA](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa), and non-compliance carries legal risk. ## Color contrast -Built-in skins respond to `prefers-contrast: more` by increasing background opacity on overlays and controls. They also respond to `prefers-reduced-transparency: reduce` by raising baseline opacity so text stays readable over video. Both are handled through CSS media queries, so the player follows whatever the user has set at the OS level. +Built-in skins respond to [`prefers-contrast: more`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) by increasing background opacity on overlays and controls. They also respond to [`prefers-reduced-transparency: reduce`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) by raising baseline opacity so text stays readable over video. Both are handled through CSS media queries, so the player follows whatever the user has set at the OS level. Custom components should test against [WCAG 1.4.3 (contrast minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) and [1.4.11 (non-text contrast)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) to make sure controls and text remain visible over video content. ## Touch targets -Built-in controls use rem-based sizing so they scale with the user's font size preference. All interactive elements set `touch-action: manipulation` to eliminate tap delay on touch devices. Skins also use `pointer: fine` and `pointer: coarse` to adapt transitions for mouse vs touch input. +Built-in controls use rem-based sizing so they scale with the user's font size preference. All interactive elements set [`touch-action: manipulation`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) to eliminate tap delay on touch devices. Skins also use [`pointer: fine` and `pointer: coarse`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) to adapt transitions for mouse vs touch input. If you build custom controls, target at least 24x24 CSS pixels per [WCAG 2.5.8 (target size minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum). Larger is better on touch-first surfaces. ## Color scheme -Built-in skins adapt to `prefers-color-scheme`. Borders, backgrounds, and text colors adjust automatically through CSS custom properties. Custom components can use the same design tokens. See Skins for details. +Built-in skins adapt to [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). Borders, backgrounds, and text colors adjust automatically through CSS custom properties. Custom components can use the same design tokens. See Skins for details. ## Reduced motion -Built-in skins respect `prefers-reduced-motion`. When a user prefers reduced motion, animations and transitions are simplified or removed. Follow the same pattern in your custom components. +Built-in skins respect [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). When a user prefers reduced motion, animations and transitions are simplified or removed. Follow the same pattern in your custom components. ## Test with assistive technology -Automated tools catch markup issues but miss real usability problems. Test your player with a screen reader (VoiceOver on macOS, NVDA or JAWS on Windows) and keyboard-only navigation. Verify that every control is reachable, operable, and announces its purpose and state. The [WAI "Easy Checks"](https://www.w3.org/WAI/test-evaluate/preliminary/) are a good starting point. +Automated tools catch markup issues but miss real usability problems. Test your player with a [screen reader](https://www.w3.org/WAI/people-use-web/tools-techniques/) ([VoiceOver](https://support.apple.com/guide/voiceover/welcome/mac) on macOS, [NVDA](https://www.nvaccess.org/about-nvda/) or [JAWS](https://www.freedomscientific.com/products/software/jaws/) on Windows) and keyboard-only navigation. Verify that every control is reachable, operable, and announces its purpose and state. The [WAI "Easy Checks"](https://www.w3.org/WAI/test-evaluate/preliminary/) are a good starting point. ## Further reading From 6e5d0ef275876a466296ff1de71d876fd05f32b9 Mon Sep 17 00:00:00 2001 From: Darius Cepulis Date: Wed, 18 Mar 2026 11:32:19 -0500 Subject: [PATCH 4/5] docs(site): tighten accessibility guide prose Remove redundant media query explanation from color contrast section, trim filler from further reading intro. Co-Authored-By: Claude Opus 4.6 (1M context) --- site/src/content/docs/concepts/accessibility.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/site/src/content/docs/concepts/accessibility.mdx b/site/src/content/docs/concepts/accessibility.mdx index 2370a8c8a..e4dcf9ab8 100644 --- a/site/src/content/docs/concepts/accessibility.mdx +++ b/site/src/content/docs/concepts/accessibility.mdx @@ -34,7 +34,7 @@ The text tracks feature Date: Thu, 19 Mar 2026 14:07:27 -0500 Subject: [PATCH 5/5] wip: one last pass --- .../content/docs/concepts/accessibility.mdx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/site/src/content/docs/concepts/accessibility.mdx b/site/src/content/docs/concepts/accessibility.mdx index e4dcf9ab8..1e7c843be 100644 --- a/site/src/content/docs/concepts/accessibility.mdx +++ b/site/src/content/docs/concepts/accessibility.mdx @@ -5,7 +5,7 @@ description: How Video.js approaches accessible media playback, covering standar import DocsLink from '@/components/docs/DocsLink.astro'; -Video.js's built-in components handle accessibility so your player works for everyone out of the box. +Video.js handles accessibility out of the box so your player works for everyone. ## Standards we target @@ -16,41 +16,41 @@ Video.js's built-in components handle accessibility so your player works for eve ## ARIA roles and labels -Built-in components set appropriate ARIA roles and attributes automatically. For example, sliders render with `role="slider"` and value attributes, buttons update their `aria-label` based on player state, and decorative elements like time separators are hidden with `aria-hidden="true"`. +Components set ARIA roles and attributes automatically. For example, sliders render with `role="slider"` and value attributes, buttons update their `aria-label` based on player state, and decorative elements like time separators are hidden with `aria-hidden="true"`. -Verify that ARIA labels are contextually correct for your content and language. Each component's reference page documents the specific attributes it sets. +Verify that labels are contextually correct for your content and language. Each component's reference page documents the attributes it sets. ## Keyboard interaction -All interactive components support keyboard control. For example, buttons activate with **Enter** and **Space**, sliders respond to **Arrow keys**, **Home**, **End**, and **Page Up/Down**, and popovers close with **Escape**. Each component's reference page lists its full keyboard support. The [WAI-ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) documents the keyboard patterns we follow. +All interactive components support keyboard control. For example, buttons activate with Enter and Space, sliders respond to Arrow keys, Home, End, and Page Up/Page Down, and popovers close with Escape. Each component's reference page lists its full keyboard support. We follow the patterns in the [WAI-ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/). ## Focus management -Interactive elements are focusable when enabled and removed from the [tab order](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) when disabled. Popover triggers are associated with their popups through `aria-controls` and `aria-expanded`. +Interactive elements are focusable when enabled and leave the [tab order](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex) when disabled. Popover triggers link to their popups with `aria-controls` and `aria-expanded`. ## Captions and subtitles -The text tracks feature supports captions and subtitles. Closed captions in the U.S. are governed by the [FCC](https://www.fcc.gov/) under the [CVAA](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa), and non-compliance carries legal risk. +The text tracks feature supports captions and subtitles. Closed captions in the U.S. are governed by the [FCC](https://www.fcc.gov/) under the [CVAA](https://www.fcc.gov/consumers/guides/21st-century-communications-and-video-accessibility-act-cvaa), which requires both captioning and viewer control over caption appearance (font, size, color, opacity, and edge style). Non-compliance carries legal risk. The [WebKit Caption Display Settings explainer](https://github.com/WebKit/explainers/tree/main/CaptionDisplaySettings) tracks how browsers are bringing these customization preferences into the web platform natively. ## Color contrast -Built-in skins respond to [`prefers-contrast: more`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) by increasing background opacity on overlays and controls. They also respond to [`prefers-reduced-transparency: reduce`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) by raising baseline opacity so text stays readable over video. +Skins respond to [`prefers-contrast: more`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast) by increasing background opacity on overlays and controls, and to [`prefers-reduced-transparency: reduce`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-transparency) by raising baseline opacity so text stays readable over video. -Custom components should test against [WCAG 1.4.3 (contrast minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) and [1.4.11 (non-text contrast)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) to make sure controls and text remain visible over video content. +Video is harder than most UI for contrast because the background is always changing. A control that passes checks over a dark frame can disappear over a bright title card. Automated tools won't catch this, so test your controls against light, dark, and mixed video content. Custom components should test against [WCAG 1.4.3 (contrast minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum) and [1.4.11 (non-text contrast)](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast). ## Touch targets -Built-in controls use rem-based sizing so they scale with the user's font size preference. All interactive elements set [`touch-action: manipulation`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) to eliminate tap delay on touch devices. Skins also use [`pointer: fine` and `pointer: coarse`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) to adapt transitions for mouse vs touch input. +Controls use rem-based sizing so they scale with the user's font size preference. All interactive elements set [`touch-action: manipulation`](https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action) to eliminate tap delay on touch devices. Skins use [`pointer: fine` and `pointer: coarse`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer) to adapt transitions for mouse and touch input. If you build custom controls, target at least 24x24 CSS pixels per [WCAG 2.5.8 (target size minimum)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum). Larger is better on touch-first surfaces. ## Color scheme -Built-in skins adapt to [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). Borders, backgrounds, and text colors adjust automatically through CSS custom properties. Custom components can use the same design tokens. See Skins for details. +Skins adapt to [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme). Borders, backgrounds, and text colors adjust through CSS custom properties. Custom components can use the same design tokens. See Skins for details. ## Reduced motion -Built-in skins respect [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion). When a user prefers reduced motion, animations and transitions are simplified or removed. Follow the same pattern in your custom components. +Skins respect [`prefers-reduced-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) by simplifying or removing animations and transitions. Follow the same pattern in custom components. ## Test with assistive technology @@ -58,4 +58,4 @@ Automated tools catch markup issues but miss real usability problems. Test your ## Further reading -The W3C WAI guides on [making audio and video media accessible](https://www.w3.org/WAI/media/av/) and [accessible media players](https://www.w3.org/WAI/media/av/player/) cover the full picture of what accessible media playback involves. +The W3C WAI guides on [making audio and video media accessible](https://www.w3.org/WAI/media/av/) and [accessible media players](https://www.w3.org/WAI/media/av/player/) go deeper on everything covered here.