AFB Accessible Player: HTML5

 AFB Accessible Player

Developed by AFB, this fully accessible, embedded video player with HTML5 controls includes the following features:

.         Users can select the size and color scheme they prefer.

.         Controls are labeled with text and include keyboard commands, so they work with any kind of assistive technology, and can also be used with a mouse.

.         Video can also be expanded to a full screen, which is helpful for users with low vision.

.         Can be used as an embedded YouTube player or as a standard player.

.         Custom control layout supports English and Spanish languages.

Transcript of Video

Voice Over: Crista Earl, Director, AFB Web Services, describes the AFB Accessible Player.

Crista Earl: One of the problems with video in general on the internet is players are not all accessible and people have trouble getting to the controls with the keyboard on some of them. Some of them, if you have low vision you can't tell what's what. They're just little gray patches. All kinds of issues with the player.

So, we created an accessible player using HTML5 technology so that it would work with a lot of platforms, works with lots of browsers and cross-platform whether you are using a Mac or a PC, whether you're using a mobile device. And, it has this great change colors so if your website has a color scheme, a high contrast color scheme or various high contrast color schemes, the player will change with your website. So, users with low vision can make the controls more visible and users who use screen readers can find the controls easily.

We added keyboard shortcuts so in the middle of the video if you want to pause it, you can just hit the key command. It varies slightly from browser to browser to pause the video. You can make it full-screen or make it small on the page. the user has that option. So, we really think we put in a lot
of nice features to make playing videos easy, fun, and took all the hassle away from the user. And, a lot of hassle away from the web designer, too.

You don't have to build your own player. Now, your job is to make accessible content and put it in the player.

Downloading the Accessible player can be carried out by following the steps
below.

1.  Visit the link/URL shown below.

http://www.afb.org/info/programs-and-services/technology-evaluation/creating-accessible-websites/download-afbs-accessible-html5-video-player/12354

2.  If using screenreading software,

a.  once arriving at the link shown above, enter "links list mode."

System Access, JAWS  and NVDA - insert plus f7

Windows-eyes - insert plus f7 or insert plus f6 opens the page navigation dialog since Windows-eyes has no separate interface for linklists, page elements, etc.

b.  Type in the word zip and hit enter.

c.  The cursor is placed on a link labeled as  "downloadable zip file containing the AFB Accessible Player files and instructions."

d.    Press the application key. 

e.  Arrow down to "save tarket as" and hit enter.

e.  Navigate to where you wish to save this file.

f.  Press alt plus s and the zipped file is saved in your chosen location.

3.  If you are using a mouse to download the file:

a.  Access Click on the link below or copy the url to the clipboard.  Then past the link to your browser's address bar.

b.  click on okay and off you go to the site.

c.  Move down to the link labeled as"downloadable zip file containing the AFB Accessible Player files and instructions."

d.  Click the right mouse button.

e.  Click on "save target as."

f.  Navigate to where you wish to save the file and then click on save.

Below is the complete set of instructions entitled as "read me.txt" that is
found in the folder once uncompressing the downloaded folder. 

AFB's Accessible Video Player

***What Is It?

A lightweight, responsive HTML5 video player that includes support for
keyboard and screen reader accessibility. Its appearance is
stylesheet-driven so it can support the user's size and contrast choices.
The video can also be expanded to a full screen, which is helpful for users
with low vision.

***Features

* It can be used as an embedded YouTube player or as a standard player.

* The custom control layout supports English and Spanish languages.

* Provides a responsive HTML5 video player with custom controls.

* Uses labeled controls for volume (range input) and progress indication (progress element).

* Accessible to screen reader and keyboard-only users.

***Language Support

* This accessible video player support custom controls in English and Spanish languages.

***Preparing Your Videos

For the videos to work across as many browsers as possible, you'll need at least the following formats:

* .mp4

* .webm

* .ogg

***Installation

* Unzip the Accessible Video Player folder. There will be four other folders inside the main one.

* The "include" folder contains the main script files for the video player.

* "media" folder (optional) can be used to serve the media files in the supported file formats.

* The "Standard Video Player" folder has the standard player with English layout.

* The "Spanish Video Player" folder contains video player with custom controls in Spanish.

***Linking Videos to the Player

* Open the "Standard Video Player" or "Spanish Video Player" folder. Inside is the main player html file.

* Open this file and look for

    (Oops. Something got lost; RantWoman will try to find the complete directions, but good intentions and all...)