スキップリンクターゲットが存在し、フォーカス可能である必要があります

ウェブページ内のすべてのスキップリンクに、ユーザーがナビゲーションをスキップできるフォーカス可能なターゲットがあることを確認してください。

ページ上部の body 開始タグの直後に、ナビゲーションスキップリンクを配置してください。

スキップリンクを追加するには、次のマークアップを使用します。

<div id="skip">
    <a href="courses/html-css/navigation/skip-navigation#content">Skip Content</a>
</div>

残念ながら、SafariやChromeなどのWebKitベースのブラウザには、同一ページリンクが適切に機能しないバグがあります。Javascriptを使用して、このようなブラウザに対する回避策を作成してください。このバグを修正する方法のチュートリアルについては、「HTMLおよびCSSアクセシビリティコース」の「ナビゲーションリンクのスキップ」を参照してください。

スキップナビゲーションリンクを非表示にしたい場合があります。ページのレイアウトにコンテンツが追加され、それを必要としないユーザーを混乱させる可能性があります。スキップリンクを非表示にする場合は、以下のCSSオプションを使用してスキップリンクを 非表示にしないでください 。

• CSSを使用して、リンクを画面外に永続的に配置します。
• display: noneを設定します。
• セット visibility: invisible

CSSを使用してスキップリンクを非表示にすると、スクリーンリーダーユーザーにとっては問題なく機能しますが、これにより、スキップリンクの恩恵を受ける視覚を持つユーザーのリンクへのアクセスが失われます。display: none; または visibility: invisible; プロパティのいずれかを設定すると、すべてのユーザーがリンクにアクセスできなくなります。スキップリンクに対処するための次の2つのアクセス可能なアプローチがベストプラクティスです。

• 「ナビゲーションをスキップ」リンクを常に表示する
• CSSを使用して、リンクがキーボードフォーカスを受け取るまで画面外に非表示にし、すべてのユーザーに表示されるようにします。

上記のマークアップにCSSアプローチのベストプラクティスを実装するには、次のCSSコードを含めます。

#skip a {
    display: block;
    position: absolute;
    left: -999px;
    top: -999px;
    }

#skip a:focus {
    left: 0;
    top: 0;
    padding: 3px;
    background: #ffc;
    border:1px solid #990000;
    }

ユーザーが繰り返しのコンテンツをスキップできるように、スキップリンクを追加することも検討してください。追加のスキップリンクは必ずしも必要ではありませんが、場合によっては役立つことがあります。