1

ドット付きのサイド ナビゲーションがあります (クリック スクロールのこれらの各ドットは、ページを下に固定します)。

アクセシビリティの目的で、ユーザーがドットをタブで移動できるようにしたいと思います。<span>各ドットのアンカーをラップ する要素を設定しましたが、タブインデックスは正常に機能します..

nav 要素をタブでクリックしたときにクリック イベントが発生するようにしたいと思います。つまり、ドット 2 にタブで移動すると、クリック イベントを模倣する必要があるため、そのアンカーに移動します。

可能？

4

1 に答える 1

1

私が正しく理解していれば、ドットの「フォーカス」イベントをリッスンし、それを受け取ったときにドットをクリックすることをシミュレートすることで、問題を解決できるはずだと思います。使用しているフレームワーク (存在する場合) に応じて、これを行うにはいくつかの方法があります。たとえば、jQuery を使用していて、ドットが "dot" クラスを持つことで識別される場合:

$('.dot').focus(function(e) {
    e.target.click();
}

これは、私がまとめた小さなテスト ページです。IE10 と Chrome の両方で動作するようです。

<html>
    <head>
        <script type="text/javascript">
            function handleOnLoad() {
                var elems = document.getElementsByTagName("span");
                var i;
                for (i = 0; i < elems.length; ++i) {
                    elems[i].onfocus = function(event) {
                        if (event.target) {
                            event.target.firstChild.firstChild.click();
                        }
                        else if (event.srcElement) {
                            event.srcElement.firstChild.firstChild.click();
                        }
                    }
                }
            }
        </script>
    </head>
    <body onload="handleOnLoad()">
        <span class="focus" tabindex="1"><ul class="inactive" tag="scroller"><a href="#scroll1">Foo</a></ul></span>
        <span class="focus" tabindex="2"><ul class="inactive" tag="scroller"><a href="#scroll2">Bar</a></ul></span>
        <span class="focus" tabindex="3"><ul class="inactive" tag="scroller"><a href="#scroll3">Baz</a></ul></span>
        <span class="focus" tabindex="4"><ul class="inactive" tag="scroller"><a href="#scroll4">Ban</a></ul></span>
    </body>
</html>
于 2013-07-02T03:57:52.220 に答える