Search code examples
htmlcssaccessibilitywai-ariatabindex

Specifying/overriding tabindex of all tab-able items within a DIV tag at once

Suppose I have this

<div id="div1">
 <span tabindex="0">Span0</span>
 <span tabindex="0">Span1</span>
 <span tabindex="0">Span2</span>
</div>
<div id="div2">
 <span tabindex="0">Span20</span>
 <span tabindex="0">Span21</span>
 <span tabindex="0">Span22</span>
</div>

Is there a way to make all the spans in div2 take precedence over the spans in dev1 in terms of tab order despite the fact that their tabindex values are all set to 0? Ie. if I tab into the page with screenreader on, it should iterate through the spans in div2 first when pressing tab before cycling into div1

Note: my actual use case is much more complex than this....this is just for illustration purposes

Note: I know that I can modify the tabindex values to non-zero but that is not what I'm looking for. I'm looking for the ability to set precedence of all items inside a div all at once despite the fact that the items are set as tabindex=0...

Note: This should also apply for all tab-able items in general, ie. not just those that are marked as tabindex="0"

Is there a way to do it WITHOUT javascript? Ie. either using html, css, or ARIA tags: https://msdn.microsoft.com/en-us/library/ie/gg701982%28v=vs.85%29.aspx? Is it possible to do it with the landmark roles: http://www.w3.org/WAI/PF/aria-practices/#focus_tabindex <--search for "Assign landmark roles to each region"?

If so how do I go about doing it

Solution

  • You could use the aria-flowto attribute:

    The objective of this technique is to specify alternate reading orders for the content by use of the aria-flowto property. When the aria-flowto property of an element has a single value, assistive technologies may forego the normal document reading order and go to the element whose id is equal to that value. When the aria-flowto property has multiple ids, assistive technologies may present the targeted elements to the user as alternatives, identified by the names of the target elements, for the next content in the reading order.

    using aria-flowto

    The problem with this technique is that it is currently not very widely supported by screen readers, so you will have to test your target ones for compatibility.

    This is what the markup would look like

    <h2 aria-flowto="div2">Header before messy content</h2>
<div id="div1" aria-flowto="after">
 <span tabindex="0">Span0</span>
 <span tabindex="0">Span1</span>
 <span tabindex="0">Span2</span>
</div>
<div id="div2" aria-flowto="div1">
 <span tabindex="0">Span20</span>
 <span tabindex="0">Span21</span>
 <span tabindex="0">Span22</span>
</div>
<h2 id="after">Header after messy content</h2>