| title | title_html | nav_title | doc-note-type | lang | last_updated | permalink | ref | layout | github | resource | navigation | footer | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Accessible Media Players |
<img src="/content-images/wai-media-guide/player.png" alt="" class="" style="float: right; height: 2em;">Accessible Media Players |
Media Player |
draft |
en |
2019-04-10 |
/design-develop/media/player/ |
/design-develop/media/player/ |
default |
|
|
|
{::nomarkdown} {% include box.html type="start" title="Summary" class="" %} {:/}
This page provides information about accessible media players.
{::nomarkdown} {% include box.html type="end" %} {:/}
{::nomarkdown} {% include toc.html type="start" title="Page Contents" %} {:/}
- This will be replaced by an automatically generated TOC when using Markdown formatting. {:toc}
{::nomarkdown} {% include toc.html type="end" %} {:/}
Modern browsers provide a default media player. Most have limited functionality to support accessibility.
Rather than coding all the things needed to make a player support accessibility, most organizations choose to use an existing player with good accessibility support.
There are players developed specifically for accessibility. Some are free, open source and some are commercial.
Using an existing media player developed for accessibility requires moderate HTML skills.
Developing your own accessible media player requires advanced HTML and JavaScript skills.
Accessible media players provide a user interface that works without a mouse, through speech interface, when the page is zoomed larger, and by screen reader users. For example, media players need to:
- Support captions
- Provide access to audio description of visual information and to sign language
- Provide keyboard support (in Understanding WCAG: Keyboard Accessible)
- Provide clear labels (in Understanding WCAG: Labels or Instructions, in Understanding WCAG: Info and Relationships)
- Make the keyboard focus indicator visible (in Understanding WCAG: Focus Visible)
Media players can provide additional accessibility functionality such as:
- Changing the speed of the video
- Setting how captions are displayed (e.g., text size and colors)
- Interactive transcripts
Interactive transcripts use the captions file. Interactive transcripts highlight text phrases as they are spoken. Users can select text in the transcript and go to that point in the video.
<img src="{{ "/content-images/wai-media-guide/interactive-transcript.png" | relative_url }}" alt="">
More details on player accessibility functionalty are in a separate document: Media Accessibility User Requirements.
There is information online indicating the accessibility of media players. For example, Web-Based Media Player Accessibility Comparison Table {% include_cached external.html %}.
Each media player provides documentation of the steps to set it up in a web page. For example, AblePlayer Setup Steps {% include_cached external.html %}.