誰でも分かるWebアクセシビリティ対応方法。

こんにちは。和希です！　

4月の中旬になりました。
個人的に野球が好きで、球春到来して嬉しく感じる季節です。
今年は東京シリーズという、メジャーリーグの試合が東京ドームで開催されるので、更に楽しみな季節となっています！　

さて、半年前私が書いたブログで「アクセシビリティとは何か」や「なぜアクセシビリティを配慮しなければならないのか」という記事を書きました。
まだ閲覧されていない方は、以下の記事をご覧ください。
Webアクセシビリティとは？　なぜ必要？

今回のブログでは、実際にアクセシビリティに配慮する作業方法などを紹介します。
現在、CMSなどで簡単に誰でもコードが触れる時代になりました。
ただ、作ったページが実際にアクセシビリティに本当に配慮されているか分からない方も多いと思います。

以下のよくあるアクセシビリティに配慮されていない事例を、どうやって修正するかなどを説明します。

見出しの文書構造

まず、1つ目は見出しの文書構造です。

HTMLの作業において見出しを入れたい時に、h1やh2などの見出しのタグを用いると思います。
ただ、見出しを入れる際に、見た目や文字サイズなどで判断していませんか？　
見出しの構造にはルールがあります。

主なポイントとしては、次の3つになります。

まず、見出しを入れたい際にはh2やh3などの見出しタグを用いることがルールです。

一例として、以下ののようなpタグで文字を出力していて、クラスで見出しと同じ装飾にしているものです。
※「class=”title2″」がh2と同じデザインのクラスと仮定。

見た目では、h2と見出しと同じになりますが、ブラウザ上では見出しかどうか判断できません。
判断できないと、ブラウザの音声機能で、見出しとして拾い読みされない事が生じます。
必ず見出しのタグを用いてください。

見出しのh1タグは1つだけ設定することがルールとして決まっています。
主にページの一番上になるタイトルに付けることが多いです。
本で例えると、本のタイトルだと思ってください。

ページタイトルが分かるために、h1要素を使い、ページの本題のタイトルを入力します。

アクセシビリティCKを行う中で一番間違っている事例がこれになります。
特に古いサイトとかでなりがちです。

見出しは、h1,h2,h3の順番で見出しの構造するというルールがあります。
よくある原因としては、見出しのデザイン（見た目）で判断した影響で間違った構造になってしまったりします。

以下のようにh2の次がh4となっておりますが、これは間違っている事例です。
h2の次はh3と順番になるところがh4となっているため間違っています。

ルール通りに行う場合は、h2の次はh3となります。

ブラウザには音声読み上げの機能があります。
最近ではスマホでも機能があります。
ただ、音声読み上げにおいて自動で正しく文章読み上げられるように変換するようなことはできないです。

そのため、ページを作る際に文字の表記や記号が正しく読まれなかったり、あるいは読まれない事例があります。

よくある間違った事例としては、以下になります。

上記の内容につきましては、総務省にて促進が示されています。
詳細は、以下の総務省のホームページをご覧ください。
その4　音声読み上げに配慮したテキスト表記（総務省へリンク）

今回よくある事例を2つ紹介しましたが、他にもルールが存在します。
ウェブアクセシビリティというのは、奥深いものなのです。

それではまた。