gpt4 book ai didi

css - 网站菜单可访问性(一个有效,一个无效)

转载 作者:行者123 更新时间:2023-11-28 17:02:28 25 4
gpt4 key购买 nike

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

损坏: https://onward2opportunity-vctp.org/

作品: https://americaserves.org/

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

最佳答案

只要快速浏览一下就会发现“americaserves”(有效)有焦点/模糊事件处理程序,但“onward”(损坏)没有。我假设焦点处理程序是显示子菜单的内容。

然而,作为关于键盘可访问性的旁注,让子菜单显示在焦点上会导致很多制表位停止。如果我试图在菜单中切换到最后一项,我必须在所有子菜单中切换,因为它们会自动出现。

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

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

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

关于css - 网站菜单可访问性(一个有效,一个无效),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52087730/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com