无法从键盘访问 Zurb 基金会顶部栏下拉列表

Question

我正在使网站与基于Foundation的WCAG 2.0兼容，但我遇到了顶栏问题。

它只是无法使用键盘操作，我只谈论"选项卡"键。

我的父项设置为"#"：

项目 1 （#）

-

-> 项目2（链接）

-

-> 项目3（链接）

使用"选项卡"键选择项目1后没有任何反应，按回车键无济于事。

将菜单更改为可单击它不是一个选项，因为项目在单击另一个项目后不会折叠。

移动菜单很好，基金会文档中的示例也是如此。

下面是示例：http://dwietrzecie.zz.mu/bobrowice/

感谢您的任何帮助！

Answer 1

这不是一个及时的答案，但由于我在谷歌上搜索了同样的问题并提出了自己的解决方案，我想我会发布它：

1）将tabindex=0添加到导航中的所有链接

2）css中的所有悬停都需要有等效的焦点选择器。您还需要添加一个悬停类，以便您可以使用javascript告诉它何时弹出。我在我的 css 中添加了这个来显示菜单（您还应该输入其他代码等效的样式——任何悬停样式都需要焦点样式，但我的样式是自定义的，所以我不想发布我的样式）：

.top-bar-section .has-dropdown.hover > .dropdown,
.top-bar-section .has-dropdown.not-click:focus > .dropdown,
.no-js .top-bar-section .has-dropdown:focus > .dropdown,
.dropdown.hover
  {
      display: block; }

3）添加了javascript，它采用我用css创建的"悬停"类，并在焦点改变时添加和删除它。我使用这个网站作为参考 http://uablogs.missouri.edu/interface/2011/08/keyboard-accessible/

$(document).ready(function(){
    $.fn.accessibleDropDown = function ()
    {
        var el = $(this);
        /* Make dropdown menus keyboard accessible */
        $("a", el).focus(function() {
            if($(this).parent().hasClass('has-dropdown')){
                $(this).parent().find('.dropdown').addClass('hover');
            }
            else if(($(this).parent().parent().hasClass('dropdown') === false)){
                $(document).find('.dropdown').removeClass('hover');
            }
        }).keydown(function(e){
            //if tab is pressed but not shift
            if(e.keyCode == 9 && !e.shiftKey){
                //and element is the last child in menu
                if($(this).parent().is(':last-child')){
                    $(this).parent().parent().removeClass('hover');
                }
            }
        });
    }
    //adds keyboard control to navigation
    $('nav').accessibleDropDown();
    $(document).click(function(){
        //if someone uses keyboard and switches to mouse close menu if mouse click isn't focused on a navigation element 
        if($('nav a').is(':focus') === false){
            $('.dropdown').removeClass('hover');
        }
    });
});

现在可以通过 Tab 键和 shift 键通过键盘访问它。它可以使用添加跳过导航IMO。