Keyboard control of html5 video elements

HTML 5 introduces the video and audio media elements. Playback is manipulated by the user with browser supplied controls (indicated via the controls attribute), or with author supplied controls. In the case of browser supplied controls the current Firefox implementation is described here, and an idea for potentially improved keyboard support is suggested.

Show here is a screen shot of a video with no controls shown. In this case the reason they are not shown is because the mouse pointer is not hovering over the video. Hovering over this now won't show the controls; it is just an image after all.

This next image shows a blown up view of the controls that appear when the mouse hovers over the video. I've also hovered over the volume control here to show reveal the volume slider.
Point at what you need, click what you want, move away, and enjoy your video. Nice. When the mouse user doesn't want to interact with the video, the controls slide away leaving an uncluttered video viewing experience. The gotcha here is that not all users are mouse users, and not all devices have a mouse (or touch screen).

Are you a keyboard user?

We have you covered. You can tab to the video element. The controls are not shown but the you can manipulate the video using some intuitive keystrokes such as arrowing left and right to go back and forward, space to toggle play and pause, and up and down arrows to control volume etc. Sighted keyboard users can enjoy uncluttered interaction with the video, while screen reader users can of course enjoy the same interaction regardless of visual clutter.

We still have some concerns:

1. Discoverability. Once a user has tabbed to a video, it is difficult to tell that the video has focus and there is nothing indicating that the video is keyboard controllable.

2. Feedback. The feedback after a user action is not as rich as the feedback when using the controls. For example, pressing right arrow to advance the video doesn't tell you how far ahead we went, or where we are in the overall length of the video.

An Idea...

Keep the current functionality but add a secondary keyboard interaction model. Once a user has tabbed to the video element then the video is directly controlled via the existing keystrokes. If the user hits tab again, the controls appear, and the first control is focused. A regular keyboard interaction model ensues for the controls (tab navigation, and per control keyboard manipulation). Tabbing past the last control leaves the video element entirely, moving to the next element in the document tab order.

Pros: Discoverability is solved. Feedback is solved.

Cons: It increases the number of items in the overall document tab order. Additional source code is required.

Thoughts?

Innovation and Usability in Firefox

This is almost a bait and switch... but not quite.

Where I see Frank's Mozilla Accessibility Strategy document providing direction for Firefox/gecko is in the Mozilla development process as it applies to pushing the web forward. Your friendly gecko accessibility team currently consists of 3 core members: Marco Zehe, Alexander Surkov, and some newbie. This team is a vital part of bringing the web to everyone, but also, by its existence, it has the potential to create a false sense of security; sort of a "the accessibility special forces has our back" cushion. To some extent that cushion exists, but you have to make sure you're sitting on it. So what am I getting at?

In a nutshell please see Marco's call for ping-age.

This is happening.

That's great.

Please do it more often.

I'm looking at you too #labs and #ux, cuz accessibility breeds innovation, and accessibility is usability.

Thanks for reading.

CSUN's 2009 Accessibility Conference

Late last week I attended the 2009 Technology & Persons with Disabilities Conference, a conference which most of us accessibility folks call "c-sun" as it has been held at CSUN for over 20 years. What makes this an exceptionally important conference for accessibility is that it brings users, developers, educators, clinicians, visionaries, and policy makers together in one place. Thankfully a lot of them seem to love Firefox... and for good reason; more on that later.

I was particularly jazzed about getting time in the same room with other Firefox developers: Alexander Surkov, Marco Zehe, and Aaron Leventhal. We spent some mornings, afternoons, and evenings together discussing the past, present, and future of web accessibility, children, wives, and vodka. When people had faded into their rooms, Alexander and I used the later hours to hack together and discuss gecko accessibility code design. His patch reviews are even faster than usual when he's sitting next to me.



Mozilla works hard "to ensure that the Internet is developed in a way that benefits everyone". It seems pretty clear Mozilla, especially with the work in WAI-ARIA for DHTML, has developed a reputation for pioneering accessibility. As UI issues arise on the web people are looking to Mozilla for answers, and we are keen to work with other communities to find the right solutions. To this end I made sure to get some face time with people at CSUN that I think will help, including Henny from Opera, and JP from Microsoft. In some cases attendees made sure to find me. Flattering. Anyways, I won't bather on much longer as I think Marco will be giving a much better report soon.

Smiling in the picture up above are: Marco Zehe, David Bolter (me), the NVDA developers Mick Curran and James Teh, Aaron Leventhal, and Alexander Surkov (Eitan was absent for this photo). I quite like how Marco's cane glows like a Jedi weapon in this shot.

May the force be with us.

Firefox Accessibility Goals

Ahhh Spring.

As we approach the ides of March, it is time for the Mozilla accessibility community to reflect, and to plan for the next quarter and beyond. Here are the high level goals we are thinking are priorities for next the few months:

1. OS X
2. DHTML (WAI-ARIA 1.0 compliance)
3. Stability and test coverage

None of these are new high level goals, but each one has important new work waiting underneath. By the end of the month we hope to have this new work listed as concrete goals which we can use to organize our efforts. We'll report on that later. Other ongoing fluid goals, such as supporting community projects will continue to be high priority.

All this planning is based on user feedback so feel free to leave a comment on this blog or drop a note on Mozilla's accessibility list... we're listening. Oh! If you happen to be at CSUN next week, please come find one of us at the Mozilla booth!

Thanks for reading.

ARIA User Agent Implementation Task Force

Today we kicked off the first meeting for the "ARIA User Agent Implementation Task Force" (UAI-TF). Our primary goal is browser compatibility in our WAI-ARIA implementations for DHTML accessibility -- vital stuff. The group is very lean and today there was representation from browser people at Microsoft and Mozilla.

If you are an Opera, Webkit, or Safari accessibility developer please consider joining us.

Aside: a big shout out for Aaron Leventhal for planting the seeds of this, and for the excellent and detailed document he created to guide browser developers on ARIA implementation.

Call for review: WAI-ARIA

If you are somehow involved in supporting interactive web content, please consider reviewing one or more of these W3C documents related to accessibility.

For everyone involved in web content, this is the document with actual "Last Call Working Draft" status:
Accessible Rich Internet Applications (WAI-ARIA) 1.0 - Last Call Working Draft
http://www.w3.org/TR/wai-aria/

For web application ninjas:
WAI-ARIA Best Practices - updated Working Draft
http://www.w3.org/TR/wai-aria-practices/

For browser developers:
WAI-ARIA User Agent Implementation Guide - First Public Working Draft
http://www.w3.org/TR/wai-aria-implementation/

It is important that these documents are understandable and consistent. The deadline for having an impact via your comments is April 17th, 2009. Official channel is: public-pfwg-comments@w3.org (see this email for details).

Go ahead browser, make my day...

This command (I use OS X) takes the patches in my mercurial queue (which I tend to name bug-#) and opens a browser tab for each.

hg qseries | sed 's/bug-/https:\/\/bugzilla.mozilla.org\/show_bug.cgi?id=/' | xargs open

There's probably 94 better ways to do that but meh, and barely blog worthy perhaps... but this way I'll have a record of the command for when I forget. And smart people can add comments showing me better ways :)

I guess having FF restore my session is a good one.

7 things

I think Steve Lee was first to tag me with this fun 7 things meme.

My Seven

1. I lived most of my childhood on a family goat farm in rural Ontario, Canada. I loved fetching buckets of water for the goats and watching them drink deeply. One incredibly clever goat tried to murder me in various ways, but really it was sort of a Pink Panther - Cato relationship. Thankfully "Jody" was lousy at martial arts.
   
2. I now live in Toronto, a male in a house dominated by 3 strong women.
   
3. I'm a soccer player in the land of hockey.
   
4. The first computer I touched was one of the very first IBM PCs which my friends father had brought home from Geac. That night I lay awake thinking of that cool monochrome text glowing on the display. After a few years of selling farm-fresh free range chicken eggs my first computer was a Radio Shack CoCo2, and some 'older kid' I knew from the store gave me his old 6809 assembler programming cartridge. He had started dating. I saved my programs on cassette tape.
   
5. Yeah I was on the highschool programming team one year. Being the youngest, when we got our task list our leader gave me an easy one and I wrote out the algorithm on paper for when it came time to type it in (we shared one computer). We ran out of time working on the first task (the hardest). There is a lesson here somewhere.
6. My career plan was to build strategy based computer games until a guest lecturer introduced me to the world of accessibility technology.
7. I still have that country-boy trust in people.
   

The Rules

1. Link to your original tagger(s) and list these rules in your post.
2. Share seven facts about yourself in the post.
3. Tag seven people at the end of your post by leaving their names and the links to their blogs.
4. Let them know they’ve been tagged.

Passing it on, in no particular order:

1. Willie Walker
   
2. Pete Higgins
3. Greg Wilson
   
4. Simon Bates
5. Chris Hoffman
   
6. Jono DiCarlo
   
7. Flavio Percoco Premoli
   

Joining the Mozilla Accessibility Team

For my readers, all 5 of you, I want you to know the rumors are truthy. The Mozilla Corporation has come to an arrangement with the ATRC that will allow me to spend some time focusing on helping Marco and Surkov with Firefox accessibility!

We're scattered nicely. Marco works in Germany, and Surkov in Siberia. I'm working out of Mozilla's Toronto office where, in one week, I've managed to spill shawarma juice on Beltzner's chair, ramble irrelevantly and incoherently to Jeff Muizelaar about C++ object layout compiler differences[1], and order the sandwich melt instead of the dry rub ribs at CGL. What was I thinking?

Things I've learned: some spouses do in fact let their husbands brew beer in the kitchen, seriousness combined with fun is serious fun, having an espresso machine in the office is genius, the world stops for women's five pin bowling, if an Olympian uses chemical enhancements then they should compete in an evening gown, and finally, I'm going to learn a lot. I'm used to working with smart people... but these guys are sick!

[1] My current bed time reading is "Inside the C++ Object Model" by Lippman. I wish I'd read this 12 years ago. I recommend it to anyone interested in C++ object layout, compiler optimizations and so on... fantastic... but my next book choice will be fiction.