ウェブのアクセシビリティ

アクセシビリティ豆知識−「見出し」について

ウェブサイトを、少しでも簡単にアクセシブルなページにするための豆知識・その5。
今回は、「見出し」についてです。

「見出し」とは、大辞泉によると、「新聞・雑誌などで、記事内容が一見してわかるように、文章の前に示す簡単な言葉。標題。タイトル」とあります。
そしてまた、「書籍・帳簿などの目次・索引」ともありました。

ウェブサイトにも、その「見出し」の概念はあり、「見出しタグ」というタグも独自にあります。
そしてそれは、アクセシビリティやユーザビリティにおいて、とても重要なタグです。

「見出し」といっても、ウェブサイトのデザインはそれぞれ違うので、新聞のように「これが見出しだ」とはっきり分かるというより、「他のテキストより目立っているから見出しかな」と視覚的に判断するしかないように思えますが、読み上げソフトを利用しているかたにはとても大事な要素です。

なぜかというと、見出しタグを適切に使うことにより、読み上げソフトが見出しを読む時に「ここは見出しですよ」という意味の音を出して知らせてくれるからです。
見出しを読めば、その見出しに続く記事がどのような内容かも分かるので、目的の記事を見つけやすくなりますし、逆に、興味のない記事を読み飛ばすなどといったことができます。
つまり、見出しが目次の役割にもなるんですね。

見出しタグは、<div>から<h6>まであり、フォントサイズは<div>が一番大きく、それ以降段々小さくなります。

見出し1

見出し2

見出し3

〈htmlソース〉
<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>

しかし、それは何の設定もしてないデフォルトの状態の場合ですので、スタイルシートを使ってフォントサイズやフォントカラーなど様々な指定ができます。

(例)

見出し1

見出し2

見出し3

ですので、目立てばいいんだろうと、見出しタグを使わずに太字にしたりフォントを大きくするだけだと、視覚的には分かりますが、読み上げソフトを利用している人には見出しのお知らせの音が鳴らないので、見出しだということが伝わりません。

タグについては、ウェブサイトページを作る構造上のことなので少し難しいかもしれませんが、とても重要なタグですので、いつか自分でサイトを作る時のためにも、頭の隅に置いておいて下さい。

適切なタグを使って、より多くの人がいろいろな情報をキャッチできるようにしたいですね。