メニュー

見出しアクセシビリティ

見出しレベルを飛ばさない

スクリーンリーダーユーザーが混乱する原因となるため、見出しレベルを飛ばしてはいけません。レベル2見出しの直下にはレベル3見出し、同様にレベル3見出しの直下にはレベル4見出しというように、1段階下の見出しレベルだけを置くことができます。

スクリーンリーダー利用者にとって、見出しレベルはセクションの階層を理解するために必要です。多くのスクリーンリーダーユーザーは「見出しジャンプ」機能を使い、ページを見出し単位で大まかに把握します。このとき、レベル2見出しの次にレベル4見出しが出てくると、ユーザーはレベル3見出しを見逃したかもしれないと感じ、混乱します。

他にも、スクリーンリーダーには特定の見出しレベルだけを読んでいく機能もあります。ページ内で同じような構造が繰り返される場合、レベル2見出しだけを読んでいく、レベル3見出しだけを読んでいくといった形で効率的に閲覧することができます。しかし、見出しレベルが飛ばされていると、こうした機能が使えなくなってしまいます。

箇条書きリストと使い分ける

セクションの主題を示す場合は、箇条書きリストではなく見出し要素を使用してください。

箇条書きリストのインデントを使うと、見た目では見出しと内容のような構造に見える文章を作れますが、スクリーンリーダーにはただの箇条書きとしてしか扱われず、見出しジャンプ機能も利用できません。必ず見出し要素を使用して、セクションの主題と内容を構造化してください。

不適切な例

スクリーンショット:「申請の流れ」「届出の流れ」が箇条書きリストの項目として表示され、それぞれの説明がネストされたリスト項目になっている。

適切な例

スクリーンショット:「申請の流れ」「届出の流れ」が見出し要素として表示され、それぞれの説明が段落として続いている。

関連コンポーネント

説明リストと使い分ける

用語と説明をセットにして繰り返すようなケースでは、見出しと段落の組み合わせではなく、説明リストを使用してください。

不適切な例

スクリーンショット:「マイナンバーカード」「個人番号通知書」「住民票記載事項証明書」が見出し要素として表示され、それぞれの説明が段落として続いている。

適切な例

スクリーンショット:「マイナンバーカード」「個人番号通知書」「住民票記載事項証明書」が説明リストの用語として表示され、それぞれの説明が定義として続いている。

関連コンポーネント

見出しを伴うコンポーネントを動的に挿入する場合に見出しのレベルをセクション構造に合わせる

見出しを伴うコンポーネントがページの途中に挿入されるケースがあります。このとき、コンポーネント内で見出しレベルが固定されていると、ページのセクション構造上、不適切な見出しレベルになってしまうおそれがあります。

できる限り、挿入されたコンポーネント内の見出しレベルがページのセクション構造上において適切なレベルになるよう調整してください。

無理に見出しを挿入しない

見出しはコンテンツを構造化するための要素ですが、すべての文書やセクションに見出しが必要なわけではありません。物語や発話録など、見出しを挿入することが適当でない文書に見出しを追加する必要はありません。

参考情報