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

Web ページのすべてのスキップリンクに、ユーザーがナビゲーションをスキップできるよう、フォーカス可能なターゲットを提供します。

スキップリンクはページの上部、body の開始タグ直後に記載するべきです。

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

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

残念ながら、Safari や Chrome などの WebKit ベースのブラウザーには同ページのリンクが正しく機能しないバグがあります。このようなブラウザーには JavaScript を使用し、別の方法を提供する必要があります。このバグを修正する方法のチュートリアルは、HTML and CSS Accessibility Course の Skip Navigation Links をご参照ください。

スキップリンクを隠したいと思うかもしれません。それはページのレイアウトにコンテンツを追加しますし、必要のない人にとっては混乱をもたらすかもしれません。もしスキップリンクを隠すと決めた場合、これらの CSS オプションを利用して非表示にしてはなりません:

• CSSを使用して常にリンクをスクリーン外に配置する。
• display: none を設定する。
• visibility: invisible を設定する。

スキップリンクを CSS で非表示にすると、スクリーン・リーダーのユーザーにとっては問題なく機能しますが、スキップリンクを活用する目の見えるユーザーにとってはアクセスできなくなります。display: none; または visibility: invisible; のいずれかのプロパティを設定すると、すべての人にとってリンクがアクセシブルではなくなります。次の二つのスキップリンクに対応するアクセシブルな方法はベストプラクティスです:

• 「スキップリンク」を常に表示する。
• 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;
    }

ユーザーが繰り返されるコンテンツを飛ばせるよう、さらにスキップリンクを追加することを検討することもできます。追加のスキップリンクは常に必要なわけではありませんが、場合によっては、役に立つかもしれません。