The Future of Video Player Accessibility

The Future of Video Player Accessibility

www.3playmedia.com

twitter: @3playmedia

#videoa11y

Type questions in the window during the presentation

This presentation is being recorded and will be available

for replay

To view live captions, please follow the link in the chat

window

Eric Boyd

JW Player

Matthew Schweitz

Google/YouTube

Steve Heffernan

Video.js

Greg Kraus

NC State University

Terrill Thompson

Able Player

Lily Bond

3Play Media

Vladimir Vuskovic

Google/YouTube

UPCOMING WEBINARS

Register: www.3playmedia.com/webinars/

Creating Accessible PDFs with Acrobat (4/30)

Quick Start to Captioning (5/7)

10 Tips for Creating Accessible Web Content with WCAG 2.0 (5/21)

CVAA Legal Requirements for Video Programming (5/27)

DIY Workflows for Captioning and Transcription (7/23)

Contact us at [email protected] with any questions

OLC Video Tools Workshops

Special discounts available for OLC Members!http://onlinelearningconsortium.org/join/

July 22 – 24 - Exploring Interactive Video Tools– 3 Day Workshop

August 14 – 21 - Intro to Audio and Video Tools

http://onlinelearningconsortium.org/learn/workshops

Greg Kraus

University IT Accessibility Coordinator

North Carolina State University

Twitter: @gdkraus

[email protected]

Agenda

1. Introduction

2. VideoJS

3. YouTube

4. JW Player

5. AblePlayer

6. Q&A

What do we mean by “Video Player

Accessibility?”

• Captions? – Yes

• Does the player require using a mouse?

• Can it be controlled with voice recognition software?

• Can it support audio descriptions (described video)?

• Does it support a sign language track?

• Do the player controls have sufficient color contrast?

• Can the user customize the player?

This is not an endorsement…

• … and it is not an exhaustive list

• This is a conversation with several developers in the field

Other Video Players with Accessibility

Support

• Kaltura

• Mediasite

• BBC iPlayer

• PayPal

• OzPlayer

• Acorn Player

• …and more

What we hope to accomplish today

• Have a conversation about

– How the developers approach accessibility

– Challenges they face

– What direction they are going in the future

Steve HeffernanVideo.js Project Lead,

Engineer at Brightcove

Twitter: @heff

videojs.com

github.com/videojs/video.js

http://videojs.com

http://github.com/videojs/video.js

Companies Using Video.js

(Coming Soon - all Brightcove

Video Cloud customers)

Community

13

150+ Contributors

Contributing Accessibility Experts

• Greg Kraus - NC State University

• Owen Edwards - YouDescribe.org

• Karl Groves - Tenon.io

http://YouDescribe.org

Captions

• First to support WebVTT

• Recently switched to browser’s built-in captions

• Using Mozilla’s VTT.js for everywhere else

Accessible Controls

• Always HTML (no Flash)

• Keyboard Accessible

Challenge: Extensibility vs Accessibility

• Divs vs Buttons

• Tab order

DIV vs BUTTON

<div role=“button”>Play</div>

<button>Play</button>

Video.js with <button> in Foundation Framework

Tab Order

Future Work

• Switch to buttons

• Fix tab order

• Improve focus styles

• Audio descriptions

• WCAG 2.0 Compliance

Steve HeffernanVideo.js Project Lead,

Engineer at Brightcove

Twitter: @heff

videojs.com

github.com/videojs/video.js

http://videojs.com

http://github.com/videojs/video.js

Google Confidential and Proprietary

Accessibility @ YouTube

Matthew Schweitz, Eng manager Vladimir Vuskovic, Product manager


Overview: ■ Approaching a11y at YouTube

■ What’s been done?

■ What’s next?


Approaching a11y

Step 1: Get buy-in from the org


Approaching a11y


Step 2: There is no Step 2


Approaching a11y

“Organize the world’s information and make it

universally accessible and useful.”

“Empower the world to create, broadcast, and

share.”


Approaching a11y

“Organize the world’s information and make it

universally accessible and useful.”

“Empower the world to create, broadcast, and

share.”


Approaching a11y


Step 2: There is no Step 2


Approaching a11y


a11y is a dimension of overall product

quality


Approaching a11y


Step 2: Test, measure, and integrate means

to improve product quality


Approaching a11y

● Education & QA

● Track progress

● Add to critical path to release


What’s been done...

In practice, start with the basics.

● Semantic markup & sensible DOM

● Attention to contrast

● Tab indexes & roles


Tab indexes & roles

● Hand crafted is better than automatic

● Shared indexes work

● Use aria-owns

● Labels are cheap


Recent improvements

● Tab order for player

● Seek slider

● Settings menu in player

● Share panel

● “Skip ad”


Recent improvements

Global label to announce new things

Use JS to populate and deal with browser

quirks.


Player & Captioning

There are two parts to it:

● Viewer experience

● Ensuring high quality and quantity of

captioned videos


Player & Captioning:

viewer preferences● It is a core part of the player

● Users can customize the behavior and the look and feel

across platforms


Creating captions

Creator tools Crowdsourced Autogenerated

Scale

Quality


Fans subtitlesQuantity

● Coverage (videos with

captions)

● Languages per video

Quality

● Fix errors

● Replace (or improve) auto-

captions

Challenges

● Quality control


What’s next?

● Wide release of crowdsourced caps

● More refinements in site and embed a11y

● Keyboard shortcuts: discoverability

● Attention on mobile

● Investment in ASR improvements for caps

● Surfacing of audio descriptions


Thank you!

JW Player Vision:

Provide the best possible viewing experience across all devices -

desktop, mobile and connected TVs.

Overview

Eric Boyd

Director of Product

1) Working closely with developers

2) User experience studies

3) Keeping up with market changes

4) Contributing to evolving standards

Founded: 2008

Employees: 95

Headquarters: New York City

Business model: Freemium / SaaS

Financing: Raised $25 million

We are the world’s most popular video player

Who is JW Player?

17Billion

videos

watched

>1Billion

unique

viewers

>1Million

unique

domains

Monthly as of December 2014 for JW Player v6 and above

http://trends.builtwith.com/media/video-players

50%

JW Player Customer Segments

➔ Media Publishers

➔ OTT Broadcasters

➔ Creative Agencies

➔ Development Studios

➔ Advertising Networks

➔ Syndication Networks

25%

25%

Keyboard Control

• Tab-in / Tab-out Model

The player consists of a single

element that can be tabbed into.

Elements are not exposed to a

screen-reader.

• Once the player has focus – a

viewer can control with Keyboard

shortcuts.

Play/Pause, Seek, Volume,

fullscreen

Multiple Audio Renditions

• Supported in HLS

API available to provide custom

controls to change tracks.

• Player will pick based off of

system language settings.

No standard language code for

descriptions.

• Viewer can toggle seamlessly

during playback.

Closed Captions

• Support caption standards across Flash and

HTML5

• Back-fills where not supported

WebVTT, 608

• Transcripts can be implemented via API.

• Viewer can style captions.

Publisher must provide this to them

Gaps:

• Missing support for WebVTT regions as well as

708 positioning.

• 3rd Party application on publisher websites

Live on 2.5 million domains

No control of tab-index or placement of player.

• Must support market leading browsers as well as outdated ones

Some vendors are slower to upgrade to standards so JW Player back-fills

• Lack of video specific interaction accessibility standards

• Have to support multiple rendering modes

75% of all video plays are still rendered through Flash

• Scheduling support for latest government mandated support.

• Some media formats are better than others – and those are not

supported everywhere.

Challenges

JW Player Roadmap

• Add support for 708/WebVTT regions for caption placement

• Explore better keyboard control options.

Video quality, caption selection, audio track selection

• Moving away from Flash as a primary video player to reduce complexity

Single way of interacting with player

• Easier player skinning with CSS

Summary

• Captions on all devices.

• Limited keyboard control – still relies on mouse for advanced interactions.

• Extensible JavaScript API for publishers to extend the player.

• Multiple audio tracks supported in HLS and MPEG-DASH coming soon.

• Custom coloring can be provided and designed by Publisher.

• Custom controls can be provided by publisher.

• No sign language track support.

• No built in voice recognition controls.

Feedback is always welcome to [email protected] or twitter @jwplayer.

mailto:[email protected]

Able PlayerTerrill Thompson

Technology Accessibility SpecialistUniversity of Washington

[email protected]@terrillthompson

http://ableplayer.github.com/ableplayer

mailto:[email protected]

DO-IT Video website

http://uw.edu/doit/video

Able Player's Unique Features

• Supports WebVTT audio description

• Supports audio description as a separate, associated video via data-desc-src

• Sign language support via data-sign-src

• Interactive transcript assembled from WebVTT files (captions, subtitles & descriptions)

• Interactive transcript is keyboard accessible

• Support for WebVTT chapters

• Adjustable playback rate

Extensive testing of <button>

• JAWS + Firefox

• JAWS + IE

• NVDA + Firefox

• Window-Eyes 9 + IE

• VoiceOver + Safari (Mac OS X & iOS)

• Talkback + Chrome (Android)

• http://tinyurl.com/button-a11y

Q&A

Eric Boyd

JW Player

Matthew Schweitz

Google/YouTube

Steve Heffernan

Video.js

Greg Kraus

NC State University

Contact us at [email protected]

with any questions

Terrill Thompson

Able Player

Vladimir Vuskovic

Google/YouTube

www.3playmedia.com

twitter: @3playmedia

#videoa11y