Everything was going well; all the necessary markup was in place as recommended on the WebAIM site. Field sets, labels and buttons ordered correctly. I turned on screen reader options and everything was read back to me beautifully on my laptop as well as on iOS and Android devices. A nice accessible webapp, job done! Well, not exactly…
I shared the page with my friend, web accessibility expert Austin Seraphin for further testing. He uncovered some bugs. For example, on his iPhone, as he navigated through a group of 4 radio buttons he heard the following: “Radio button 7 of 4, radio button 2 of 8″ etc. Also, he couldn’t hear questions on our form; they were being ignored by Voiceover.
After some debugging, we discovered that my Apple device was running iOS 7 and Austin had upgraded to iOS 8.1. The same page that worked perfectly with iOS 7, didn’t work with 8.1.
I upgraded my iPad to Austin’s iOS version and heard exactly the same behavior from Voiceover. My team-mate Ather Sharif also replicated the problem on his iPhone (and put some clever workarounds in the code).
Some technical details of the iOS 8.1 / Safari / Voiceover problem:-
- Text wrapped in <legend /> tags is not recognized or read.
- Labels that are ‘for’ an input are not always linked which makes navigation confusing.
- Radio button groups that are wrapped in a <fieldset> are miscounted. We hear things like “Radio button 9 of 5″ for example.
Here’s a video demonstrating the problem:-
An example of markup that causes problems:-
<fieldset> <legend>This legend is ignored by Voiceover</legend> <input id="radio1" name="radio1name" type="radio" value="radio1value" /> <label for="radio1">I don't always link to my input</label> ...<!-- radio button numbering is buggy --> </fieldset>
These problems demonstrate the challenges people who rely on screen readers face when application changes are made that affect accessibility features.
I raised the issue on the Apple Support Communities forum [update: as well as ticket 19614910 at bugreport.apple.com]
Please share your own experiences with web accessibility and screen readers in the comments below.
Ather explores online accessibility options: What is a screen reader and where can I find one?
Austin explores wearables: Proof that Apple Watch has Accessibility