title: Making VoiceOver for iOS ignore elements on a HTML page?
body: <p>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.</p>
  
  <pre><code>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 */
  </code></pre>
  
  <p>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?</p>