2021年11月09日掲載
秘書：今回は、webページの見出しの設定について師匠が見習い君を指導しています。
そこで、見習い君が、見出しにしたい箇所を目立たせるため、文字を大きくしようとしているのですが・・・
- ウェブアクセシビリティ職人「見習い君」と「師匠」がアクセシビリティな世界を目指す
- このストーリーは、新人ウェブアクセシビリティ職人「見習い君」とベテラン職人「師匠」、解説を担当する「秘書」を通して特に障がい者をはじめ身体的な制約がある方たちがウェブ利用時にどの様な障壁にぶつかり、どの様な工夫をして克服しているかなど「ウェブアクセシビリティ」の実例をはじめ「ウェブアクセシビリティ」と共に重要な「社会的アクセシビリティ」についても紹介していきます。
見出しとは
見習い君：この部分の文字を見出しにしたいから、スタイルシートを調整して、文字を大きくしよう！
師匠：今日は何をしているのかな？
見習い君：はい、この文字を見出しにしたいので、目立つようにスタイルシートを調整して、文字を太く大きくしています。
師匠：なるほど、確かに文字が太く大きくなって見出しっぽくなるな。だが、これだと見た目が変わっただけで、スクリーンリーダーで閲覧している視覚障がい者にとっては、見出しとして認識できないだろう。
見習い君：あっ！そうか、文字を太く大きくするだけじゃ視覚的に変わっただけですもんね。
師匠：その通りじゃ。見出しとしたいのであれば、htmlには見出し要素があるので、その要素で記述するとよいぞ。
見習い君：わかりました！やってみます。
あっ！h1の大見出し要素で指定したら文字が大きくなりました。
師匠：そうだろ。これであれば、画面が見える人も視覚障がい者が使用しているスクリーンリーダーでも、大見出しであることがわかるぞ。
見習い君：そうなんですね。それじゃ文字を大きくしたいところは、いっぱい見出し要素をつけましょう♪
師匠：見出しでないところに、見出し要素で記述するのはNGじゃ。そんなことをしたら、スクリーンリーダー利用者が必要としている情報にたどり着くのに、遠回りをさせてしまうことになるのじゃ。
見出しジャンプ機能について
見習い君：すいません。調子に乗りすぎました。
師匠：スクリーンリーダーの機能で、webページの見出し要素で記述しているところには、キーボードのHキーを押すと、見出しにジャンプすることができるのじゃ。
見習い君：なるほど！そんな便利な機能があるのですね♪
師匠：そうじゃ。きちんと見出し要素を記述しておけば、スクリーンリーダーを使用している視覚障がい者でも読みやすくなる。読みたい情報まで何十回もカーソルキーを押して移動しなくても、見出しにジャンプできることで素早く情報までたどり着けるからな。
＜見出しジャンプ無しの場合＞
＜見出しジャンプ有の場合＞
見習い君：そうすれば見出し以外は読み飛ばすことができますね。
師匠：あと、見出し要素にはレベルがあって、大見出し・中見出し・小見出しの順番で、h1・h2・h3と記述することで、さらにウェブアクセシビリティに配慮したページとなるぞ！
見習い君：おおーさすが師匠！！すごいですね♪
師匠：おだてても何も出んぞ。
秘書：見出しは、ページ内の文章構造を理解するために、とても重要な情報源です。
文字の太さ・大きさを変えるためだけに見出し要素を使ってしまうと、スクリーンリーダーでは見出しではない箇所を見出しと認識してしまいます。
そうなるとwebページの内容が、本来の意図とは異なった形で伝わってしまいます。
また、見出し要素をつけた箇所によってはスクリーンリーダー使用者が混乱してしまう場合もあるので注意が必要です。
見出し要素は、見出し箇所だけに使用するようにしましょう。
もっと知りたいと思った方は、こちらに詳しく書かれていますのでぜひ読んでみてくださいね。
【1.3.1 情報及び関係性の達成基準】
https://waic.jp/docs/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html（新しいウィンドウが開きます）
【2.4.6 見出し及びラベルの達成基準】
https://waic.jp/docs/UNDERSTANDING-WCAG20/navigation-mechanisms-descriptive.html（新しいウィンドウが開きます）
