This example demonstrates the normal flow through three elements section1, section2, section3 in order, and an alternative order that jumps from section1 to section3, and back again. Note that the example is illustrative unless you have accessibility tools running: we don't actually follow this alternate path.
The HTML defines three <div> elements that define sections, with a class "section", and id values: section1, section2, and section3. Each section has a normal flow defined by it's order, starting from section1 and ending at section3. An alternative flow is defined in sections 1 and 3 using the aria-flowto attribute.
#log {
height: 200px;
overflow: scroll;
padding: 0.5rem;
margin: 5px;
border: 1px solid black;
}
<div id="section1" class="section" aria-flowto="section3">
<h2>Section 1</h2>
<p>First section in normal flow. Section 3 is alternate flow.</p>
<a href="#section2">Jump to Section 2 (normal flow)</a>
</div>
<div id="section2" class="section">
<h2>Section 2</h2>
<p>Second section in normal flow.</p>
<a href="#section3">Jump to Section 3 (normal flow)</a>
</div>
<div id="section3" class="section" aria-flowto="section1">
<h2>Section 3</h2>
<p>
Third section in normal flow (end of flow). Section 1 is alternate flow.
</p>
</div>
The code first checks whether the ariaFlowToElements is supported, and if so, logs its value. It then iterates through the sections, logging the section id, aria-flowto attribute value, and ariaFlowToElements property value.
const logElement = document.querySelector("#log");
function log(text) {
logElement.innerText = `${logElement.innerText}${text}\n`;
logElement.scrollTop = logElement.scrollHeight;
}
// Feature test for ariaFlowToElements
if ("ariaFlowToElements" in Element.prototype) {
const sections = document.querySelectorAll(".section");
sections.forEach((sectionDivElement) => {
log(`${sectionDivElement.id}`);
log(` aria-flowto: ${sectionDivElement.getAttribute("aria-flowto")}`);
log(" ariaFlowToElements:");
// Get the ids of each of the elements in the array
sectionDivElement.ariaFlowToElements?.forEach((elem) => {
log(` id: ${elem.id}`);
});
});
} else {
log("element.ariaFlowToElements: not supported by browser");
}
The log below shows each of the sections (identified by id) and the corresponding flow-to element ids that might be selected by accessibility tools. We note here that the attribute and property identify the same flow-to elements.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.3