アンカーが見つかりません
Silktide は、#content のように同じページ内の特定の部分を指すリンクをテストし、リンク先が存在しないものを報告します。このようなリンクをクリックしても何も起こらず、ユーザーはその場に取り残されます。
<!-- 壊れた例: ページ内に id="content" を持つ要素がない -->
<a href="#content">コンテンツへスキップ</a>
<!-- 修正例: リンク先が存在する -->
<a href="#content">コンテンツへスキップ</a>
...
<main id="content">...</main>
重要な理由
存在しないアンカーへのリンクは、エラー画面が表示されることも、ページが移動することもなく、何も起こらないまま失敗します。視覚でページを見ているユーザーにとっては混乱の原因となり、やキーボードを使うユーザーにとってはさらに深刻です。というのも、このようなページ内リンクは、「コンテンツへスキップ」や目次のように、長いページを移動可能にする重要な仕組みであることが多いためです。壊れたアンカーは、そのショートカットをひそかに奪ってしまいます。
修正方法
- 不足しているリンク先を追加します。対象となる要素に、リンクのフラグメントと一致する
idを付けます。たとえば、#pricingへのリンクに対しては<section id="pricing">のようにします。 - または、リンク先が別の
idで存在する場合は、リンクを修正します。フラグメントでは大文字と小文字が区別されるため、#Pricingはid="pricing"と一致しません。 - リンクが を実行するためだけに存在する場合でも、フラグメントは実際の要素の
idを指すようにします。これにより、JavaScript がなくてもリンクの意味が保たれます。スクリプトで既定のスクロールを抑止する必要がある場合があります。
<!-- フラグメントが、スクリプトで表示される要素と一致している -->
<a href="#details" onclick="toggle('details')">詳細を表示</a>
<div id="details">...</div>
Silktide によるテスト方法
- ページ上で、リンク先にフラグメント（
#の後の部分）を含むすべてのリンクを見つけます。 - 現在のページを指すリンクだけを残します。対象となるのは、
#fragmentのみで構成されたリンク、または同じページへの完全な URL です。他のページ上のアンカーへのリンクは、このチェックの対象外です。 - フラグメントと一致する
idを持つ要素、または一致する名前を持つ旧式の<a name="...">アンカーを探します。 - どちらも存在しない場合、そのリンクを問題として報告します。