1

Foundation ベースの WCAG 2.0 と互換性のあるサイトを作成していますが、トップバーに問題があります。

キーボードでは操作できず、「タブ」キーについてのみ話しています。

私の親アイテムは「#」に設定されています:

アイテム 1 (#)

--> 項目 2 (リンク)

--> 項目 3 (リンク)

「タブ」キーで項目 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）cssで作成した「ホバー」クラスを取得し、フォーカスが変更されたときに追加および削除するjavascriptを追加しました。このサイトを参考にしました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');
        }
    });
});

タブキーとシフトタブキーでキーボードからアクセスできるようになりました。スキップナビ IMO の追加を使用できます。

于 2014-01-28T15:25:19.793 に答える