Can I determine if VoiceOver is enabled on a webpage on an iPhone?

Question

We are currently testing the deployment of “slippery” cards (i.e. those that are moved with your finger on a touch-screen device) in our mobile web application using the JavaScript touchmaplite library. This map is embedded in the iframe on our web page.

When we tested this setting on an iPhone with VoiceOver, we found that VoiceOver was “stuck” on the map and would not read past it (or even scroll through it). This is a big stumbling block for us, we do not want to go back with accessibility support on our site.

Is it possible to mark the item as “ignored” by VoiceOver or determine if VoiceOver is enabled in some other way (possibly JS) and then hide / remove the iframe?

Answer 1

I know on Windows, there was some discussion on how to determine if a screen tool is being used. One possible (but unreliable) method was mentioned that included using ActionScript in Flash to find out if the active accessibility level of WMicrosoft was being used. (Http://www.paciellogroup.com/blog/?p=61)

Obviously, this is not so much, because you are targeting the voice on top of users who will not have Flash support on their devices, but I mention it simply so that you know what other platforms do - I am not too familiar with Apples, so I don’t I know if there is something similar to Flash that you could use.

In your case, you can use hidden text, including a link that will be displayed on the screen, but not sighted users who will point to an alternative page for users of the simplest program; this alternate page can replicate your existing page, simply without a built-in map.

Alternatively, there is only a hidden link that voice users \ browsing pages can skip past the map, possibly warning them of a problem when VoiceOver gets "stuck".

Hidden text can be achieved using CSS to place text with a negative margin, for example.

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

Using text in this way means that it is not visible to visible users (unless they turn off CSS), but they are still read using screen readers.

None of the solutions you are really looking for, I'm afraid, but may give you some ideas.

Answer 2

aria-hidden is what you are looking for.

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