aria-flowto — Defining Custom Reading Order for Screen Readers

In this tutorial, you will learn about aria. We cover key concepts, practical examples, and best practices to help you master this topic.

aria-flowto defines an alternative reading order through content, allowing screen reader users to navigate in a sequence that differs from the DOM order when needed for comprehension.

In this tutorial, you'll learn how to use aria-flowto in ARIA implementations.

What You'll Learn

By the end of this lesson, you'll understand when to use aria-flowto, how it affects screen reader navigation, and the potential risks of non-standard reading order.

Why It Matters

Complex layouts sometimes need a reading order different from the DOM. aria-flowto provides this, but it must be used carefully as it overrides the natural DOM order.

Real-World Use

Doda Browser's documentation uses aria-flowto in specific sidebar layouts where the visual reading order differs from the source order.

Reading Order Flow

flowchart LR
  A[Element with aria-flowto] --> B[Next element ID]
  B --> C[Screen reader follows flow]
  C --> D[Second element's aria-flowto]
  D --> E[Next element]
  E --> F[Chain continues]

How aria-flowto Works

aria-flowto defines the next element in a custom reading order:

<p id="summary" aria-flowto="details">
  Scan found 3 threats.
</p>
<div id="details">
  <p>Threat 1: malware.exe (Quarantine)</p>
  <p>Threat 2: virus.doc (Deleted)</p>
  <p>Threat 3: spyware.dll (Cleaned)</p>
</div>

When the screen reader reaches the summary paragraph, it can offer to navigate to the details div next, even if the DOM order is different.

Multiple Flowto Targets

aria-flowto can reference multiple elements, giving the user choices:

<h1 aria-flowto="main-content related-links">Results</h1>
<main id="main-content">...</main>
<aside id="related-links">...</aside>

The screen reader gives the user options to navigate to either target.

When NOT to Use aria-flowto

Do not use aria-flowto as a substitute for correct DOM order. Always structure your HTML in logical reading order first.

Use aria-flowto only when:

• Visual layout forces a different reading order
• DOM order cannot be changed (legacy systems, CMS constraints)
• The user needs explicit guidance through content

Common Mistakes

• Using aria-flowto instead of fixing DOM order: Fix the DOM first.
• Creating broken chains: If a referenced element does not exist, the chain breaks.
• Creating circular flows: Element A flows to B, B flows to A.
• Overusing aria-flowto: Too many flowto references confuse users.
• Not testing with screen readers: The reading order may not work as expected across all screen readers.

Practice and Challenge

1. What does aria-flowto define? An alternative reading order through content.

2. When should you first try to fix reading order instead of using aria-flowto? When you can change the DOM order to match the logical reading order.

3. Can aria-flowto reference multiple elements? Yes, with a space-separated list of IDs.

4. What happens if a referenced element does not exist? The flow chain breaks at that point.

5. Challenge: Find a page layout where visual order differs from DOM order. Propose using aria-flowto or, better, a DOM reordering solution.

FAQ

Mini Project

Take a CSS Grid layout where the visual reading order differs from the source order. First try reordering the DOM. If that fails, use aria-flowto to define the correct reading order.

What's Next

Continue to aria-controls to learn how to indicate which element a control operates on.