Is it possible to detect if VoiceOver is on in a web page on iPhone?

Question

We're currently testing deploying "slippy" maps (i.e., ones that move around with a finger on a touchscreen device) on our mobile web app, using the touchmaplite JavaScript library. This map is embedded as an iframe in our web page.

When we tested this setup on an iPhone with VoiceOver, we found VoiceOver gets "stuck" at the map, and won't read past it (or indeed scroll past it). This is a big stumbling block for us, we don't want to go backwards with accessibility support on our site.

Is it possible to mark an element as to be "ignored" by VoiceOver, or to detect if VoiceOver is enabled in any other way (perhaps JS) and then hide/delete the iframe?

Answer 1

I know with Windows, there has been some discussion on how to detect if a screenreader is being used. One possible (but unreliable) method was mentioned, that involved using actionscript within Flash to see if the WMicrosoft Active Accessibility layer was being used. (http://www.paciellogroup.com/blog/?p=61)

Obviously this is not much use as you are targetting voice over users, who will not have Flash support on their devices, but I mention it just so you're aware of what other platforms do - I'm not overly familiar with Apples, so don't know if there is anything similar to Flash you could use.

In your case, you could make use of hidden text, including a link, that would be picked up by screenreaders, but not sighted users, that would point to an alternate page for screenreader users; this alternate page could replicate your existing page, just without having the embedded map.

Alternative, have just a hidden link that voiceover\screenreader users can skip past the map with, perhaps alerting them to the issue with VoiceOver getting 'stuck'.

Hidden text can be achieved by using CSS to position text with a negative margin e.g.

.hiddenText {
position: absolute;
margin-left: -3000px;
}

Using text in this way means it is not visible to sighted users (unless they disable CSS), but is still read out by screenreaders.

Neither solution is what you're really looking for I'm afraid, but might give you some ideas.

Answer 2

aria-hidden is what you're looking for.

<div>some stuff</div>
<div aria-hidden="true">stuff you want to hide from the screen reader</div>
<div>more stuff</div>