5

私は現在、アクセシビリティとWCAGで多くの作業を行っていますが、すべてのユーザー、特にキーボードナビゲーションを使用しているユーザーにとってうまく機能するようにしようとしていることのひとつは、コンテンツリンクへのスキップです。

これは簡単に聞こえます。ページの上部にあるアンカーへのリンクをスローすると、ユーザーはそれを「クリック」して、ナビゲーションやその他のほとんど重要でないコンテンツをスキップできます。

ただし、問題は、キーボードを使用してアンカーリンクを「クリック」してから、もう一度「タブ」キーを押すと、メインの次の要素ではなく、「コンテンツにスキップ」リンクの直後の要素に移動することです。コンテンツエリア。つまり、リンクしたアンカーにフォーカスがありません。

これが正しく機能している「コンテンツにスキップ」リンクのあるサイトをまだ見つけていないため、これは一般的な問題のようです。VisionAustraliaサイトでさえこの問題があります。

誰かがこれを正しく機能させるためのテクニック/ハック/ライブラリを知っていることを望んでいました。

編集：この問題はChromeとSafariで発生しますが、MacのFirefoxでは発生しないことを確認できます。

4

2 に答える 2

6

ほとんどのブラウザは、同じページのリンクのターゲットまで視覚的にスクロールダウンしますが、実際にはそのリンクにキーボードフォーカスを配置しません。JavaScript（または以下の例のようにJQuery）を使用して、ターゲットにフォーカスを与えることができます。

$("a[href^='#']").not("a[href]='#'").click(function() {
   $("#"+$(this).attr("href").slice(1)+"").focus();
});

ただし、WebKitにはバグがあり、このソリューションでさえChromeやSafariなどのWebKitブラウザーで機能しません。私は約1年前にこれについてブログ投稿を書きました、そして他のいくつかはそれに基づいて構築しました：

于 2012-10-25T03:17:11.627 に答える
0

次のフォーカスを取得するコンテンツのすぐ上に別の要素を配置できます。次に、その要素にスキップし、font-size 0やコンテンツのないapタグなどの差分を使用して、その要素を非表示にします。

<div class="skip-nav-container">
  <a class="skip-to-main-content" href="#mainContent">Skip to main content</a>
</div>

<nav>
<!--skip this content-->
</nav>

<div class="skip-nav-target">
  <p class="skip-nav-target-content" id="mainContent"></p>
</div>
<main>
<!--next element in the main content area-->
<!--main content-->
</main>
于 2018-05-16T10:20:34.970 に答える