Difference between revisions of "Use of Redundant ARIA roles"

From Level Access Web Labs
Jump to navigation Jump to search
 
(6 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
Generally redundant roles are discouraged.  In some rare cases there may be a need to use a redundant role.
 
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.
+
* Form with role=form will treat the form as a landmark.
* Img with img role allows hiding of non-labeled child svg elements with img references an svg element as it's soure
+
* Img with role=img allows hiding of non-labeled child svg elements when img src references an svg element
* List with list role is used on iOS with list-style-type none to ensure VO speaks numbered list items
+
* 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:
  
[Category:ARIA]
+
<code><pre>
 +
<!-- #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>
 +
</pre></code>
 +
 
 +
<button role="button"> This is a button with role button </button>
 +
[[Category:ARIA]]

Latest revision as of 23:22, 17 November 2019

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>