下拉菜单键盘辅助功能无法正常工作

时间:2014-11-12 18:07:21

标签: html css3 accessibility

我正在尝试使菜单栏键盘可访问。我已经替换了所有:hover with:focus。但仍然下拉菜单不通过键盘。 任何人都可以提供解决方案......

感谢!!!

2 个答案:

答案 0 :(得分:0)

通过查看人们经常制作下拉菜单的方式,我假设您可能正在应用:hover和:专注于li元素。这将适用于:悬停因为在现代浏览器中所有元素都能够使用:hover伪类,但这不适用于:focus因为默认情况下只有链接和表单控件(按钮,字段等)才能使用:焦点

你可以强制一个元素接受:使用tab-index进行聚焦,但这对菜单来说非常笨重,所以我们不要这样做。

假设我对您的问题的假设是正确的,最好的选择是使用JS解决方案来使您的下拉键盘可访问。我通常使用类似于这个的技术,在li元素上应用“hover”类是你访问它们(无论是通过鼠标还是通过键盘)。

https://uablogs.missouri.edu/interface/2011/08/keyboard-accessible/

答案 1 :(得分:0)

通常,很难实现真正可访问的悬停和展开下拉菜单。如果可能,我们应避免使用此模式。您最好使用其他设计,例如目录。仅供参考,我blogged对此事。

相关问题