Javascript 如果菜单是纯CSS驱动的，则更新aria隐藏属性

我决定尝试让屏幕阅读器和其他辅助技术更容易访问我的网站。现在我真的很专注于我的导航。因为如果您真正想要的项目嵌套得很深且接近尾端，那么谁愿意遍历菜单上的所有项目

因此，我正在开发的网站有一个完全基于CSS的下拉菜单，我正在使用javascript对其进行扩展，使其可以通过键盘访问，并添加了aria属性以帮助屏幕阅读器

我的问题是

考虑到我现有的菜单是纯CSS的，我想知道我现在是否需要用javascript扩展我的菜单，以便在菜单的一部分变得可见时更新aria hidden属性？或者，在第一个实例中将其设置为aria hidden=“true”并将其保留为仅向屏幕阅读器指示默认状态就足够了吗

---

现在，任何使用纯CSS显示/隐藏内容的东西都需要使用javascript来增强，这让我感到不舒服——感觉它破坏了纯CSS显示切换的全部目的。

是的，您必须在其状态更改时将aria设为隐藏

作者必须对未显示的内容设置aria hidden=“true”，而不管用于隐藏内容的机制如何

---

这句话向我暗示，无论您使用CSS还是javascript切换可见性，都需要更新aria隐藏值。

如果您正确使用

display:none

（或

visibility:hidden

），是否真的需要使用aria（除了

role=“navigation”

landmark）在CSS中，它是否能与无序列表上的键盘和鼠标完美配合？当然，一堆div和span都非常需要ARIA。在这个特殊的例子中，我选择不使用ARIA hidden就是因为这个原因——尽管我始终使用了所有正确的角色。有些人使用它，但我认为它的目的是对屏幕阅读器隐藏东西，而不是隐藏在视觉渲染中。屏幕阅读器应该能够很容易地分辨出什么东西通过DOM是可见的还是不可见的。如果他们不这样做，我会考虑这种笨拙的行为。没错，Iain。Aria hidden='false'告诉屏幕阅读器该元素中的内容不存在。Aria很棒。但是，屏幕阅读器会跳过显示时正确隐藏的内容：无；可见性：隐藏；