键盘可访问的下拉悬停菜单答案

【问题标题】：keyboard accessible dropdown hover menu键盘可访问的下拉悬停菜单
【发布时间】：2014-03-05 18:45:53
【问题描述】：

所以我在网站上使用pytheas 主题，它需要完全可访问。除了使用键盘或特别是 tab 键导航下拉菜单项之外，我已经完成了所有其他要求。它会遍历菜单的所有标题，但不会深入到 dropdown 元素。

我正在考虑将每个菜单标题链接到一个下拉菜单 instead of a new page，但我该怎么做呢？目前我什至可以看到下拉元素的唯一方法是当我 hover 将鼠标悬停在标题上时

有没有办法做到这一点？或者有没有更简单的方法让菜单可以访问？

这是sample page in pytheas theme的链接。

【问题讨论】：

标签： php css wordpress tabs accessibility

【解决方案1】：

此菜单现在可通过键盘访问。此链接提供了有关使菜单键盘可访问（需要 JS）并适用于解释 ARIA 属性的屏幕阅读器的良好信息 - http://simplyaccessible.com/examples/css-menu/option-6/

.nav-menu > li > a:focus, 
.nav-menu > .current-menu-item > a:focus, 
.navigation .current-menu-parent > a:focus, 
.navigation .current-menu-parent > a:focus, 
.nav-menu > .current-menu-item > a:focus, 
.nav-menu ul a:focus {
    background: none repeat scroll 0 0 #F15A23;
    color: #FFFFFF;
    text-decoration: none;
}

.nav-menu li:focus ul, 
 ul.show-menu   {
    margin: 0;
    opacity: 1;
    visibility: visible;
}

在 WP 菜单中查看它的实现：使用 TAB 键和箭头（例如向下箭头可进入功能级别 2。）

http://fiddle.jshell.net/L9y5U/9/
http://fiddle.jshell.net/L9y5U/9/show/

【讨论】：

哇！到目前为止，这看起来很棒！谢谢你的帮忙。剩下的唯一问题是，当我在进入标题菜单选项卡并打开下拉菜单后按下向下箭头时，它不会选项卡到任何下拉项目，我只能看到它们但仍然无法导航
另外，对于您链接的示例，有没有办法查看它的代码？还是我必须从检查元素中获取所有 css 文件？
这一切都在 jsfiddle 中 - CSS 是您在外部资源中的示例，fiddle 的 CSS 面板中的额外 CSS 和 JS 是 JS 面板。您可以使用向上向下箭头导航到下拉菜单，并使用向上和向下箭头或选项卡导航到下拉菜单项。您还可以使用左右箭头进行导航。要启动页面，请按 Enter。
您可能需要稍微修改脚本以启用回车键以转到链接。 e.keyCode == 13
hm... 我使用的浏览器有什么重要意义吗？在 chrome 中，我正在查看此链接 fiddle.jshell.net/3RN9H/4/show 以及我的本地主机，但向上/向下箭头不允许我在子菜单链接之间导航