Test case: CSS Flexbox

The CSS FlexBox module uses the display:; property and order:; property to impose a visual order on content that reflected in the DOM.

Basic HTML

A keyboard user should move through the links in sequence (1, 2, 3).

One
Two
Three

With flexbox

A keyboard user should move through the links in Flexbox order (3, 2, 1).

One
Two
Three

With flexbox and tabindex

One
Two
Three

With flexbox and aria-flowto

A keyboard user should move through the links in Flexbox order (3, 2, 1), and a screen reader user should have the opportunity to use a aria-floto shortcut to move through the links in the same order.

One
Two
Three