Page for Testing ARIA-Flowto and ARIA-owns Implementations

The three examples on this page implement approaches to altering the screen reader readng order of sections on a page using the aria-flowto attribute. The example code is altered from Using aria-flowto.

Example 1: Flow from Daily Plantet Heading to Election Results DIV

Using aria-flowto to suggest a navigation path from the heading element to div elements, labeled using aria-labelledby.

The Daily Planet One (and a link to nowhere for testing tab order)

Weather One

The weather will be what it will be, if you want a forecast look out your window and have a guess. That's what the pros do! (and a link to nowhere)

Election Results One

Whoever you vote for government wins. ANOK 1984 (and a link to nowhere)

Sports One

Today there will be lots of goals scored, tennis played and footballs kicked. (and a link to nowhere)

Example 2: Flow from Daily Plantet Heading to Election Results Section

Using aria-flowto to suggest a navigation path from the heading element to wrapping section elements, labeled using aria-labelledby.

The Daily Planet Two

Weather Two

The weather will be what it will be, if you want a forecast look out your window and have a guess. That's what the pros do!

Election Results Two

Whoever you vote for government wins. ANOK 1984

Sports Two

Today there will be lots of goals scored, tennis played and footballs kicked.

Example 3: Flow from Daily Planet Heading to a Choice of Sections

Using aria-flowto to suggest navigation paths from the heading element to wrapping section elements, labeled using aria-labelledby. This example provides a choice of flow-to navigation targets.

The Daily Planet Three