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