(Floe) Universal Subtitles accessibility review (January 2012)
Tests performed
Keyboard only input on Firefox 10.0 Mac OS
Keyboard only input on Chrome 16.0.912.77 Mac OS
Keyboard only input on IE 9 Windows 7
Keyboard only input on Safari 5.1.1 Mac OS
NVDA screen reader on IE 9 Windows 7
Magnified on Firefox 10.0 Mac OS
Magnified on Safari 5.1.1 Mac OS
User test with a blind user using Jaws
Recommendations
I suggest we make the following changes and then perform another accessibility review.
Keyboard focus styling would make the website a lot more usable. Simply adding a CSS rule using the :focus pseudo-selector should do it.
Using the tab key for subtitling makes it hard to navigate the page with the keyboard. Picking another key for starting and stopping the video (perhaps right arrow?) would help a lot.
Providing a way to access the other elements on the subtitling page with the keyboard is essential. Once another key is picked for starting and stopping the video, tab could provide this access.
Using html semantics where possible will make the page more understandable. Title hierarchy is a good place to start.
Labels for form fields will provide screen reader users with more information about the field.
We should look into the dialogs a little more - both keyboard and screen reader behaviour is not ideal.
Having content above the page title can be confusing, we should look into alternatives to the top panel.
Timing out when the user is inactive is not ideal. Anyone who takes some time to perform their task is likely not able to complete it. Perhaps an auto save could be added?
Detailed findings
keyboard focus styling is missing in all browsers
dialogs don't seem to be usable with the keyboard - tab seems to move focus to things beneath the dialog and it seems that the 'continue' button never gets focus
there doesn't appear to be a way to have a subtitle start later then I originally set it using only the keyboard
there doesn't appear to be a way for no subtitle to show at times of silence using only the keyboard
there doesn't appear to be a way to edit the subtitles after I've added them using only the keyboard
there is a keyboard trap in the video when using FF
can't get focus into the video using the keyboard in Chrome and Safari
title hierarchy is confusing
having content above the page title is confusing
NVDA does not read anything when I put focus on the video
NVDA reads 'edit' when I put focus into the URL text box
NVDA does not say anything when the search box is given focus
NVDA says "Dialog this video is in. Subtitle info. Continue" when the create subtitle dialog is shown
NVDA says "Dialog skip these videos. Continue." when the tutorial dialog is shown