ARIA-Flowto (property)

Aria-flowto property should be used when the reading order of the content on the page is not sequential or meaningful. As per WCAG 2.0 1.3.1 Meaningful sequence the content on the web page should form a sequential and meaningful reading order. Screen readers render the content on the web page from the source code order. Sometimes the source code order may be different from required sequential order. To resolve this and ensure content flow to the right order aria-flowto property is used. If a single id is mentioned for aria-flowto property screen reader ignores the original reading order and takes the path specified by aria-flowto property. When multiple articles on the webpage form a sequential relation, multiple ids can be specified to aria-flowto property allowing the screen reader user to select from a group of items.

How to use aria-flowto (property)

Use aria-flowto property with the id from which the content to be flown. If multiple divs need to be referred mention them with a space between each id as shown in the code example.

Code Example

<h1 aria-flowto=”main”>what is accessibility</h1>
<div id=”footer”>
<a href=”link1.html”>link 1</a>
<a href=”link1.html”>link 1</a>
<a href=”link1.html”>link 1</a>
</div>
<div id=”main”>
<p>Accessibility means providing … </p>
</div>
If multiple references need to be used define as follows.
<h1 aria-flowto=”id1 id2 id3”>What is accessibility</h1>

Screen reader support for aria-flowto (property)

Currently aria-flowto property is supported by neither JAWS 15 nor NVDA 2014.3 but they may have support in future releases. JAWS 15 just announces flows from and flowsto along with the content but NVDA does not announce the existence of the property at all.

Leave a comment

View Other Blogs

Contact Us

Maxability Pvt Ltd Flat 360,
Block D2 SLS Signature Appartments,
Kaverappa Layout, Kadubeesanahalli,
Bangalore - 560103.

914 823 3361