响应式 UI - 修改屏幕阅读器中的阅读顺序？
Responsive UI - modify reading order in screen readers?
我有一个响应式布局，屏幕 reader 必须可以访问它。问题在于桌面与移动设备上的按钮顺序。
在桌面上，按钮顺序为
Cancel - Remind Me Later - Learn More
...屏幕 reader 从左到右阅读。但是在移动设备上，按钮顺序是垂直堆叠的，并且与桌面相反：
Learn more
Remind me later
Cancel
问题是屏幕 reader 仍然像用户在桌面模式下一样阅读 - 视觉顺序不再匹配。
有没有办法让屏幕 reader 根据视口更改阅读顺序？
这是一个常见问题，您可以采取一些解决方案。在不太了解您的代码库的情况下，这里有一些给您的建议：
不知道您的标记有多复杂，您可以提供仅在小屏幕上可见的表单元素版本。这样您就可以明确控制可访问性树结构。
另一种选择，您可以使用 CSS（flexbox 或网格）根据小屏幕的媒体查询重新定位按钮。
虽然这可行，但我不建议使用 "tabindex="1"、"2"、"3" "..." 来控制 Tab 键顺序，因为您的 UI 无论如何都没有以正确的顺序呈现。
希望这对您有所帮助。祝你的项目好运。
一般情况下，读屏软件会忽略CSS(*)。您 DOM 的顺序就是屏幕 reader 读取它的顺序。即使您使用 tabindex，那也只会控制界面中的 Tab 键顺序。如果您使用 CSS 重新定位元素，无论是通过 flexbox 还是 grid 或 float，屏幕阅读软件都会忽略它。
屏幕 reader 用户只需使用 up/down 箭头键即可在 DOM (**) 中行走。 (** 用户实际上并不是在 DOM 上行走，而是在 accessibility tree 上行走，但它与 DOM 类似。并非 DOM 中的每个元素都在可访问性上树，但这是一个类似的类比）。
因此，"control" 屏幕 reader 听到元素的顺序的唯一方法是修改 DOM 中元素的顺序。
(*)（如果你有一个 :before 或 :after 伪元素和 content 属性，那 属性 将 由屏幕 reader 读取，如“Accessible Name and Description Computation”)
的步骤 2F 中所述
Is there a way for the screen reader to change the reading order depending on the viewport?
一个解决方案是拥有两套相同的菜单，并使用您的媒体查询来使用其中一套
<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 顺序与视觉顺序相匹配。
我有一个响应式布局，屏幕 reader 必须可以访问它。问题在于桌面与移动设备上的按钮顺序。 在桌面上，按钮顺序为
Cancel - Remind Me Later - Learn More
...屏幕 reader 从左到右阅读。但是在移动设备上，按钮顺序是垂直堆叠的，并且与桌面相反：
Learn more
Remind me later
Cancel
问题是屏幕 reader 仍然像用户在桌面模式下一样阅读 - 视觉顺序不再匹配。
有没有办法让屏幕 reader 根据视口更改阅读顺序？
这是一个常见问题，您可以采取一些解决方案。在不太了解您的代码库的情况下，这里有一些给您的建议：
不知道您的标记有多复杂，您可以提供仅在小屏幕上可见的表单元素版本。这样您就可以明确控制可访问性树结构。
另一种选择，您可以使用 CSS（flexbox 或网格）根据小屏幕的媒体查询重新定位按钮。
虽然这可行，但我不建议使用 "tabindex="1"、"2"、"3" "..." 来控制 Tab 键顺序，因为您的 UI 无论如何都没有以正确的顺序呈现。
希望这对您有所帮助。祝你的项目好运。
一般情况下，读屏软件会忽略CSS(*)。您 DOM 的顺序就是屏幕 reader 读取它的顺序。即使您使用 tabindex，那也只会控制界面中的 Tab 键顺序。如果您使用 CSS 重新定位元素，无论是通过 flexbox 还是 grid 或 float，屏幕阅读软件都会忽略它。
屏幕 reader 用户只需使用 up/down 箭头键即可在 DOM (**) 中行走。 (** 用户实际上并不是在 DOM 上行走，而是在 accessibility tree 上行走，但它与 DOM 类似。并非 DOM 中的每个元素都在可访问性上树，但这是一个类似的类比）。
因此，"control" 屏幕 reader 听到元素的顺序的唯一方法是修改 DOM 中元素的顺序。
(*)（如果你有一个 :before 或 :after 伪元素和 content 属性，那 属性 将 由屏幕 reader 读取，如“Accessible Name and Description Computation”)
Is there a way for the screen reader to change the reading order depending on the viewport?
一个解决方案是拥有两套相同的菜单，并使用您的媒体查询来使用其中一套
<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 顺序与视觉顺序相匹配。