スタイル付き <p> 要素は見出しとして使用してはなりません
修正方法
見出しのスタイル設定に p
要素が使用されていないことを確認してください。
良い実践: メインコンテンツはh1要素から開始してください。
通常、ベストプラクティスとしては、Webページのメインコンテンツをレベル1の見出し (h1
) で開始し、この高レベルの見出しの前に他の見出しを配置しないことです。ページのサブセクションをレベル2の見出し (h2
) としてマークします。レベル2のセクション内にサブセクションがある場合は、レベル3 (h3
) としてマークする必要があります。ページのメインコンテンツより前に来るものには、見出しを付けるべきではありませんが、これは絶対的なルールではありません。h1
をメインコンテンツの先頭に表示する必要がある主な理由の1つは、スクリーン リーダーのユーザーがキーボード ショートカットを使用して最初の h1
に直接移動できるためです。これにより、原則として、Webページのメインコンテンツに直接ジャンプできるようになります。h1
がない場合、または h1
がメイン コンテンツの先頭以外の場所に表示される場合、Webページの構造を理解するためには、スクリーン リーダーのユーザーがさらにWebページを聞く必要があり、貴重な時間を無駄にします。
すべてのベスト プラクティスの推奨事項と同様に、 h1
でコンテンツを開始することが適切でない場合や、コンテンツの前に他の見出しを配置することが最適な場合もありますが、これらの例外は大部分のWebページには適用されません。
なぜ重要なのか
ヘッダーの基本的な目的は、ページの構造を伝えることです。視覚に障害のないユーザーは、さまざまなサイズのテキストを使用することで構造を認識できます。ただし、スクリーンリーダーのユーザーにとっては、見出し要素が明示的にマークアップされていることが必要です。見出し要素が適切に適用されていると、スクリーン リーダーを使用するユーザーと視覚に障害のないユーザーの両方にとって、ページのナビゲーションがはるかに容易になります。
目の見えるユーザーがページを一目見るだけでその内容を把握できるのと同じように、スクリーン リーダーのユーザーも見出しをたどって同じことを行うことができます。見出しが適切に書かれ、適切に順序付けられていると、特にスクリーン リーダーを使用するユーザーの時間とストレスを大幅に節約できます。
見出しの目的は、重要なテキストを強調することだけではなく、Webページの構造を説明することです。簡潔で、明確、一意であり、 h1
から h6
までの要素で階層順にマークされている必要があります。これらすべての特性により、見出しはスクリーン リーダーのユーザーにとって貴重なツールとなります。目の見えるユーザーがページを一目見るだけでその内容を把握できるのと同じように、スクリーン リーダーのユーザーも見出しをたどって同じことを行うことができます。見出しが適切に書かれ、適切に順序付けられていると、特にスクリーン リーダーを使用するユーザーの時間とストレスを大幅に節約できます。
ページのアクセシビリティを向上させることに加えて、検索エンジンは結果をフィルタリング、並べ替え、表示するときに見出しを使用するため、見出しには他の利点もあります。サイトのアクセシビリティを向上させると、ページが見つけやすくなるという効果もあります。
ルールの説明
スタイル付き p
要素は見出しを表すために使用しないでください。そうしないと、スクリーン リーダーのユーザーがドキュメントの構造を判断できないためです。
仕組みについて (簡単に言うと)
段落要素が見出しの外観を与えるために斜体、太字、またはフォント サイズを使用しないようにします。