jim*_*ode 5 html css accessibility
我有个问题.
我已经制作了一个css菜单(不需要javascript).这依赖于:hover来显示或隐藏A中的UL元素.
使用可见性:隐藏; 和能见度:可见;
到目前为止一直很好,直到我尝试只使用键盘.
现在要访问我需要能够单独使用键盘导航.
所以我还将a:焦点添加到控制可见性的类中.
然而,这并没有修复菜单,它仍然关闭.
有谁知道如何实现这一目标,以保持我的网站可访问？
提前致谢.
编辑 JSFiddle
最大的问题是如何实现这一点,以便他们可以在下面的链接上进行选项卡.我只能用鼠标,而不能用于键盘.
有人必须知道怎么做吗？!
纯粹的基于CSS:即使使用鼠标,悬停菜单通常也不是非常用户友好.由于只要指针是菜单外的一个像素,它就不再悬停并消失.这可能非常烦人,特别是对于精细运动控制不佳的人.
我建议你使用javascript来显示和隐藏子菜单,添加一个延迟,这样如果你碰巧在菜单外移动片刻(或者点击激活并点击隐藏菜单可能会更好),菜单不会消失得太快).确保不为不使用JavaScript的用户隐藏菜单(默认情况下使子菜单可见,并使用javascript onLoad隐藏它们).
编辑1:当然,你编写java脚本来响应click/hover和focus.
编辑2: 如果您设计页面首先在没有javascript或css选择器的情况下工作,例如:hover,例如菜单和子菜单始终可见.然后添加在文档加载时隐藏子菜单的javascript,并在点击/焦点等上切换子菜单.它将自动适用于不使用javascript的用户.
如果设计不能很好地显示所有可见的子菜单(例如它们是重叠的或类似的东西),你也可以制作一个静态版本(没有javascript可见的版本),即使在完全可见的情况下也能很好地工作,并用当javascript加载时,一个更复杂的javascript控制菜单.或者您可以让顶级菜单项(在动态版本中始终可见)链接将查询参数发送到服务器,该服务器在服务器端打开和关闭特定菜单项,并且javascript href从链接中删除值并添加侦听器在没有服务器往返的情况下打开和关闭子菜单.这取决于菜单的大小是最明智的.