Flex order property, screen readers and accessibility

Question

I have a link as parent with display: flex and all children have different order with css.

With NVDA when the focus is on the link, the screen reader read all content following the DOM order.

On Mac with VoiceOver, the screenreader follow the order on the screen and not the DOM order.

How can i fix it?

a {
  display: flex;
}
div {
  order: 0;
}
h2 {
  order: 1;
}

<a href="#">
  <h2>Title</h2>
  <div>
    <span>€ 300</span>
  </div>
</a>

On windows, on focus i get: Title 300€
On Mac, on focus i get: 300€ Title

Answer 1

You can't fix this.

Any media, other than visual, that adheres to the order rules is non-conforming. You rely on non-conforming implementations at your own risk (i.e., the behavior can change at any time).

From the flexbox specification:

5.4.1. Reordering and Accessibility

The order property does not affect ordering in non-visual media (such as speech). Likewise, order does not affect the default traversal order of sequential navigation modes (such as cycling through links, see e.g. tabindex).

Authors must use order only for visual, not logical, reordering of content. Style sheets that use order to perform logical reordering are non-conforming.

Note: This is so that non-visual media and non-CSS UAs, which typically present content linearly, can rely on a logical source order, while order is used to tailor the visual order. (Since visual perception is two-dimensional and non-linear, the desired visual order is not always logical.)

read more...