Question

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

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

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

我该如何解决？

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

你无法解决这个问题。

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

来自flexbox规范：

5.4.1. Reordering and Accessibility

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

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

注意：这是非视觉媒体和非CSS UAs，其中   通常线性地呈现内容，可以依赖于逻辑源   订单，而订单用于定制视觉订单。（因为视觉   感知是二维和非线性的，所需的视觉秩序   并不总是合乎逻辑的。）

read more...

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

1 个答案: