7 Lessons from Developing an Accessible HTML 5 Video Player

Presenter:  Dennis Lembree from eBay (previously with PayPal access team 2+ years)

@dennisl | @EasyChirp | @WebAxe

View the project on github

This was my third session at the CSUN conference on Friday, March 6.  I know PayPal has done a lot for accessibility, so this should be an interesting session.  Keyboard traps have historically been a big issue, I wonder if that will be covered here.  We shall see.  [UPDATE:  this was a really meaty presentation, glad I attended ]

Introduction

Works on accessibility at eBay, previously at PayPal, Creator of @easychirp, creator of @webaxe

About the Player

• paypal.github.io
• Launched September 2014
• Goals:  take advantage of HTML5 for video, controls, captions
• Greatly reduce code weight and complexity while still supporting cross-browser/OS/device
• Support captions (WebVTT format)
• Options upon intialization:  captionsOnDefault (default is true), seekInterval (default is 10), videoTitle (default is play), debug (default is false)
• Width adjusts to width of video element (minimum 360px)
• Fully responsive version of the player by @LauraKalbag
• Controls are toggles (checkboxes “under the hood”), which can be activated by the spacebar or enter key
• Question:  is there a reason why captions are on the top?  This was a design decision.  Web VTT spec has a mechanism that tells where captions can be keyed.
• Has a pure HTML5 range input slider for volume

Lesson 1: Don’t Need Dependencies

• Developed without the use of any CSS or JS libraries
• Code weight is very small; uncompressed and not minimized
• CSS is 5k (mediaelementplayer.css is 24kb)
• JS is 18K (media-element-and-player.js is 156kb)

Lesson 2:  HTML5 Elements are Becoming More Accessible

• Progress indicator and volume are all native
• Considerably less code required
• Accessible in the latest screen readers, which means no ARIA is required
• See “My Sliders” CodePen Collection by Ana Tudor

Lesson 3: Don’t Need Flash Backup

• All modern browsers support HTML5 video element
• Only IE8 doesn’t support it.  In that case, a direct link to the video can be provided
• See your browser’s level of support  http://caniuse.com/#feat=video

Lesson 4:  Mobile Has Great Support

• iOS and Android support the HTML5 video element
• They also support WebVTT captions
• Custom controls of the video player are not used on mobile devices (bypassing all of Dennis’ code)

Lesson 5:  Browser Sniffing is Required

• I REALLY didn’t want to deal with this, but I had to.  Why…?
• There are several inconsistencies in support between desktop browsers:  display of range input in IE, coloring the progress bar in Firefox, support of the textTracks video property in IE, Firefox, and Safari (this was by far the biggest problem that I had)
• Question:  does the MP4 container require the VTT hosted as a separate file?  Yes.

Lesson 6: Chrome by Far Has Best Support

• None of the challenges of the project were experienced in Chrome
• Chrome was used as the baseline browser for development
• Chrome supports textTracks and WebVTT very well and renders HTML5 elements as expected

Lesson 7:  github is Great for Tracking Issues

• Great for sharing code
• Done in the development stage and now in the released stage
• Make an enhancement request, log an issue or better yet, resolve an issue!
• ..also for showing how successful the project is!  Been starred over 1,500 times

Improvements

• Limitations:  supports only one caption file and one caption type
• Would be great to see mainstream browsers support HTML5 video better
• Key enhancements:  localized text (internationalization), support for audio description