响应式用户界面 - 修改屏幕阅读器中的阅读顺序？

Question

我是一位有用的助手，可以进行文本翻译。以下是您需要翻译的内容：

我有一个响应式布局，必须能够被屏幕阅读器访问。问题在于桌面和移动设备上按钮的顺序不同。 在桌面上，按钮的顺序为

Cancel - Remind Me Later - Learn More

在桌面端，按钮的顺序是从左到右，而屏幕阅读器也是按照这个顺序阅读。然而，在移动设备上，按钮的顺序是垂直排列的，并且与桌面端相反：

了解更多 稍后提醒我 取消

问题在于，屏幕阅读器仍然按照桌面模式的方式阅读，而视觉顺序不再匹配。

是否有一种方法可以让屏幕阅读器根据视口改变阅读顺序？

- Andrew

---

你应该检查一下你源代码中按钮的顺序。你能否发布一些源代码，这样大家就可以看到问题出在哪里呢？ - Tsundoku

使主题更易读，提供了两种情况的视觉模型，以便进行更方便的视觉比较。 - montrealist

Answer 1

通常情况下，屏幕阅读软件会忽略 CSS（*）。您 DOM 中的顺序就是屏幕阅读器读取它的顺序。即使您使用了 tabindex，那也仅控制通过接口的切换顺序。如果您使用 CSS 重新定位元素，无论是通过 flexbox 还是 grid 还是 float，屏幕阅读软件都会忽略它。

屏幕阅读器用户可以使用上/下箭头键简单地遍历 DOM（**）。 （** 用户实际上并不是在遍历 DOM 而是 可访问性树，但它与 DOM 类似。并非 DOM 中的每个元素都在可访问性树中，但这是一个类似的比喻）。

因此，“控制”屏幕阅读器听到元素的唯一方法是修改 DOM 中元素的顺序。

（*）（如果您使用了:before或:after伪元素并设置了content属性，那么在“可访问名称和描述计算”的步骤2F中已经说明，屏幕阅读器会读取该属性。）

- slugolicious

Answer 2

这是一个常见的问题，你可以采取一些解决方案。不了解你的代码库，以下是一些建议：

2. 如果你不知道你的标记有多复杂，那么你可以提供一个在小屏幕上可见的表单元素版本。这样你就可以明确地控制可访问性树结构。

3. 另一个选择是，你可以使用 CSS（flexbox 或 grid）根据小屏幕的媒体查询重新定位按钮。

4. 虽然这种方法可以工作，但我不建议使用 "tabindex="1", "2", "3" "..." 来控制 tab 顺序，因为你的 UI 不会按正确的顺序呈现。

希望这可以帮到你。祝你的项目好运。

- xirclebox

Answer 3

屏幕阅读器是否有一种方式可以根据视口更改阅读顺序？

一个解决方案是拥有两组相同的菜单，并使用媒体查询来使用其中之一。

<div class="desktop">Cancel - Remind Me Later - Learn More</div>
<div class="mobile">
Learn more
Remind me later
Cancel
</div>

CSS：

.mobile {display:none}
@media screen and (max-width: 600px) {
   .desktop {display:none}
   .mobile {display:block}
}

这样，您就可以自由地让DOM顺序与视觉顺序匹配。

- Adam