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

问题描述 投票:1回答:1

我有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€标题

html css flexbox accessibility voiceover
1个回答
2
投票

你无法解决这个问题。

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

从flexbox规范:

5.4.1. Reordering and Accessibility

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

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

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

read more...

© www.soinside.com 2019 - 2024. All rights reserved.