我有一个响应式布局,必须可供屏幕阅读器访问。问题在于桌面与移动设备上的按钮顺序。
在桌面上,按钮顺序是
Cancel - Remind Me Later - Learn More
...屏幕阅读器从左到右阅读。但是在移动设备上,按钮顺序是垂直堆叠的,并且与桌面相反:
Learn more
Remind me later
Cancel
问题是屏幕阅读器仍然像用户处于桌面模式一样阅读 - 视觉顺序不再匹配。
屏幕阅读器是否可以根据视口(viewport)更改阅读顺序?
最佳答案
通常,屏幕阅读软件会忽略 CSS (*)。 DOM 的顺序是屏幕阅读器读取它的顺序。即使您使用了 tabindex
,它也只会控制通过界面的制表顺序。如果您使用 CSS 重新定位元素,无论是通过 flexbox 还是网格或 float ,屏幕阅读软件都会忽略这一点。
屏幕阅读器用户可以使用向上/向下箭头键简单地浏览 DOM (**)。 (** 用户并没有真正在 DOM 中行走,而是在 accessibility tree 中行走,但它与 DOM 相似。并非 DOM 中的每个元素都会在可访问性树上,但这是一个类似的类比)。
因此,“控制”屏幕阅读器听到元素顺序的唯一方法是修改 DOM 中元素的顺序。
(*)(如果您有一个 :before
或 :after
具有 content
属性的伪元素,则该属性 将由屏幕阅读器读取 ,如“Accessible Name and Description Computation”的步骤 2F 中所述)
关于user-interface - 响应式 UI - 修改屏幕阅读器中的阅读顺序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52933690/