CODEWITHSUNDEEP
htmlioscssaccessibilityvoiceover
JDubyew
JDubyew

Reputation: 51

Making VoiceOver for iOS ignore elements on a HTML page?

I'm working on improving the accessibility of a web app. There's a button that consists of a checkbox, a label and pictures within that checkbox, and when selecting it via swiping left and right on an iPad with VoiceOver on, the VoiceOver highlights the individual elements within the button rather than the whole button as a singular element. I've attempted to style the CSS with several different properties to make the VoiceOver feature in iOS ignore these individual elements.

aria-hidden:true;
speak:none;
user-select:none;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Safari */
-khtml-user-select: none; /* Konqueror HTML */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
                   supported by Chrome and Opera */

They made no difference whatsoever. I've cleared the cache in Safari to make sure the CSS is updating correctly, and on desktop I can see those properties are indeed there for the different elements, but iOS still decides to ignore the CSS and reads out the elements/allow those elements to be selected regardless. All other research I've done implies the only other way to disable VoiceOver is by explicitly disabling it in a full-blown app. Are there any other methods I've missed?

Upvotes: 3

Views: 3115

Answers (1)

slugolicious
slugolicious

Reputation: 17563

You had the right idea, just used improperly. aria-hidden is not a CSS property, it's an attribute you put on the html tag. So to hide a button, you would have

<button aria-hidden="true">voiceover won't see me</button>

However, make sure that the label for your checkbox is programmatically associated with the checkbox itself and not just physically next to it in the DOM. If they're not associated, then VoiceOver will not draw the border around the entire checkbox and label.

Incorrect:

<input type="checkbox">
<label>i like puppies</label>

Correct:

<input type="checkbox" id="myid">
<label for="myid">i like puppies</label>

Upvotes: 3

Related Questions