Question

我正在使网站与基于Foundation的WCAG 2.0兼容，我对topbar有疑问。

它只是不能用键盘操作，而我只是在谈论'tab'键。

我的父项设置为'＃'：

第1项（＃）

- ＆GT;第2项（链接）

- ＆GT;第3项（链接）

用'tab'键选择第1项后，没有任何反应，按Enter键将无济于事。

将菜单更改为可点击它不是一个选项，因为点击另一个项目后项目不会崩溃。

移动菜单很好，所以在Foundation文档中有例子。

以下是示例：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创建的'hover'类，并在焦点更改时添加并删除它。我使用此网站作为参考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');
        }
    });
});

现在可以使用制表符和shift键来访问键盘。它可以使用添加跳过导航IMO。

无法通过键盘访问zurb-foundation顶栏下拉菜单

1 个答案: