Accessibility

VP Player ships keyboard-operable controls, screen-reader semantics, caption controls and reduced-motion support, with no configuration required.

Availability: 2.8.0+ · Default behavior — always on

Platform support: All modern desktop and mobile browsers

Related: Playing · Localization · Full configuration

What you get by default

Capability	What it means for your viewers
Keyboard operation	Every control is reachable by Tab and operable without a mouse, including the settings menu, the related-videos panel and the buttons on the error, paywall, registration and age-restriction screens.
Screen-reader semantics	The seekbar and volume control are exposed as sliders with a live position and a spoken time. The settings menu is a real menu with checked and expanded state. Related videos are a list of named buttons.
Spoken state changes	A polite live region announces buffering, recovery, playback errors, caption toggles and quality changes, without moving focus away from what the viewer is doing.
Captions	WebVTT and SRT tracks are rendered as native caption tracks, selectable from the menu or the C key, in three sizes and four styles including yellow-on-black.
Reduced motion	Viewers who ask their system for reduced motion get the player with decorative animation suppressed, while the loading indicator keeps turning so it still reads as active.
Localizable assistive text	Every string a screen reader speaks is part of the lang configuration and can be translated, including the ones never shown on screen.

Keyboard control

Focus reaches the player by Tab, and tabbing reveals the control bar when it has auto-hidden. These keys operate the accessible controls:

Key	Action
Tab / Shift + Tab	Move between controls, revealing the control bar if it is hidden
Enter / Space	Activate the focused control
Escape	Close the settings menu or the related-videos panel, returning focus to the control that opened it
← → on the seekbar	Seek backward or forward
↑ ↓ on the seekbar	Seek backward or forward
← → ↑ ↓ on the volume slider	Raise or lower the volume
↑ ↓ in the settings menu	Move between menu items, wrapping at both ends
Home / End in the settings menu	Jump to the first or last item
→ in the settings menu	Open a submenu, landing on the current selection
← in the settings menu	Return to the parent panel

Opening a panel moves focus into it and closing returns focus to the control that opened it, so a keyboard viewer never loses their place. A closed panel is out of the tab order entirely.

For the playback shortcuts available whenever the player holds focus, see Playing.

Screen reader support

The player exposes its controls with the roles and states assistive technology expects:

• Sliders — the seekbar and volume control report aria-valuenow plus a spoken position, updated live as playback moves. On a livestream the seekbar reports the live label instead of a timestamp.
• Menus — the settings menu is a menu with menu items, radio items and a checkbox, each carrying its checked state, and each submenu row reporting whether it is expanded. Only the open panel is exposed; the closed ones are hidden.
• Lists — related videos are a list whose entries are named with the video title and duration, with the currently playing entry marked as current.
• Live announcements — buffering, recovery, playback errors, caption toggles and quality changes are announced politely, so they never interrupt what the viewer is reading.

Decorative icons and thumbnails are hidden from assistive technology, so a screen reader reads a control's name rather than its artwork.

Captions

Supply caption tracks in video.tracks and the player renders them as native caption tracks. WebVTT is used directly and SRT is converted as it loads.

Viewers choose a track from the settings menu, or toggle captions with the C key. Turn on controls.subtitlesButton to put a caption toggle directly in the control bar.

Caption appearance is adjustable from the subtitle Options panel:

Setting	Choices
Size	Small, Medium, Large
Style	Drop Shadow, Dark, Light, Contrast

Contrast renders yellow text on a black background, the combination many low-vision viewers rely on.

Reduced motion

When a viewer's operating system requests reduced motion, the player suppresses its decorative animation and transitions. The loading spinner is deliberately exempt and keeps turning at a slower rate, so a buffering player still reads as working rather than frozen.

This is scoped to the player, so your own page's motion is untouched.

WCAG 2.2 conformance

The player interface is built against the Web Content Accessibility Guidelines 2.2, Levels A and AA, assessed against the player source and verified with automated browser tests in Chrome and WebKit. This is a vendor self-assessment.

Full means the criterion is met across the player. Partial means it is met across the player with the one exception named in the row.

Criterion	Level	Support	How the player meets it
1.1.1 Non-text Content	A	Partial	Every control in the control bar, settings menu, related panel, next-video card and restriction screens carries a text name, and decorative icons and thumbnails are hidden. The chapters menu is not yet named
1.2.2 Captions (Prerecorded)	A	Full	Caption tracks are rendered as native captions tracks with a selector and a keyboard toggle
1.2.3 Audio Description or Media Alternative	A	Partial	A described audio mix is delivered as an alternate audio track and selected from the Language menu. There is no dedicated description track type
1.3.1 Info and Relationships	A	Partial	Menu, radio, checkbox and list semantics throughout the settings menu and related panel. The subtitle Options view presents Size and Style as one menu rather than two labelled groups
1.4.2 Audio Control	A	Full	Mute and volume are available from the first frame, by pointer and with M
2.1.1 Keyboard	A	Partial	Every control is reachable and operable by keyboard, including both sliders and full arrow navigation in the menu and related panel. The chapters menu is not yet keyboard operable
2.1.2 No Keyboard Trap	A	Full	No part of the player traps focus; Escape leaves every panel
2.1.4 Character Key Shortcuts	A	Partial	Single-key shortcuts are suppressed while a text field has focus, and only the focused player responds. They can be switched off with keyboardShortcuts: false, though not remapped
2.4.3 Focus Order	A	Full	Focus follows the visual order, enters panels on open and returns to the opener on close
2.5.1 Pointer Gestures	A	Full	Seeking and volume respond to a single click as well as a drag
2.5.3 Label in Name	A	Full	Each control's spoken name contains its visible label, so speech input can activate it
3.2.1 On Focus	A	Full	Moving focus never changes context
3.2.2 On Input	A	Full	Changing a setting applies it in place, without moving focus or navigating
3.3.2 Labels or Instructions	A	Full	The password-protected screen's field carries a programmatic label
4.1.2 Name, Role, Value	A	Partial	Name, role and live value across the control bar, both sliders, the settings menu, the related panel, the next-video card, timed links and the restriction screens. The chapters menu is not yet exposed
1.2.5 Audio Description (Prerecorded)	AA	Partial	As 1.2.3 — a described mix is delivered as an alternate audio track
2.4.7 Focus Visible	AA	Partial	A 2px focus ring on every interactive element, including both sliders and the related-video cards. While the end-of-video countdown card is on screen the control bar is faded, so a ring there is not visible
2.4.11 Focus Not Obscured	AA	Full	Tabbing reveals auto-hidden controls and restarts the hide timer
2.5.7 Dragging Movements	AA	Full	Both sliders accept clicks and arrow keys as alternatives to dragging
4.1.3 Status Messages	AA	Full	Playback state changes are announced through a polite live region
2.3.3 Animation from Interactions	AAA	Full	Reduced-motion preferences suppress decorative animation

Configuration

Accessibility behavior is on by default. These properties tune it.

Property	Type	Default	Description
keyboardShortcuts	boolean	true	Single-key playback shortcuts. Set to false to hand those keys back to your page; Tab, Escape and the menu and panel keys keep working.
controls.subtitlesButton	boolean	false	Adds a caption toggle to the control bar. At the default, captions stay reachable from the settings menu and the C key.
lang.a11y.password	string	'Password'	Name of the password field on the password-protected screen.
lang.a11y.submitPassword	string	'Submit password'	Name of that screen's submit button, which shows only an arrow.
lang.a11y.seekbar	string	'Seek'	Name of the seekbar, which is exposed as a slider.
lang.a11y.buffering	string	'Buffering'	Announced when playback stalls to buffer.
lang.a11y.resumed	string	'Playback resumed'	Announced when playback recovers.
lang.a11y.relatedPrevious	string	'Previous videos'	Name of the related carousel's left arrow.
lang.a11y.relatedNext	string	'More videos'	Name of the related carousel's right arrow.

The lang.a11y strings are spoken by screen readers and never appear on screen, so translate them alongside the rest of lang.

vpPlayer('vp-player').setup({
  video: {
    file: 'the_video_file_path',
    tracks: [{ file: 'the_subtitle_file_path', lang: 'en', label: 'English' }],
  },
  config: {
    controls: {
      subtitlesButton: true,
    },
    lang: {
      a11y: {
        password: 'Password',
        submitPassword: 'Submit password',
        seekbar: 'Seek',
        buffering: 'Buffering',
        resumed: 'Playback resumed',
        relatedPrevious: 'Previous videos',
        relatedNext: 'More videos',
      },
    },
  },
});

What you supply

The player renders and controls; the media comes from you.

• Captions — supply them in video.tracks as WebVTT or SRT. This is the single highest-impact thing you can do for a deaf or hard-of-hearing viewer.
• Audio description — deliver a described mix as an alternate audio track with a clear label. It appears in the Language menu as soon as a video carries more than one audio track.
• Transcripts — publish these on the page around the player.

Platform support

Capability	Chrome / Edge	Firefox	Safari (macOS)	iOS Safari	Android Chrome
Seekbar slider semantics	✅	✅	✅	✅	✅
Settings menu roles and keyboard navigation	✅	✅	✅	✅	✅
Related videos list semantics and activation	✅	✅	✅	✅	✅
Spoken state changes	✅	✅	✅	✅	✅
Reduced-motion support	✅	✅	✅	✅	✅
Volume slider keyboard operation	✅	✅	✅	—¹	—¹

¹ Touch layouts do not render an on-screen volume control; viewers use the device's volume buttons.

On iPhone, fullscreen hands playback to Apple's native video player. That view brings its own VoiceOver support in place of the player's controls, and returns to the player's own accessible UI on exit.

Related

• Playing
• Localization
• Full configuration