見出しは空であってはなりません
修正方法
すべての見出し要素 (<h1>
から <h6>
でマークアップされているもの) にコンテンツが含まれていることを確認することを推奨します。さらに、このコンテンツはスクリーン・リーダーで確実にアクセスできるようにします。つまり、見出しのテキストが非表示であってはなりません (例えば、CSS の display: none
や aria-hidden="true"
で)。
効果的な見出しを書いていることを確認するには、ページ上の見出しを通して読み、見出しの情報だけでページのコンテンツ内容を把握できるかどうかを自分自身に聞いてみます。もし答えが「いいえ」である場合、見出しの書き直しを検討します。
それを実施している間、見出しである場合にのみ見出し要素 (<h1>
から <h6>
要素) を使用していることを確認します。見出しは web ページの構造を伝えるために、簡潔で、明確で、一意であり、階層順序に沿ったレベルでマークアップされるべきです。
悪い例: 空の見出し
<h1></h1>
悪い例: 支援技術から隠された見出し
<h1 aria-hidden="true">Heading Text</h1>
なぜ重要なのか
スクリーン・リーダーはユーザーに見出しタグの存在を通知します。もし見出しが空の場合、もしくはテキストにアクセスできない場合、ユーザーを混乱させる、あるいはユーザーがページの構造についての情報にアクセスすることを妨げる可能性があります。
見出し内のテキストにスクリーン・リーダーがアクセスできない場合、この技術を使用しているユーザーは見出しのコンテンツを聞くことができません。見出しは web ページの構造を伝えるため、スクリーン・リーダーのユーザーがこのコンテンツにアクセスできることは重要です。
見出し (<h1>
から <h6>
) を使用すると簡単にテキストを目立たせることができますが、見出し以外の目的で使用すると、支援技術のユーザーにとって web ページが操作しづらいものになります。
ページをさらにアクセシブルにすることに加えて、見出しには他の利点があります。サーチエンジンはフィルタリング、順序付け、そして結果を表示するときに見出しを用いるためです。サイトのアクセシビリティを改善することで、さらにページを見つけやすくするという効果も得られます。
目の見えるユーザーがページをぱっと見てそのコンテンツの内容を理解できるように、スクリーン・リーダーのユーザーも見出しをナビゲートすることで同じことができます。わかりやすく、適切な順序で書かれた見出しは (特にスクリーン・リーダーの) ユーザーの時間を節約し、フラストレーションを感じさせないようにします。
ルールの説明
少なくとも一つの (<h1>
から <h6>
でマークアップされている) 見出し要素が存在する場合、必ずコンテンツを含めることがベストプラクティスです。
仕組みについて (簡単に言うと)
見出しにコンテンツが含まれていること、およびこのコンテンツにスクリーン・リーダーがアクセスできることを確認します。