見出しは空欄にしないでください
修正方法
すべての見出し要素 ( <h1>
h1 から <h6>
h6 でマークされているもの) にコンテンツが含まれていることを確認するのがベスト プラクティスです。さらに、このコンテンツがスクリーン リーダーでアクセスできることを確認してください。つまり、見出しテキストを非表示にしてはいけません (たとえば、CSS display: none
または aria-hidden="true"
を使用してはいけません)。
効果的な見出しを作成していることを確認するには、ページの見出しに目を通し、見出しで提供される情報のみに基づいてページの内容の概要を把握しているかどうかを自問してください。答えが「いいえ」の場合は、見出しを書き直すことを検討してください。
同時に、見出しを記述する場合だけ、見出しマークアップ (<h1>
から <h6>
要素まで) を使用するようにしてください。見出しは簡潔で明確、かつ一意であり、Webページの構造を伝えるために階層的な順序でレベルがマークされている必要があります。
悪い例: 見出しが空
<h1></h1>
悪い例: 支援技術から隠された見出し
<h1 aria-hidden="true">Heading Text</h1>
なぜ重要なのか
スクリーン リーダーは、見出しタグの存在をユーザーに警告します。見出しが空であったり、テキストにアクセスできない場合は、ユーザーを混乱させたり、ページの構造に関する情報にアクセスできなくなったりする可能性があります。
見出し内のテキストがスクリーン リーダーでアクセスできない場合、このテクノロジのユーザーは見出しの内容を聞くことができません。見出しはWebページの構造を伝えるため、スクリーン リーダーのユーザーがコンテンツにアクセスできることが重要です。
見出しマークアップ (<h1>
から ><h6>
) を適用すると、テキストを目立たせる簡単な方法になりますが、見出し以外の用途に使用すると、支援技術を使用するユーザーにとってWebページのナビゲーションがわかりにくくなります。
ページのアクセシビリティを向上させることに加えて、検索エンジンは結果をフィルタリング、並べ替え、表示するときに見出しを使用するため、見出しには他の利点もあります。サイトのアクセシビリティを向上させると、ページが見つけやすくなるという効果もあります。
目の見えるユーザーがページを一目見るだけでその内容を把握できるのと同じように、スクリーン リーダーのユーザーも見出しをたどって同じことを行うことができます。見出しが適切に書かれ、適切に順序付けられていると、特にスクリーン リーダーを使用するユーザーの時間とストレスを大幅に節約できます。
ルールの説明
少なくとも1つの見出し要素 ( <h1>
から <h6>
でマーク) が存在する場合は、その見出し要素にコンテンツが含まれていることを確認するのがベスト プラクティスです。
仕組みについて (簡単に言うと)
見出しにコンテンツが含まれ、このコンテンツがスクリーン リーダーでアクセス可能であることを確認します。