Reputation: 2592
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
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
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