1

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

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

我的父项设置为“#”：

项目 1 (#)

--> 第 2 项（链接）

--> 第 3 项（链接）

使用“tab”键选择项目 1 后没有任何反应，按 Enter 将无济于事。

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

移动菜单很好，因此 Foundation 文档中的示例。

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

谢谢你的帮助！

4

1 回答 1

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 tab 键访问它。它可以使用添加跳过导航 IMO。

于 2014-01-28T15:25:19.793 回答