While working on making a 180° degree video accessible, we added a progress bar to the player which is accessible by keyboard. Before, the only option for the user was to drag a button at the center of the viewport around to get a good view of the product, now, by using the indicator on the progress bar, the same can be done either through arrow keys or skipping a little faster by using arrow keys + shift.
Additionally, the percentage value of the progress should be read out by screen readers upon change. So far, so good. All constraints considering, we were pretty happy with the implementation.
Now, to the challenging part learning experience:
Minutes before we were up for review with our client, I double checked the feature on my computer, and to my horror keyboard navigation did not work at all anymore. I could still tab through interactive elements, but there was no way for me to navigate our new progress bar with the arrow keys anymore as it was intended. Instead the arrow keys now mimicked the functionality of the tab key.
I was - naturally - horrified and clueless how this could happen. When checking with my colleagues (it was still working for them) and keyboard navigation on Able Player (great, accessible video player we got a lot of inspiration from), it became clear that something had to be wrong. Not with our implementation, but with my settings.
With no time left to investigate further, we went into review. And so the inevitable happened: While it had worked seconds before, when presenting to the client, keyboard navigation on our player completely failed us. Of course we were embarrassed and slightly horrified. We tried a number of things, explained to the client best as we could and - a little startled - finished the review.
If you are more experienced with VoiceOver, it’s probably already clear what happened here. We had accidentally enabled Quick Nav on Voice Over by (again, accidentally) pressing the right and left arrow key at the same time. With Quick Nav, you navigate a page mainly by using right and left arrow keys, which is why pressing an arrow key did not, like we expect, interact with our progress bar slider, but skipped to the next interactive item.
Great feature - we simply didn’t know about it and - in our ignorance - had to learn the hard way. Now, it’s already a bit of a laugh, but what we take away in all seriousness, is this:
- We need to do our homework when it comes to VoiceOver (and other screen readers) - there are still too many things we don’t know.
- Not being able to present in front of the client sucks. But it’s ok. Nothing too bad came out of it. That was a good reminder to take a little pressure off.
Did something similar ever happen to you? Feel free to share it in the comments so we can learn from each others mistakes :)
Top comments (0)