自治体などのホームページ担当をされている方から、「うちのサイト、アクセシビリティは大丈夫でしょうか」というご相談をいただくことがよくあります。画像に説明文をつける、文字の大きさを変えられるようにする、といった対応はすでにされている自治体さんも多いのですが、意外と見落とされがちなのが「見出しの順番」です。
今回は普段のアクセシビリティ診断の中でよく見つける「見出しの階層が崩れている」問題について、できるだけかみ砕いてご説明します。
そもそも「見出し」って何のこと？
まずウェブサイトにあまり詳しくない方向けに、「見出し」の話から始めます。
ホームページの中の「大きな文字で書かれたタイトルのような部分」、あれが見出しです。たとえば、このページなら「見出しの順番がずれているだけで～」という一番大きい文字の部分が見出しにあたります。
見出しには実は裏側で「レベル」が設定されています。役所で作る報告書をイメージしてもらうと分かりやすいかもしれません。
第1章 ○○について（一番大きな見出し）
1-1 背景（少し小さい見出し）
1-2 現状（少し小さい見出し）
第2章 △△について（一番大きな見出し）
このように、報告書には「章」「節」といった階層がありますよね。ウェブサイトの見出しも同じで、HTML（ホームページの中身を組み立てている言語）の中では、
- h1（一番大きな、ページ全体のタイトル）
- h2（章にあたる見出し）
- h3（節にあたる、h2の中の小見出し）
- h4以降（さらに細かい小見出し）
というように、数字が大きくなるほど「小さな見出し」を意味する決まりになっています。画面上の文字の大きさとは別に、この裏側の番号がきちんと順番通りになっているかどうかが、アクセシビリティの評価項目のひとつになっています。
なぜ順番が大事なのか
「別に見た目がきれいなら、番号くらい多少ずれても良いのでは」と思われるかもしれません。ですが、これは目の不自由な方が使う「スクリーンリーダー」という読み上げソフトのことを考えると、重要さが分かってきます。
スクリーンリーダーの利用者は、ページを上から順番に全部読み上げてもらうのではなく、「見出しの一覧」を目次のように呼び出して、そこから読みたい場所にジャンプする、という使い方をよくします。
このとき、報告書の目次が「第1章」の次にいきなり「1-1-1」が来て「1-1」がない、というような並びだったら、読んでいる人は混乱しますよね。ウェブサイトでも同じことが起きます。h1の次にいきなりh3が来て、h2が存在しない、という構造になっていると、目次としてうまく機能せず、「あれ、何かページの内容が抜けている？」と利用者を不安にさせてしまいます。
これが、自治体サイトのように「誰にとっても使いやすいこと」が強く求められる場面で、見出しの順番がチェック項目になっている理由です。
見出しの階層が崩れる、よくある5つの原因
では実際に、なぜ見出しの順番はずれてしまうのでしょうか。診断の現場でよく出会う原因を、5つに整理してご紹介します。
1. トップページと下層ページで「型」が違う
診断をしていて特によく見つけるのが、トップページとそれ以外のページで、崩れ方が違うというパターンです。
自治体サイトの多くは「CMS（コンテンツ管理システムの略で、専門知識がなくてもページを更新できる仕組みのことです）」を使って運用されています。このCMSでは、トップページ用の型（テンプレートと呼びます）と、お知らせや施策紹介などの通常ページ用の型が、別々に用意されていることがほとんどです。
片方のテンプレートは「ページのタイトルがh1から始まる」という前提で作られているのに、もう片方は違う考え方で作られている、ということが実際によく起こります。同じサイトの中でも、ページの種類によって見出しの組み立て方の仕組みそのものが違う、というわけです。
そのため私が診断するときは、次のように崩れ方から原因を推測するようにしています。
- トップページだけh1の次にh3が来ている → トップページ専用の型や、デザインを組みやすくするための特別なパーツ（ページビルダーと呼ばれる仕組みなど）を疑う
- 下層ページ全体がおかしい → ページ全体で共通して使われている型や、担当者がページを作るときのルールを疑う
- 特定の場所だけ毎回見出しの順番がおかしい → お知らせ一覧やよくある質問（FAQ）などの、使い回しの部品を疑う（詳しくは3つ目で説明します）
2. 見た目の大きさで見出しを選んでしまう
もうひとつ非常によくある原因が、「見た目の大きさ」だけで見出しの番号を決めてしまうことです。
たとえば、「ここはh2だと文字が大きすぎて目立ちすぎるから、h3にしておこう」という選び方です。気持ちはよく分かるのですが、これは「文字の大きさ（デザイン）」と「文章の構造上の階層（見出し番号）」という、本来別々のものを混同してしまっています。
見た目の大きさを変えたいだけなら、番号はそのままにして、装飾（CSSと呼ばれる、見た目を調整するための仕組みです）だけで小さく表示すれば解決します。デザインの都合で番号そのものを変えてしまうと、画面では自然に見えても、スクリーンリーダーで聞いたときには不自然な構造として伝わってしまいます。
3. 使い回しの部品に原因が潜んでいる
「新着情報」や「よくある質問」のように、サイトのいろいろなページで繰り返し使われる部品があります。こうした部品を作るとき、見出しの番号をあらかじめ固定してしまうことがあります。
部品それ自体は正しく作られていても、実際にそれが置かれるページの文脈によっては、本来h2であるべき場所にh3の部品がそのまま挿入されてしまい、番号が飛んでしまうことがあります。部品を作る側が、その部品が実際にどのページのどの位置に置かれるかまで想定しきれていない場合に、よく起こる問題です。
4. 更新画面と、実際に表示される中身がズレている
これも見落とされがちな点です。ページを更新する担当者が見ている画面（管理画面）と、実際に公開されているホームページの中身（HTML）は、完全に一致しているとは限りません。
型（テンプレート）側がすでにページのタイトルをh1として自動的に出力しているのに、担当者が本文中にもうひとつh1を入力してしまう、ということが起こり得ます。逆に、担当者は正しくh2から書き始めているつもりでも、型側ではタイトル部分が見出しとして扱われていない、ということもあります。管理画面を見ているだけでは、最終的にどんな構造で公開されているかまでは分かりにくいのです。
5. デザインの見た目の階層と、HTMLの階層を混同している
制作会社にホームページ制作を依頼する際、デザイン案の中で「大見出し・中見出し・小見出し」といった見た目のルールが決められることがあります。これをそのままh2・h3・h4に対応させてしまうと、見た目の階層と、文書としての意味の階層がずれてしまうことがあります。
見た目はきれいに整っているのに、いざアクセシビリティの観点でチェックすると問題が次々に見つかる、というサイトは、たいていこのあたりに原因があります。
まとめ ― 崩れ方のパターンから原因を探る
見出しの階層をチェックするときは、「h1の次がh3だから形式的にNG」と判定するだけでなく、その見出しがページの中でどういうまとまりを持っているかを見ることが大切だと感じています。具体的には、次の2つの視点です。
- 見出しの番号が飛んでいないか
- 見出しによる階層が、実際の内容のまとまりときちんと対応しているか
この2つを意識するだけでも、見た目のきれいさだけでは分からない部分まで、かなり精度高く把握できるようになります。
自治体サイトは、年齢や障害の有無にかかわらず、あらゆる住民の方が情報にたどり着けることが求められる場所です。見出しの順番は地味なポイントに見えるかもしれませんが、実は多くの方の使いやすさに直結しています。一度、ご自身のサイトの見出し構造を確認してみることをおすすめします。