セマンティックなリンク
Silktide は、メニューやナビゲーションセクションのように機能するものの、リストとしてマークアップされていないリンクのグループを検出します。また、本来は項目のリストであるものをレイアウトするために使用されている、1列のテーブルも検出します。
関連するリンクのグループ(メニュー、フッター、「関連ページ」ブロックなど)は、構造が明確になるよう、 のリストとして記述する必要があります。
<!-- 問題: 構造のないナビゲーションブロック -->
<a href="/about">About us</a>
<a href="/products">Products</a>
<a href="/contact">Contact us</a>
<!-- 修正後: リンクがリスト項目になっている -->
<ul>
<li><a href="/about">About us</a></li>
<li><a href="/products">Products</a></li>
<li><a href="/contact">Contact us</a></li>
</ul>
重要な理由
リンクがリスト内にあると、 はグループとそのサイズを読み上げます。利用者はグループ全体を1回の操作でスキップできます。これは、同じナビゲーションがすべてのページで繰り返される場合に不可欠です。単独で記述されたリンクには、このようなショートカットがありません。そのため、訪問者は、アクセスするすべてのページで、コンテンツに到達する前に数十個、あるいは数百個のリンクを1つずつたどらなければならない場合があります。
修正方法
- 関連するリンクの各グループを
<ul>(順序が重要な場合は<ol>)で囲み、各リンクをそれぞれの<li>に入れます。ナビゲーションの場合は、リストを<nav>要素でも囲み、ナビゲーションとして読み上げられるようにします。 - 1列のテーブルをリストに置き換えます。1列のテーブルには表形式の関係性がないため、リストのマークアップの方が適切です。
<!-- 問題: リストとして使用されている1列のテーブル -->
<table>
<tr><td>Banana</td></tr>
<tr><td>Apple</td></tr>
</table>
<!-- 修正後 -->
<ul>
<li>Banana</li>
<li>Apple</li>
</ul>
Silktide によるチェック方法
- 各ページの要素を順に確認し、すでにリストのマークアップ内にあるコンテンツは対象外にします。
- 3つ以上のリンクが連続して含まれ、リンク間にある他のテキストが30文字未満の要素を報告します。これは、メニューまたはリンクグループである可能性が高いことを示します。段落、見出し、画像などのコンテンツによって分断されているブロックは、リンクグループとはみなしません。
- 1列のみでテキストを含むテーブルを、テーブルに偽装されたリストとして別途報告します。
トラブルシューティング
リンクが実際のコンテンツによって分けられている
リンクの間に十分な量のテキストやコンテンツ要素がある場合、Silktide はそのブロックをナビゲーションとして扱いません。検出されたグループが実際にはメニューではなく文章として読まれるものである場合は、その指摘をできます。
文中のインラインリンク
文章の流れの中にあるリンクをリストに入れるべきではありません。このチェックでは、リンク間に短いテキストが続くケースは許容されますが、リンクされたフレーズを含む文章が検出された場合は承認してください。