スクリーンリーダー利用者にとって「見出し」の重要性とは!‐第9回‐

イラスト:小見出し、中見出し、大見出しなどさまざまな大きさのタイトル例
イラスト:秘書

秘書:今回は、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(新しいウィンドウが開きます)

特別協賛企業の製品・サービスのご紹介

  • NTT Innovative Devices
  • NTT ExCパートナーの公式サイトへ
  • 特別協賛企業の製品・サービスのご紹介_日本電信電話
  • NTTテクノクロス株式会社の公式サイトへ
  • NTTファイナンス株式会社の公式サイトへ
  • 株式会社NTTロジスコの公式サイトへ
  • NTTアドバンステクノロジ株式会社の公式サイトへ
  • gooのサイトへ。NTTレゾナント株式会社
  • 株式会社NTTアドの公式サイトへ

追加協賛企業のご紹介

  • NTTアドバンステクノロジ(株)の「障がい者雇用などの取り組みインタビュー」ページへ

お知らせ

編集部のおすすめ記事

  • ゆうゆうゆう便り(メルマガ読者募集中)
  • ゆうゆうゆうのfacebook
  • 広告バナー募集中
ページの先頭へ