An Accessible HTML5 Video Player from the American Foundation for the Blind
by Crista Earl
AFB is rolling out a new embedded video player. That's the type where you don't need to use extra software, you just click it and it plays in your browser. Why did we create our own HTML5 embedded video player? And what is HTML5, anyway?
Technology just keeps getting better. But video-playing technology on the web is still pretty fraught with show-stopping problems. One category of technical issue is the accessibility of the player (we'll talk about the accessibility of the video itself another time).
Imagine this. You want to watch a video for a class, your job, or someplace where it really matters. You go to the page, and find bunches of buttons, none of them labeled. You try each one in turn, and the video doesn't play. Worse, the buttons multiply or disappear. You can guess that one button is causing the page to display other buttons. How long does it take you to get the thing to play? Maybe you never manage it.
Or, you come to the page and there are no buttons—no controls of any kind. Your boss wants you to speak intelligently about this video at the meeting in an hour, and there is no way to play this thing.
Or, you can get it to play with enough flailing around, but then how do you pause? Or fast-forward?
Often the players are designed for mouse only, and there is no way to interact with the controls via the keyboard. Lots of people use keyboard only—no mouse. So, those people are stuck when they come to such a player. Who are these crackpots who don't use a mouse? People who are blind fall into this camp (the no-mouse camp, not the crackpot camp, necessarily).
In other cases, there might be actual buttons, and they might work to some degree with the keyboard, but the labels on the buttons are unlabeled images. So, screen-reader users can't know which is which, and users with low vision often can't make them out (is that an arrow pointing right? Maybe it's a funny square.... and what does it mean, anyway?).
Solution: a versatile, full-featured player with HTML controls that let the users select the size and color scheme they prefer. The controls are labeled with text, so they work great with any kind of assistive technology, or no AT at all. They even work for mouse users.
And, you can expand the video to use the full screen, nice for users with low vision and everybody else.
Don't get scared, you don't have to know what HTML5 is to use the player. But if you're interested, HTML is the language browsers like Internet Explorer, Chrome, Firefox, and Safari understand and use. HTML5 is a great, newish standard supported by the World Wide Web Consortium (W3C) to make the Internet more user-friendly and more accessible. So, if browsers, assistive technology, web designers, and some other people all share the same sophisticated standard, everything works together much more smoothly. The user needs less software, less technical knowledge, and gets less vexation. Everybody gets more work done and has more fun.
Try the video on this page, and if you're interested, change the colors of the page with the Change Colors link at the top, then see how the player looks with your choices. And let us know what you think in the comments!
- The American Foundation for the Blind's Commitment to Web Accessibility
- Resources for Creating Accessible Websites
- Video Description
Update: Player Available for Download!
The player is available now, if you'd like to use it on your own site. Download AFB's Accessible HTML5 Video Player (Beta).
We'd love to have your feedback on the player in this quick form.
Re: An Accessible HTML5 Video Player from the American Foundation for the BlindPosted by jajoe411647 on 2/9/2015 at 9:49 PM
This is a very accessible player, and the controls work well. Or at least they are all labeled. I don't have enough vision to sense colors or text size, but I like it. I also like the audio description which was included.
Re: An Accessible HTML5 Video Player from the American Foundation for the BlindPosted by blake31 on 2/10/2015 at 7:31 AM
How can AFB's HTML5 video player be implemented on other sites? I know a sighted web designer committed to accessibility who would like to implement it on his web site.
Re: An Accessible HTML5 Video Player from the American Foundation for the BlindPosted by email@example.com on 2/10/2015 at 8:25 AM
this is great how can I get oner!!!!!!! I sgue can use one !!!
Re: An Accessible HTML5 Video Player from the American Foundation for the BlindPosted by Crista on 2/10/2015 at 10:39 AM
I'm glad you like it!
To the people who are asking for a player, that's a great idea. We plan to make it available for download very soon.
jajoe411647: thank you for noticing the description.
Description of non-text content is a very important part of accessibility, and I'll do another post about that later. But I just wanted to point out to anyone unfamiliar with accessibility, that if you put inaccessible content into an accessible player (web site, document)
it's still inaccessible. Car commercials have great music, but it's hard to know (often impossible) what is being advertised without looking at the screen.
Re: An Accessible HTML5 Video Player from the American Foundation for the BlindPosted by firstname.lastname@example.org on 2/11/2015 at 9:37 AM
I think this is an excellent improvement in assistive technology. I look forward to using it on a regular basis. I am interested in seeing how it works with other websites, such as facebook, youtube, etc.
Re: An Accessible HTML5 Video Player from the American Foundation for the BlindPosted by nashwalker on 4/8/2015 at 3:41 AM
We review movies, tv and games and we accommodate everyone
Log in to Post a Comment
- Technology (44 posts)
- Web Accessibility (30 posts)
- Personal Reflections (45 posts)
- Readers Want to Know (15 posts)
- Leadership (5 posts)
- Helen Keller (63 posts)
- Social Life and Recreation (38 posts)
- Education (33 posts)
- Arts and Leisure (30 posts)
- Sports (26 posts)
- Assistive Technology (42 posts)
- In the News (40 posts)
- Independence (10 posts)
- Public Policy (37 posts)
- Self-Advocacy (3 posts)