skip-link
スキップリンクには、解決可能で使用できるリンク先がある必要があります
「skip to ...」リンクのhrefのフラグメントが、文書内に実在し、現在使用できる要素に解決されることを確認します。
適用範囲：次の2つのいずれかの目印によってスキップリンクとみなされる<a href="#fragment">要素に適用されます。
- アクセシブルな名前が、同梱されている言語のいずれかでよく使われるスキップリンクの表現に従っている：「skip」または「jump to」（英語）、「aller au contenu」「passer au contenu」「accéder au contenu」「accès direct」「évitement」（フランス語）、「springen」「überspringen」「direkt zum」「zum Inhalt」（ドイツ語）、「saltar」「ir al contenido」（スペイン語）、「スキップ」「本文へ」（日本語）。実際のスキップリンクでは両方の慣例が使われるため、「skip」に加えて「jump to」も含めています（例：「Jump to section」リンク）。
- または、文書内の最初のリンクで、
main要素（またはrole属性がmainに解決される要素。実在するロールの最初のトークンで、大文字と小文字は区別しません）より前にある。表現にかかわらず、スキップリンクが置かれる通常の位置です。
それ以外の同一ページ内アンカーリンクはスキップリンクではなく、対象にしません。ページに<main>もrole="main"もない場合は、ElementInternalsによってmainロールを与えられたカスタム要素（this.attachInternals().role）を、リンクの位置を測る基準となるmainとします。
期待される結果：リンクのフラグメントが文書内に実在する要素（一致するid、または従来の<a name="...">）に解決され、そのリンク先が現在使用できる状態です（アクセシビリティツリーから隠されておらず、ブラウザーのジオメトリ情報を利用できる場合は、面積を持ってレンダリングされ、どの祖先もそれを何もない大きさに切り取っていない。切り取る祖先とは、サイズがなくなるまで縮んだoverflow: hiddenのもの、またはターゲットを外側に置いたままにするoverflow: clipのものです）。リンク先が存在しない、または実質的に使用できないスキップリンクは、確実なスキップ先を提供しません。空のターゲット（中に要素もテキストもないもの）、例えば<a id="content" tabindex="-1"></a>や旧来の<a name>は、本来面積を持ちません。リンクをたどるとフォーカス、またはシーケンシャルフォーカスナビゲーションの開始点がそこへ移り（HTMLの「scroll to the fragment」）、次のTabキーはそこから進みます。そのため、代わりにターゲットが示すものを測定します。つまり、それ自体の内容を持つ最も近い祖先で、ターゲットが先頭にある<main>などです。display: contentsのターゲットはそれ自体のボックスを持たないため、子のボックスで測定します。
検出結果が報告する内容：
href：リンクのhrefです。unusableReasonCode（使えないターゲット）：使えない理由です。アクセシビリティツリーから隠されている場合はACC_TREE_INELIGIBLE、レンダリングされていない場合はNO_CLIENT_RECTS、ターゲット（空のターゲットではそれが示す内容）に面積がないか、何もない大きさに切り取られている場合はZERO_AREA_TARGETです。targetSelector（使えないターゲット）：ターゲットのセレクターです。geometryCheckEnabled（使えないターゲット）：ターゲットのジオメトリを計測できたかどうかです。計測にはブラウザーが必要です。viewport.width、viewport.height（ジオメトリを計測したターゲット）：ページのレイアウトに使ったビューポートで、CSSピクセル単位です。ある幅で隠れているターゲットが、別の幅では使える場合があります。
これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。
例
<a href="#target">Skip to content</a><div id="target">Target content</div>
フラグメントのリンク先が存在し、使用できる状態です。
<a href="#missing">Skip to main content</a>
リンクのフラグメントが指す要素がページのどこにも存在しないため、リンクを実行してもどこにも移動しません。
<a href="#contenu">Aller au contenu</a>
フランス語のスキップリンクの表現も認識され、リンク先が存在しません。
確認方法
このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。
SKIP_LINK_TARGET_MISSING
- ページを読み込み、レポートに示されたスキップリンクが現れるまでTabキーを1、2回押して、そのhrefを控えてください。
- Enterを押してリンクをたどってください。
- もう一度Tabキーを押し、フォーカスがどこに移るかを確認してください。
満たす場合：リンクをたどるとメインコンテンツに移動し、次のTabキーでその中の最初のコントロールに移ります。
満たさない場合：リンクのターゲットに一致する要素がないため、何も起こらないかフォーカスが上部にとどまり、リンクは繰り返されるコンテンツを飛ばしません（ベストプラクティス、G1）。
SKIP_LINK_TARGET_UNUSABLE
- レポートに示されたウィンドウ幅（あれば）でページを読み込み、スキップリンクが現れるまでTabキーを押して、Enterを押してください。
- ページがターゲットまでスクロールし、ターゲットの領域が表示されるか観察してください。
- もう一度Tabキーを押し、フォーカスがどこに移るかを確認してください。
満たす場合：ページは表示されたメインコンテンツに移動し、次のTabキーでその中の最初のコントロールに移ります。
満たさない場合：ターゲットが隠れている、表示されていない、またはサイズがないため、フォーカスが繰り返されるコンテンツの先へ移りません（ベストプラクティス、G1）。