css - 网站菜单可访问性（一个有效，一个无效）

Question

这让我发疯！我有两个正在开发的网站，它们非常相似并且共享大量代码。两个菜单都通过鼠标工作（悬停），但一个菜单无法在选项卡上显示子菜单（焦点）。我 99% 确定我遗漏了一些明显的东西。

破碎： https ://onward2opportunity-vctp.org/

作品： https ://americaserves.org/

另一双眼睛将是最有帮助和赞赏的！

标签： csswordpressmenuaccessibility

Answer 1

快速浏览一下就可以看出“americaserves”（作品）有一个焦点/模糊事件处理程序，但“前进”（破碎）没有。我假设焦点处理程序是显示子菜单的内容。

然而，作为关于键盘可访问性的旁注，让子菜单出现在焦点上可能会产生很多制表位。如果我试图在菜单中切换以到达最后一项，我必须通过所有子菜单来切换，因为它们会自动出现。

一个不错的方法是有一个视觉指示器，表明有一个子菜单，并使用aria-expanded菜单上的属性并将其设置为真/假，具体取决于菜单是否展开/折叠（分别）。让用户选择菜单来打开它而不是自动打开。

但是，一旦需要注意的是，您的顶级菜单项实际上执行两个目的。您可以选择菜单项本身并被带到一个页面，或者您可以选择菜单项以显示子菜单。由于您不能通过相同的交互（键）发生两种行为enter，因此您需要单独的元素。这通常是通过让菜单文本成为一个链接，将您带到另一个页面，然后在它旁边显示一个小“向下箭头”类型的按钮来显示子菜单。

您仍然可以支持用鼠标悬停显示菜单。并且额外的“向下箭头”按钮可以隐藏，直到它被标签，类似于您的跳过链接。