HTML development and VoiceOver

App Development & Programming

I didn't see a good forum group for questions specific to HTML. The "App Development" group is probably more about writing native iOS apps in objective-c (or swift) but I'm writing applications in html5, css, and javascript. I'll post here anyway because it's the closest match.

Has anyone found a list of why a VoiceOver touch target loses its "touchiness"?

Let me explain a little bit. I often use <svg> elements to overlay on top of images so that VoiceOver users have touch targets and can explore the image. (Not sure if "touch target" is the right term but with VoiceOver on, as you drag your finger around the screen, you can hear VO read the various elements. Each element that it can read I consider a "touch target".)

For example, if I have a bar chart image, I will have <rect> objects where the bars are and the <rect> will have a role=text and an aria-label. This allows you to explore the bar chart. You can get a sense for how tall or wide the bars are because your finger will move off the <rect> touch target. The aria-label usually has information about the height of the bar or what data it represents.

Sometimes my touch targets lose their touchiness. VoiceOver loses the element and you can't find it. So far, I've found 5 reasons why this might happen but I'm curious if there are more.

1. Role=text gets lost
2. Aria-label gets blanked out or removed
3. Display (CSS) gets set to none
4. Visibility (CSS) gets set to hidden
5. Aria-hidden gets set to true
6. Another object is on top of the touch target that is not a touch target itself (z-order problem)

I have a case where none of these conditions are true yet my touch target is still lost. The html application works fine for visual users and a mouse but VoiceOver loses the ability to navigate to the element. I'm hoping someone knows of other reasons or knows of another forum or website that talks about html and voiceover development.