Flex 订单属性、屏幕阅读器和可访问性

Question

我有一个作为父母的链接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>

在 Windows 上，在焦点上我得到：标题 300 欧元
在 Mac 上，在焦点上我得到：300 欧元标题

Answer 1

你无法解决这个问题。

除了视觉之外，任何符合order规则的媒体都是不符合规定的。您需要自担风险依赖不符合标准的实现（即行为可能随时更改）。

来自 flexbox 规范：

5.4.1. 重新排序和可访问性

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

作者必须order仅用于视觉而非逻辑的内容重新排序。order用于执行逻辑重新排序的样式表是不一致的。

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

阅读更多...