1

W3C の WCAG2.0 Techniques documentationで説明されているメイン コンテンツへのスキップ テクニックを実装していますが、リンクを有効にするときにキーボード フォーカスを更新するのに苦労しています。(Chrome の最新の公開バージョンでこれをテストしていることに注意してください)。

まず、これが私の JavaScript 関数です。

function skipToMainContent() {
    var hash = window.location.hash.substring(1);
    if (hash === "main") {
        var el = document.getElementById(hash);
        el.tabIndex = 0;
        el.focus();
    }
}
skipToMainContent();

この関数が行うことは、最初hashに URL から をプルして#;を削除することです。次に、ハッシュ変数の値が「main」と等しいかどうかをチェックします。その場合、要素を取得し、id="main"その要素を 0 に設定しtabIndexてフォーカス可能にし、フォーカスを与えます。

にアクセスするhttp://example.com/#mainと、skipToMainContent()関数が起動され、それに応じてキーボード フォーカスが設定されます。tabコンテンツ領域内の最初のインタラクティブな要素にヒットすると、mainフォーカスされます。(この関数がないと、Chrome は代わりにページの最初のインタラクティブな要素にフォーカスするので、この関数は確実にここで機能することに注意してください)。

ただし、ページのリンクからこの機能をトリガーしようとすると、上記は適用されません。

<a href="#main" onclick="skipToMainContent()">
    Skip to Main Content
</a>
<nav>...</nav>
<main role="main" id="main">...</main>

Skip to Main Contentリンクをクリックすると、skipToMainContent()関数が適切に起動され、main要素にtabIndexofが与えられますが0、フォーカスされていないようです。tabリンクをクリックした後にキーを押すと、代わりにリンク内の最初のインタラクティブな要素navがフォーカスされます。

main「スキップ」リンクがクリックされたときに要素がフォーカスされるようにするにはどうすればよいですか?

を呼び出す前に との両方this.blur()を追加しようとしたことに注意してください。ただし、これにより、次のフォーカスされた要素は再び「スキップ」リンクになりました。document.activeElement.blur()el.focus()

4

1 に答える 1

3

あなたのコメントから、「window.location.hash」をクリックすると空になります。

tabindex="-1"また、0 ではなく適用することをお勧めします。これは、メインがタブ オーダーであることを意味します。-1 を使用すると、プログラムで要素に焦点を当てることができますが、既定の順序ではありません。

また、後世（および後でこれを見つける人々）のために、私の一般的な解決策は、次のようなものを使用することです。

HTML スキップ リンク:

<a href="#main" id="skiplink">Skip to content</a>

HTML ターゲット:

<main role="main" id="main" tabindex=”-1”&gt;

JS:

$("#skiplink").click(function() {
    $('main').focus();
});

CSS:

main:focus {outline: 0;}

もちろん、JavaScript を使用してさらに多くのことを適用できます。それはあなた次第です。

HTML に tabindex 属性を配置すると役立つ場合があります。

于 2013-11-08T12:54:54.040 に答える