accessibility - 可访问性： aria-hidden="true"（对屏幕阅读器隐藏）具有可聚焦元素（允许键盘访问）

Question

我想对屏幕阅读器隐藏这个主题切换器 div，因为它们需要更改主题颜色。但对于键盘用户来说，它应该是可聚焦的。

我的问题是，不允许在 aria-hidden 节点内有可聚焦的元素。

此类问题是否有解决方法或最佳实践？

<div id="theme-switcher" aria-hidden="true">
  <button>Light</button>
  <button>Dark</button>
</div>

Answer 1

事实上，您不应该对屏幕阅读器隐藏颜色切换器。这是一个非常糟糕的主意，因为屏幕阅读器用户不一定是完全失明的。

您可能有足够的视力来查看颜色并使用颜色切换器，但需要屏幕阅读器，因为即使使用缩放，您也没有足够的视力来阅读文本。

因此，您最好将颜色切换器保持原样，不要将其隐藏到屏幕阅读器中。

Answer 2

我想我找到了解决方案。

通过实现“跳转到内容”链接，可以跳过此块和任何其他块。所以没有必要在这里添加任何 aria-hidden 标签。