[英]Accessibility: aria-hidden="true" (hide for screen readers) with focusable elements (allow keyboard access)
I want to hide this theme-switcher div from screen readers, as they are needed to change the theme colours.我想对屏幕阅读器隐藏这个主题切换器 div,因为需要它们来更改主题颜色。 But it should be focusable for keyboard users.但对于键盘用户来说,它应该是可聚焦的。
My problem is, it is not allowed to have focusable elements inside an aria-hidden node.我的问题是,不允许在 aria-hidden 节点中包含可聚焦元素。
Is there a workaround or best practice for this kind of problems?是否有针对此类问题的解决方法或最佳实践?
<div id="theme-switcher" aria-hidden="true">
<button>Light</button>
<button>Dark</button>
</div>
In fact, you shouldn't hide the color switcher to scren readers.事实上,您不应该向屏幕阅读器隐藏颜色切换器。 That's quite a bad idea, because ascreen reader user isn't necessarily completely blind.这是一个非常糟糕的主意,因为屏幕阅读器用户不一定完全失明。
You may have enough vision to see colors and have an use for the color switcher, but need a screen reader because you don't have enough vision to read text even with a zoom.您可能有足够的视力来查看 colors 并使用颜色切换器,但需要屏幕阅读器,因为即使使用缩放您也没有足够的视力来阅读文本。
So, you'd better leave the color switcher as it is without hidding it to screen readers.因此,您最好让颜色切换器保持原样,不要向屏幕阅读器隐藏它。
I think I found the solution.我想我找到了解决方案。
By implementing a "skip to content" Link, this and any other blocks can be skipped.通过实现“跳到内容”链接,可以跳过此块和任何其他块。 So there is no need, to add any aria-hidden tag here.所以没有必要在这里添加任何 aria-hidden 标签。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.