Use of Redundant ARIA roles

From Level Access Web Labs
Revision as of 16:57, 9 May 2019 by Oedwards (talk | contribs) (Add role="presentation" on a div, with examples)
Jump to navigation Jump to search

Generally redundant roles are discouraged. In some rare cases there may be a need to use a redundant role.

  • Form with role=form will treat the form as a landmark.
  • Img with role=img allows hiding of non-labeled child svg elements when img src references an svg element
  • List with role=list is used on iOS with list-style-type:none to ensure VO speaks numbered list items
  • (Not strictly "redundant", but may cause similar confusion) A
    element with role of presentation causes VoiceOver on iOS to treat the div as a span. What this means specifically is that VoiceOver, which focuses both active and inactive content (e.g. paragraph text) for announcement when swiping right or left, splits text at a div boundary into a separate inactive focusable element, but does not split text at a span boundary. The following examples are simplified, and the div can just be replaced with a span (as in #2), but for some more complicated controls and structures, this use of role="presentation" is helpful:
<!-- #1: Receives two iOS VoiceOver focus steps, one on "Amount due is: " and one on "$23.45" -->
<div>Amount due is: <div id="amountDue>$23.45</div></div>

<!-- #2: Receives a single iOS VoiceOver focus step for all of "Amount due is: $23.45" -->
<div>Amount due is: <span id="amountDue>$23.45</span></div>

<!-- #3: Receives a single iOS VoiceOver focus step for all of "Amount due is: $23.45", the same as #3 -->
<div>Amount due is: <div role="presentation" id="amountDue>$23.45</div></div>