JavaScript Element ariaFlowToElements Property

Beginner
5 min read
Updated: Nov 2026
3 examples
Property
Decorative image with the word ARIAFLOWTOELEMENTS

Definition

Element.ariaFlowToElements is an array of elements that provide an alternate reading order, overriding the default order at the user’s discretion (MDN). It is the element-reference form of aria-flowto.

Read the notes below before you get or set this property. Prefer feature detection when support is limited.

Syntax

Use el.ariaFlowToElements. Start with this line.

JavaScript
const next = section1.ariaFlowToElements;
CallWhat it does
const next = section1.ariaFlowToElements;Primary signature.

Built into the browser. Read or assign el.ariaFlowToElements — no import required.

Library declarations
JavaScript
const next = section1.ariaFlowToElements;

Parameters

ParameterDescription
PropertyRequired. el.ariaFlowToElements
AttributeOptional. aria-flowto id list

Return Value

Return ValueDescription
*The current value of el.ariaFlowToElements.

JavaScript Examples

Example 1 — Read from aria-flowto (MDN)

Log each section’s attribute and resolved flow-to element ids.

JavaScript
const sections = document.querySelectorAll(".section");

if ("ariaFlowToElements" in Element.prototype) {
  sections.forEach((el) => {
    console.log(el.id);
    console.log(" aria-flowto:", el.getAttribute("aria-flowto"));
    el.ariaFlowToElements.forEach((target) => {
      console.log("  →", target.id);
    });
  });
} else {
  console.log("ariaFlowToElements not supported");
}
Try It Yourself

How It Works

  1. Select the sections that may declare alternate flow.
  2. Feature-detect the property. Baseline Newly available since Apr 2025.
  3. Read ariaFlowToElements. Valid ids become element nodes.
  4. Log target ids. Matches MDN’s get-flow-to demo.

Example 2 — Set Flow Targets Without ids

Assign element references; the attribute is cleared (MDN).

JavaScript
const s1 = document.getElementById("section1");
const s3 = document.getElementById("section3");

if ("ariaFlowToElements" in Element.prototype) {
  s1.ariaFlowToElements = [s3];
  console.log("count:", s1.ariaFlowToElements.length);
  console.log("attr:", s1.getAttribute("aria-flowto")); // null
} else {
  console.log("ariaFlowToElements not supported");
}
Try It Yourself

How It Works

  1. Hold real DOM nodes for the next path.
  2. Assign an array. No id required when setting the property (MDN).
  3. Expect a cleared attribute. Setting the property clears aria-flowto.
  4. Remember: this advertises a path — it does not auto-scroll the page.

Example 3 — Feature-Detect Before Use

Guard older browsers; keep an attribute fallback if needed.

JavaScript
if ("ariaFlowToElements" in Element.prototype) {
  console.log("ariaFlowToElements is supported");
} else {
  console.log("ariaFlowToElements not supported by browser");
  // fallback: getAttribute("aria-flowto") + getElementById
}
Try It Yourself

How It Works

  1. Use in Element.prototype. Safe check without calling the getter.
  2. Branch on support. New API — not every engine has it yet.
  3. Keep id + attribute fallback when you still need the relationship.
  4. Prefer the property when supported — elements need no id.
Compatibility

Browser Support

Element.ariaFlowToElements is Baseline Newly available (MDN: across latest browsers since April 2025). Feature-detect on older engines and keep an aria-flowto id fallback if needed.

✓ Baseline 2025 · Newly available

ariaFlowToElements

Element-reference form of aria-flowto for alternate reading order.

2025 Newly available
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
ariaFlowToElements Latest browsers

Bottom line: Prefer the property when supported. One target = next path; many = choices. Setting clears the attribute.

Frequently Asked Questions

An array of HTMLElement subclasses that provide an alternate reading order, overriding the default order at the user's discretion (MDN). One element is the next path; multiple elements are possible paths to offer.
No. MDN marks Element.ariaFlowToElements as Baseline 2025 Newly available (since April 2025). It is not Deprecated, Experimental, or Non-standard. Feature-detect on older browsers.
The attribute uses space-separated id strings. The property uses Element references. Assigned elements do not need an id. Setting the property clears the corresponding attribute (MDN).
No. aria-flowto / ariaFlowToElements advertise alternate paths that accessibility tools may offer. Normal document order for sighted users is unchanged unless you also provide visible navigation.
No. When read, the returned array is static and read-only. When written, the assigned array is copied — later changes to that array do not update the property (MDN).
Yes. Custom elements can use ElementInternals.ariaFlowToElements for the same relationship from inside a component (MDN).

Next: ariaHasPopup

Learn the Element property that declares a control opens a popup.

ariaHasPopup tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

11 people found this page helpful

JavaScript Element ariaExpanded Property JavaScript Element ariaHasPopup Property