コンテンツへスキップ

Silktide は、各ページで訪問者が繰り返し表示されるヘッダーやナビゲーションを飛び越えて、メインコンテンツに直接移動できる方法が提供されているかをテストします。通常は、ページ上部の「コンテンツへスキップ」リンク、またはメインコンテンツのランドマークです。

<!-- メインコンテンツを指すスキップリンク -->
<a href="#main">メインコンテンツへスキップ</a>
...
<main id="main">
  <h1>ようこそ</h1>
</main>

重要な理由

多くの人はページを順番に読み進めます。のユーザーはコンテンツを順番に聞き、キーボードユーザーはすべてのリンクを Tab キーで移動します。ほとんどのサイトでは、すべてのページに同じヘッダーとナビゲーションが繰り返し表示されるため、こうしたユーザーはページを開くたびにそれらをもう一度通過しなければなりません。視覚障害のある訪問者は、コンテンツに到達するまでに数十、あるいは数百ものナビゲーションリンクを通過することがあります。スキップリンクまたはメインランドマークがあれば、この負担を取り除けます。

スキップリンクは、すべての人に常に表示されている必要はありません。一般的な方法では、リンクがを受け取るまで非表示にしておくため、デザインに影響しません。

修正方法

ページの最上部に、メインコンテンツの開始位置を指すリンクを追加します。例：<a href="#main">メインコンテンツへスキップ</a>。
対象が存在することを確認します。フラグメントは実際の要素の id と一致している必要があり、対象要素は表示されていなければなりません。
代わりに（または追加で）、<main> 要素または role="main" を使ってメインコンテンツを示すこともできます。どちらも単独でこのチェックを満たします。
ベストプラクティスは、<main> ランドマークを指すスキップリンクと組み合わせることです。これにより、より幅広いブラウザーや支援技術で機能します。

<a href="#main">メインコンテンツへスキップ</a>
...
<main id="main">...</main>

Silktide によるテスト方法

表示されるテキストが 500 文字未満のページは、スキップする必要がないほどコンテンツが少ないため対象外にします。
同じページ内のフラグメント（#main など）を指すリンクを探します。対象として数えるには、リンクが他のテキストに隣接していない必要があります。隣接している場合は、ナビゲーション補助ではなく文章の一部である可能性があるためです。また、リンクは表示されているか、スクリーンリーダーに配慮した方法で非表示になっている必要があります。
このチェックがすべての言語で機能するよう、リンクのテキストは意図的に検査しません。
次の場合に問題を報告します。
- リンクのフラグメントが、ページ上に存在しない id を指している（壊れたスキップリンク）。
- リンクが表示テキスト 500 文字を超えた位置にあり、ユーザーの手間を減らすには遅すぎる。
- スキップリンクが存在せず、ページに <main> または role="main" のランドマークもない。

トラブルシューティング

スキップリンクがあるのにチェックに失敗します

上記の 3 つの失敗ケースを確認してください。よくある原因は、存在しなくなった id を指すフラグメント、表示されていない対象要素、Cookie バナーなどのコンテンツによってリンクがページ内の 500 文字を超えた位置に押し下げられていることです。

コンテンツがページの先頭から始まっています

表示テキストが 500 文字未満のページは、自動的に対象外になります。500 文字以上のページでは、コンテンツが早い位置から始まっていても、スキップリンクまたはメインランドマークが必要です。 Silktide では、その前にナビゲーションが存在しないことを確実に判断できないためです。