CODEWITHSUNDEEP
htmlaccessibilitywai-aria
EGN
EGN

Reputation: 2592

Accessibility: Tab order within a specific section only

I'm facing a scenario where I need to tell screen readers to read content in order in a specific section only given that the HTML mark up is not in order.

Here is the HTML

<!-- Everything above this section -->
<div class="section-of-concern">
   <div id="div2" style="float: right"></div>
   <div id="div1" style="float: left"></div>
</div>
<!-- Everything below this section -->

The browser renders this markup and puts div1 to the left and div2 to the right. But screen readers think that div2 is coming first since the markup for it is coming first. I was wonder if there is a way to correct this with some attributes rather than changing the entire design.

Upvotes: 0

Views: 397

Answers (2)

Rodrigo Prestes Machado
Rodrigo Prestes Machado

Reputation: 128

Maybe you can use the tabindex. The tabindex attribute can be used to include additional elements in the tab order and to set programmatic focus to them to order the elements, for example:

tabindex="X" (where X is a positive integer between 1 and 32768)

For more information: http://www.w3.org/TR/2009/WD-wai-aria-practices-20090224/#focus_tabindex

Upvotes: 0

unobf
unobf

Reputation: 7254

Until the AT and browser vendors provide full support for the aria-flowto attribute, your only solution is to change the DOM order to reflect the visual order and modify your CSS so that your visual presentation remains the same.

Upvotes: 2

Related Questions