Element: ariaFlowToElements property

An array of subclasses of HTMLElement.

When read, the returned array is a static and read-only. When written, the assigned array is copied: subsequent changes to the array do not affect the value of the property.

The property is a flexible alternative to using the aria-flowto attribute to set an alternative reading order. Unlike aria-flowto, the elements assigned to this property do not have to have an id attribute.

The property reflects the element's aria-flowto attribute when it is defined, but only for listed reference id values that match valid in-scope elements. If the property is set, then the corresponding attribute is cleared. For more information about reflected element references and scope see Reflected element references in the Reflected attributes guide.

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.

HTML

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.

<pre id="log"></pre>

#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>

JavaScript

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");
}

Result

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.

• aria-flowto attribute
• ElementInternals.ariaFlowToElements
• Reflected element references in the Attribute reflection guide.