从屏幕阅读器中隐藏不相关的可聚焦元素

Question

我的页面上有一个元素，它水平溢出并用于overflow: auto允许内容滚动到视图中。所有内容都在加载时呈现（即它始终存在于 DOM 中，在滚动到视图中时不呈现）。

页面上还有两个自定义按钮，它们使用 JavaScript 将此元素向左和向右滚动。

我需要鼠标用户可以点击按钮，键盘用户可以聚焦按钮。但对于屏幕阅读器用户来说，这些按钮实际上没有任何作用，因为元素滚动这一事实与屏幕阅读器无关，无论如何，屏幕阅读器都会宣布所有内容。

我尝试放置aria-hidden按钮容器，但这不符合可访问性规则aria-hidden-focus（请参阅https://accessibilityinsights.io/info-examples/web/aria-hidden-focus/），因为按钮仍然可聚焦。

我的目标是为所有用户实现最佳体验，这对于屏幕阅读器意味着隐藏无用的按钮。但如果不使用 JavaScript 来尝试检测屏幕阅读器，我就无法找到一种方法来做到这一点，这似乎有点粗俗且容易出错。

有没有一种方法可以解决这个问题，同时提供良好的整体体验？

Answer 1

您不应该将 aria-hidden=true 放在可聚焦元素上，原因很简单，因为存在矛盾：

• When an element is focused, the screen reader must say something, so that the user knows what is under focus now
• The aria-hidden attribute tells the screen reader that this element is irrelevant and should be totally ignored

The first rule is generally stronger than the second because it doesn't make sense at all to say absolutely nothing when the element is focused. Thus the aria-hidden=true is probably going to be partially or totally ignored. For example, the element can be correctly announced when focused, but may not be announced at all because of aria-hidden=true when reading the page in virtual cursor / browse mode. The result for the user is confusion, since sometimes the element appears to be present, and sometimes it isn't.

So, aria-hidden=true and non-focusability always go together. It's always whether both, or none.

However, beyond the pure technical explanation, it makes in fact no sense to have a focusable element ignored by screen readers, if you consider that blind people aren't alone to use them. Screen readers are also used by partially sighted, as well as dyslexic people for example.

Someone may have enough vision to have an usefulness for your scrolling thing, but not enough to read text on screen or using a mouse comfortably. A person with dyslexia, a normal vision, but using the keyboard for whatever reason (there exists a lot), may use a screen reader because reading text on screen is so uncomfortable or exhausting.

So, to wrap up, you have two possible options:

• Hide the element to screen readers and make it non focusable, i.e. aria-hidden=true + tabindex=-1
• Keep the element focusable and visible for screen readers, i.e. add tabindex=0 if the element isn't already naturally focusable

If you really think that your thing is only useful for mouse and touch users as well as those using another direct pointing device, but absolutely not for keyboard and screen reader users, go ahead for the first option. In any other case, doing so will lessen accessibility for some users, and you should stay with the second option.