Question

我已经实现了自己的下拉菜单，并想澄清我的解决方案的可访问性含义：

我现在感兴趣的代码是：

$('#sub-nav > li ul').each(function(index){

    var $this = $(this),
        index = index + 1;

    $this    
    .clone()
    .appendTo('#main-nav > li:eq(' + index + ')');

});

'sub-nav'从每个人通过CSS隐藏起来。然后它被附加到相关的'main-nav'li。这种方法会阻止使用辅助技术的人进入子菜单项吗？

请不要问为什么我这样做了。可以说我无法访问项目的原始标记，因此不能以我想要的方式将子菜单附加到标记。

Answer 1

为了获得更好的可访问性，请考虑添加键盘支持。当链接具有焦点（通过选项卡或其他）时，请确保其子视图可见。同样，当subnav链接具有焦点时，请确保它是可见的。其中一些可以通过:focus使用css。

很遗憾，您无权访问该标记。您是否需要克隆<ul>，或者只是移动原始元素？用脚本进行dom操作，但是通过:hover伪类用css显示/隐藏。

这可以让您了解其中的一部分：http://jsfiddle.net/tpHcv/9/您仍需要一些JavaScript来管理标签并专注于子项目。

#main-nav li > ul
{
    display: none;
}

#main-nav > li a:focus + ul,
#main-nav > li:hover > ul
{
    display:block;
}

您的#main-nav链接是否会在任何地方进行，还是仅用于触发子导航？如果他们不去任何地方，为了支持禁用JavaScript的浏览器，请考虑最初使用css隐藏#main-nav，然后使用JavaScript显示它。这样它就不会显示，除非链接实际上会做某事。

JavaScript的可访问性下拉菜单

1 个答案: