Flex订单属性，屏幕阅读器和辅助功能

Posted 2021-04-21

我有display: flex作为父母的链接，并且所有孩子与css有不同的顺序。

当焦点在链接上时，使用NVDA，屏幕阅读器将按照DOM顺序读取所有内容。

在具有VoiceOver的Mac上，屏幕阅读器遵循屏幕上的顺序而不是DOM顺序。

我该如何解决？

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

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

在窗户上，焦点我得到：标题300€ 在Mac上，焦点我得到：300€标题

答案

你无法解决这个问题。

任何符合order规则的视觉以外的媒体都是不符合要求的。您依靠不合规的实施需要您自担风险（即，行为可能随时发生变化）。

从flexbox规范：

5.4.1. Reordering and Accessibility

order属性不影响非视觉媒体（如语音）的排序。同样，order不会影响顺序导航模式的默认遍历顺序（例如循环链接，请参阅例如tabindex）。

作者必须仅将order用于内容的视觉，非逻辑，重新排序。使用order执行逻辑重新排序的样式表不符合要求。

注意：这使得通常以线性方式呈现内容的非可视媒体和非CSS UA可以依赖于逻辑源顺序，而顺序则用于定制可视顺序。 （由于视觉感知是二维和非线性的，因此所需的视觉顺序并不总是合乎逻辑的。）

read more...