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

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

ページ上部の 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;
    }

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