user-interface - 响应式 UI - 修改屏幕阅读器中的阅读顺序?

标签 user-interface dom accessibility screen-readers

我有一个响应式布局,必须可供屏幕阅读器访问。问题在于桌面与移动设备上的按钮顺序。
在桌面上,按钮顺序是

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/

相关文章:

python - 你如何创建一个 Tkinter GUI 停止按钮来打破无限循环?

php - 用于更快加载的前端 UI

java - 如何使用Java绘制不完整的多边形

Javascript:让用户选择像 Firebug 这样的 HTML 元素?

jquery - 如何清除表行中的所有输入框、文本区域数据而不删除行?

html - 在不影响布局的情况下使内联链接的可点击区域更大

javascript - 输入时读取登录凭据中的计时器的辅助功能 (ADA) 问题

ios - 将 UI 元素设置为单例是不好的做法吗?

javascript - 改变元素的尺寸

javascript - 具有辅助功能的浏览器是否支持 CSS 或 JavaScript?