docs(site): add accessibility concepts page#1007
Merged
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for vjs10-site ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📦 Bundle Size Report🎨 @videojs/html — no changesPresets (7)
Media (5)
Players (3)
Skins (16)
UI Components (21)
Sizes are marginal over the root entry point. ⚛️ @videojs/react — no changesPresets (7)
Media (4)
Skins (14)
UI Components (18)
Sizes are marginal over the root entry point. 🧩 @videojs/core — no changesEntries (6)
🏷️ @videojs/element — no changesEntries (2)
📦 @videojs/store — no changesEntries (3)
🔧 @videojs/utils — no changesEntries (10)
📦 @videojs/spf — no changesEntries (3)
ℹ️ How to interpretAll sizes are standalone totals (minified + brotli).
Run |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new “Accessibility” concepts page to the docs site, documenting the accessibility standards and interaction patterns Video.js targets, and exposes it via the Concepts sidebar navigation.
Changes:
- Added new
concepts/accessibilityMDX guide covering standards, ARIA, keyboard interaction, focus, captions, color scheme, and reduced motion. - Added the new page to the Concepts section of the docs sidebar.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.
| File | Description |
|---|---|
site/src/docs.config.ts |
Adds concepts/accessibility to the Concepts sidebar list. |
site/src/content/docs/concepts/accessibility.mdx |
Introduces the new accessibility concepts documentation page. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
…ing 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) <noreply@anthropic.com>
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) <noreply@anthropic.com>
Remove redundant media query explanation from color contrast section, trim filler from further reading intro. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
cjpillsbury
reviewed
Mar 19, 2026
|
|
||
| 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. | ||
|
|
||
| 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. |
Collaborator
There was a problem hiding this comment.
common "gotcha" that might be worth calling out for customizers - folks often forget to consider the contrast of their controls with the underlying media, which changes. we, e.g., used big buck bunny's title panel to make sure mostly white video would still be usable. Harder to catch with A11Y tools.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Add an accessibility concepts page to the docs site covering the standards Video.js targets (WAI-ARIA, WCAG, CVAA), built-in ARIA roles and labels, keyboard interaction patterns, focus management, captions, and color scheme / reduced motion preferences.