Use of Redundant ARIA roles
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 div element with role="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>
<button role="button"> This is a button with role button </button>