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

Question

我的响应式布局必须可供屏幕阅读器访问。问题出在台式机与移动设备上。 在台式机上，按钮顺序为

Symbol

...，屏幕阅读器从左到右阅读。但是，在移动设备上，按钮顺序是垂直堆叠的，并且顺序与桌面相反：

Cancel - Remind Me Later - Learn More

问题在于屏幕阅读器仍会像用户处于桌面模式一样进行读取-视觉顺序不再匹配。

屏幕阅读器是否可以根据视口更改阅读顺序？

Answer 1

这是一个常见问题，您可以执行一些解决方案。在不了解您的代码库的情况下，这里有一些建议：

1. 不知道标记的复杂程度，可以提供仅在小屏幕上可见的表单元素版本。这样，您可以显式控制可访问性树结构。

2. 另一个选项，您可以使用CSS（flexbox或grid）根据媒体查询针对小屏幕重新定位按钮。

3. 虽然这可行，但我建议不要使用“ tabindex =” 1“，” 2“，” 3“” ...“来控制制表符顺序，因为您的UI如何无法正确呈现仍然要订购。

希望这会有所帮助。祝您项目顺利。

Answer 2

通常，屏幕阅读软件会忽略CSS（*）。 DOM的顺序就是屏幕阅读器将其读取的顺序。即使您使用了tabindex，也只能控制通过界面进行跳格的顺序。如果使用CSS重新定位元素，无论是通过flexbox还是通过grid或float，屏幕阅读软件都将忽略它。

屏幕阅读器用户只需使用向上/向下箭头键即可浏览DOM（**）。 （**用户并没有真正走过DOM，而是走accessibility tree，但它与DOM相似。并非DOM中的每个元素都会在可访问性树上，但这是一个相似的类比。）

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

（*）（如果您有一个带有:before属性的:after或content伪元素，则屏幕阅读器将读取该属性 如“ Accessible Name and Description Computation的步骤2F所述）

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顺序与视觉顺序匹配。