我的页面上有一个元素水平溢出，使用overflow: auto允许内容滚动到视图中。所有内容在加载时呈现（即它总是出现在DOM中，滚动到视图中时不呈现）。
页面上还有两个自定义按钮，使用JavaScript向左和向右滚动该元素。
我需要鼠标用户可以点击按钮，键盘用户可以聚焦按钮。但是对于屏幕阅读器用户来说，这些按钮真的没有任何作用，因为元素滚动的事实与屏幕阅读器无关，屏幕阅读器无论如何都会宣布所有的内容。
我尝试将aria-hidden放在按钮容器上，但这不符合可访问性规则aria-hidden-focus（请参见https://accessibilityinsights.io/info-examples/web/aria-hidden-focus/），因为按钮保持可聚焦。
我的目标是为所有用户实现最佳体验，这对屏幕阅读器来说意味着隐藏没有任何作用的按钮。但我无法找到一种方法来做到这一点，而不使用JavaScript来尝试和检测屏幕阅读器，这似乎有点粗糙和容易出错。
有没有一种方法可以解决这个问题，同时提供一个良好的经验呢？
2条答案
按热度按时间qoefvg9y1#
你不应该把aria-hidden=true放在一个可聚焦的元素上，原因很简单，那就是存在一个矛盾：
第一个规则通常比第二个规则更强，因为当元素被聚焦时，什么都不说是没有意义的。因此，aria-hidden=true可能会被部分或全部忽略。例如，元素可以在被聚焦时正确地声明。但是当在虚拟光标/浏览模式下阅读页面时可能由于aria-hidden=true而根本不被通告。结果是用户混淆，因为有时候元素看起来存在，有时候不存在
所以，aria-hidden=true和non-focusability总是同时存在的，总是两者都有，或者没有。
然而，除了纯粹的技术解释之外，如果你考虑到盲人并不是唯一使用屏幕阅读器的人，那么屏幕阅读器忽略可聚焦元素实际上是没有意义的。例如，部分视力和阅读障碍的人也使用屏幕阅读器。
有些人可能有足够的视力，有一个有用的滚动的东西，但不足以阅读屏幕上的文字或舒适地使用鼠标。一个人有阅读障碍，视力正常，但使用键盘的原因（有很多），可能会使用屏幕阅读器，因为阅读屏幕上的文字是如此不舒服或疲惫。
所以，总结一下，你有两个可能的选择：
如果你真的认为你的东西只对鼠标和触摸屏用户有用，以及那些使用其他直接指向设备的用户，而绝对不是键盘和屏幕阅读器用户，那么就选择第一个选项。在任何其他情况下，这样做会降低一些用户的可访问性，你应该选择第二个选项。
ryoqjall2#
我相信澄清一个常见的误解会使解决办法非常清楚。
大约22%的屏幕阅读器用户有视力，但视力较低
从辅助功能开始时，常见的误解是屏幕阅读器只由盲人使用，因此您可以将可视UI与屏幕阅读器UI区别对待。
事实并非如此，因此规则 aria-hidden-focus 和WCAG Criterion 2.5.3 Label in Name