JavaScript Element ariaFlowToElements Property

What You’ll Learn

Element.ariaFlowToElements is an instance property that holds an array of elements for an alternate reading order. Learn how it relates to aria-flowto, when one vs many targets matter, and how to get or set the relationship from JavaScript—with five examples and try-it labs.

Introduction

Documents usually flow in DOM order: section 1, then 2, then 3. Sometimes authors want to offer an alternate path—for example jump from section 1 to section 3—that assistive technologies can present as a choice.

aria-flowto advertises that alternate order. ariaFlowToElements is the modern element-reference form: you work with real DOM nodes instead of only managing id strings.

const next = section1.ariaFlowToElements;
next.forEach((el) => console.log(el.id));

Understanding the Property

MDN: the ariaFlowToElements property of the Element interface is an array containing the element (or elements) that provide an alternate reading order of content, overriding the general default reading order at the user’s discretion.

• Get / set — read or assign an array of elements.
• Flexible alternative to the aria-flowto attribute.
• No id required on targets when you set the property (MDN).
• Reflection — reads valid in-scope id refs from the attribute; setting the property clears the attribute.

📝 Syntax

ariaFlowToElements

Value

An array of subclasses of HTMLElement.

• One element — the next element in the alternate reading order.
• Multiple elements — each represents a possible path to offer.
• When read, the returned array is static and read-only.
• When written, the assigned array is copied—later edits to that array do not change the property.

⚖️ Property vs aria-flowto Attribute

📋 Alternate Section Flow (MDN Shape)

MDN’s example has three sections in normal order, plus an alternate path that jumps from section 1 to section 3 (and back) via aria-flowto:

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

MDN notes the example is illustrative unless accessibility tools are running—browsers do not automatically follow the alternate path for everyone.

Examples Gallery

Examples follow MDN Element: ariaFlowToElements. Labs feature-detect first so older browsers still show a clear message.

if ("ariaFlowToElements" in Element.prototype) {
  console.log("ariaFlowToElements is supported");
} else {
  console.log("ariaFlowToElements not supported by browser");
}

ariaFlowToElements is supported

if ("ariaFlowToElements" in Element.prototype) {
  const sections = document.querySelectorAll(".section");
  sections.forEach((sectionDivElement) => {
    console.log(sectionDivElement.id);
    console.log(" aria-flowto:", sectionDivElement.getAttribute("aria-flowto"));
    console.log(" ariaFlowToElements:");
    sectionDivElement.ariaFlowToElements?.forEach((elem) => {
      console.log("  id:", elem.id);
    });
  });
} else {
  console.log("ariaFlowToElements not supported by browser");
}

section1
 aria-flowto: section3
 ariaFlowToElements:
  id: section3
section2
 aria-flowto: null
 ariaFlowToElements:
section3
 aria-flowto: section1
 ariaFlowToElements:
  id: section1

const a = document.createElement("div");
const b = document.createElement("div");
a.textContent = "Start";
b.textContent = "Alternate next";
document.body.append(a, b);

if ("ariaFlowToElements" in Element.prototype) {
  a.ariaFlowToElements = [b];
  console.log({
    count: a.ariaFlowToElements.length,
    attrAfterSet: a.getAttribute("aria-flowto"),
    nextText: a.ariaFlowToElements.map((e) => e.textContent).join(" ")
  });
} else {
  console.log("ariaFlowToElements not supported by browser");
}

{
  "count": 1,
  "attrAfterSet": null,
  "nextText": "Alternate next"
}

const section1 = document.getElementById("section1");

console.log({
  fromAttribute: section1.getAttribute("aria-flowto"),
  supported: "ariaFlowToElements" in Element.prototype,
  fromProperty: "ariaFlowToElements" in Element.prototype
    ? section1.ariaFlowToElements.map((el) => el.id)
    : null
});

{
  "fromAttribute": "section3",
  "supported": true,
  "fromProperty": ["section3"]
}

console.log({
  supported: "ariaFlowToElements" in Element.prototype,
  tip: "Returned array is static/read-only; assigned arrays are copied",
  meaning: "Alternate reading paths for AT — not automatic page scroll",
  status: "Baseline Newly available (MDN, Apr 2025)"
});

{
  "supported": true,
  "tip": "Returned array is static/read-only; assigned arrays are copied",
  "meaning": "Alternate reading paths for AT — not automatic page scroll",
  "status": "Baseline Newly available (MDN, Apr 2025)"
}

🚀 Common Use Cases

• Offering an alternate reading path through long multi-section content.
• Complex layouts where DOM order is not the preferred AT path.
• Dynamic UIs that attach flow targets without assigning ids.
• Keeping script and markup aligned without manual setAttribute.
• Custom elements via ElementInternals.ariaFlowToElements.

🔧 How It Works

📝 Notes

• Not Deprecated, Experimental, or Non-standard on MDN (Baseline Newly available, Apr 2025).
• Feature-detect on older browsers.
• Returned arrays are static; assigned arrays are copied.
• Related: ariaHasPopup, ariaExpanded, EventTarget, JavaScript hub.

💡 Best Practices