Accessibility bugs in iOS with Safari

FacebookTwitterGoogle+Share

Accessible web search form prototype developed for map4accessI was recently volunteering on a project to build a responsive webapp where we used standards to ensure compatibility with screen reader software.

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]

Screenshot of issue I raised with Apple: I've been developing a web form using standards and have noticed the following voiceover problems on iOS8 that are not present on iOS7 (using Safari on iPhone 6):-   - Text wrapped in a <legend> tag is not recognized or read (we use this for the questions above a group of radio buttons containing as recommended on accessibility sites) - Labels that are 'for' an input are no longer linked to them so they work independently and make usability difficult. - Radio button groups that are wrapped in fieldset are miscounted.  We hear things like "Radio button 9 of 5" for example.    Are these problems being encountered by others?  and are they being fixed or is some kind of workaround necessary?   Thanks   James  iPhone 6, iOS 8.1

Please share your own experiences with web accessibility and screen readers in the comments below.

Learn more

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

9 Comments

  1. Just upgraded to 8.1.3 and radio buttons and legends are still broken.
    Worryingly, legends aren’t even read if you swipe through the content. So there’s no way at all for a screenreader user to read that info.
    Legends have other problems too. For example, set JAWS to advanced verbosity mode and the legend stops being spoken.
    As a work-around (frustrating that we should need them), ARIA-LABELLEDBY seems to work quite well across most devices.
    Here’s a quick test case I wrote:
    http://www.behindtheyellowline.org.uk/labelledby.htm

Leave a Reply

Your email address will not be published. Required fields are marked *