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

Question

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

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

作品： https://americaserves.org/

另一双眼睛将是最有帮助和感激的！

Answer 1

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

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

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

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

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