The HTML aria-flowto attribute
aria-flowto points from one element to the next stop in an alternate reading order, named by id. Following it is the user's choice, and several ids are meant to appear as a choice of paths. The source order, Tab order and visible layout stay as they were.
Overview
The aria-flowto attribute names the next element, or elements, in an alternate reading order of content. Assistive technology can follow it in place of document source order, but only at the user's discretion, so source order remains the general default.
One id and several ids work differently. With one, assistive technology can go to the target at the user's request instead of following document order. With several, assistive technology should present the targets as path choices, and a path's name can come from its target.
The link sits beside the tree and doesn't reorganize it. A section with the attribute keeps its place among its siblings, and its target shows up in a separate flow-to relation, though Chrome and Firefox leave out a target that has the hidden attribute.
User agents or assistive technologies should offer the user a way to the targets. IAccessible2, UI Automation, ATK and the macOS accessibility API each have a mapping for the relation.
Syntax
<section id="intro" aria-label="Introduction" aria-flowto="part-2">
...
</section>
<aside>Related reading</aside>
<section id="part-2" aria-label="Part 2">...</section>Values
| Value |
|---|
| One or more element id values. |
Example
<p style="margin:0 0 6px">Check the box, then compare what the first section names as its next stop.</p>
<section id="start" aria-label="Get the installer" aria-flowto="win">Download the installer.</section>
<aside style="margin:4px 0;color:#595959">Support is open from 9 to 5.</aside>
<section id="win" aria-label="Windows setup">On Windows, run the setup file.</section>
<section id="mac" aria-label="macOS setup">On macOS, open the disk image.</section>
<p style="margin:8px 0"><label><input id="both" type="checkbox"> Offer both setup paths</label></p>
<p id="state" role="status" style="margin:0"></p>
<script>
const start = document.getElementById('start');
const both = document.getElementById('both');
const state = document.getElementById('state');
function report() {
const ids = start.getAttribute('aria-flowto').split(' ');
const names = ids.map(id => document.getElementById(id).getAttribute('aria-label'));
state.textContent = 'aria-flowto: ' + ids.join(' ') + '. Next stop named: ' + names.join(' or ') + '. Source order unchanged.';
}
both.addEventListener('change', () => {
start.setAttribute('aria-flowto', both.checked ? 'win mac' : 'win');
report();
});
report();
</script>Best practices
- Fix the source order before adding
aria-flowto. Pages should be sequentially navigable, and a reading path that differs from the source order is for rare cases. - Name every target, with aria-label or aria-labelledby for example. A path can take its name from the target, so an unnamed target may leave its path without a label.
- Chain the attribute across a longer detour. Each one names the next stop, so a target has to carry its own aria-flowto to lead anywhere further.
- Don't patch the order with tabindex or the CSS
orderproperty. The first can pull Tab order away from the DOM, and the second can do the same to visual order.
