Video Player

What makes a video accessible is widely misunderstood. Many web professionals know about closed captions. What many don't know is that they need audio descriptions in order to be WCAG AA compliant.

WCAG video related guidelines

Requirement	A	AA	AAA
Closed Captions
Audio Descriptions	Use either audio descriptions or transcripts to be single A compliant.
Transcripts	Use either audio descriptions or transcripts to be single A compliant.	not required
Good contrast for overlay text	not required
Can be paused
No Seizure Inducing Sequences
Sign Language	not required	not required	not required

For a lot of companies and organizations, re-cutting an alternative cut of each video on their website is cost-prohibitive:

1. It requires a voice actor to recite the audio descriptions.
2. It requires a video editor to re-edit the video.
3. Sometimes, other footage needs to be shot to accommodate the amount of time needed to insert the audio descriptions into the video.

Because of this, I have recommended using our custom build of Able Player and having the browser insert the audio descriptions. We have added some extra code to our build to ensure that Able Player plays the audio descriptions correctly on all devices (the official build has some issues in iOS — we will be submitting a PR to the official AblePlayer code so they can be incorporated in the official build). Able Player requires a separate caption file (in WebVTT format) so the player knows at what time the captions should be read out. In many instances, I also set the player to pause the video when the audio descriptions are recited, so the browser doesn't talk over the existing audio in the video.

One of the great side effects is that if you implement audio descriptions this way, the caption file + the audio descriptions file will produce a transcript for free, so your video player will meet a WCAG AAA guideline.

Video Player With Text-To-Speech Audio Descriptions

This is the best solution to use, especially when building from scratch.

This solution described below is available as an NPM module. (Module installation instructions)

Installation Instructions

You can load this JavaScript library into your application in several ways:

• as an ES6 module using Webpack.
• as a CommonJS module using require() and Webpack.
• as a native ES6 module within the browser.
• as an old-school ES4/JavaScript library.

If you haven't done so already, choosing which you should use is a major architectural decision. Here are a few articles that will help you decide:

• Jan Olaf Krems gives a great overview of the JavaScript file format differences.
• Joe Honton discusses that with ES modules and HTTP/2, you may not need Webpack anymore
• Stack Overflow has a really good thread about Webpack vs. ES6 modules as well.

Using NPM/Webpack to load ES6 Modules:

1. Install the enable-a11y NPM project.
2. Edit your webpack.config.json file to resolve the ~ modifier by adding the following:
   Wrap text

   ☜ Scroll to read full source ☞

   module.exports = { ... resolve: { extensions: ['.js', '.jsx', '.scss', '.css', '*.html'], modules: [ path.resolve('./src/js'), path.resolve('./node_modules') ], alias: { '~enable-a11y': path.resolve(__dirname, 'node_modules/enable-a11y') }, ... }, ... }
3. You can use the module like this:
   Wrap text

   ☜ Scroll to read full source ☞

   // import the JS module import ablePlayerCustomizations from '~enable-a11y/js/modules/ablePlayerCustomizations'; // AblePlayer uses this module, available via NPM
import Cookies from 'js-cookie'; // import the CSS for the module import '~enable-a11y/css/ablePlayerCustomizations'; // There is no .init() function to call.
4. Alternatively, if you are using LESS you can include the styles in your project's CSS using:
   Wrap text

   ☜ Scroll to read full source ☞

   @import '~enable-a11y/css/ablePlayerCustomizations';
   (If you are using it in your CSS, you will have to add the .css suffix)

Using NPM/Webpack to Load Modules Using CommonJS Syntax

1. Install the enable-a11y NPM project.
2. You can import the module using require like this:
   Wrap text

   ☜ Scroll to read full source ☞

   var ablePlayerCustomizations = require('enable-a11y/ablePlayerCustomizations').default; ... ablePlayerCustomizations.init();
3. You will have to include the CSS as well in your project's CSS using:
   Wrap text

   ☜ Scroll to read full source ☞

   @import '~enable-a11y/css/ablePlayerCustomizations';

Using ES6 modules natively.

This is the method by which the page you are reading now loads the scripts.

1. Grab the source by either using NPM, grabbing a ZIP file, or cloning the enable source code from GitHub.
2. If you want to load the module as a native ES6 module, copy js/modules/ablePlayerCustomizations.js , and css/ablePlayerCustomizations.css from the repo and put them in the appropriate directories in your project (all JS files must be in the same directory).
3. Load the CSS in the head of your document:
   Wrap text

   ☜ Scroll to read full source ☞

   <html> <head> ... <link rel="stylesheet" href="path-to/css/ablePlayerCustomizations.css" > ... </head> <body> ... </body> </html>
4. Load your scripts using the following code (NOTE: you must use <script type="module">):
   Wrap text

   ☜ Scroll to read full source ☞

   <script type="module"> import ablePlayerCustomizations from "path-to/ablePlayerCustomizations.js" ablePlayerCustomizations.init(); </script>

Using ES4