Webアクセシビリティの基礎の基礎│東京のWeb制作会社のWeb制作の関連コラム

Columnコラム

Web制作

Webアクセシビリティの基礎の基礎

Webアクセシビリティの基礎の基礎

2016/02/10
このエントリーをはてなブックマークに追加

Web担当者の皆様は、アクセシビリティと言われて何を想像されますか?一般的にWebアクセシビリティの向上と言うと、高齢者や障がい者の方々が利用しやすいWebサイトづくりの事を言います。
今回は、そんなWebアクセシビリティ向上において最低限行わなければならないことをご紹介します。が、その前に何をもってWebアクセシビリティが向上したか、その判断材料についてご紹介します。

「JISX8341-3」というもの

Webアクセシビリティの向上を考える上で、必ず手元にあった方が良い資料があります。それは「JISX8341-3」いわゆるJIS規格というものです。規格名称は「高齢者・障害者等配慮設計指針―情報通信における機器,ソフトウェア及びサービス―第3部:ウェブコンテンツ」となっており、この中にWebアクセシビリティについての規格が記述されています。

この規格に沿ったWebサイトかどうか。というのがWebアクセシビリティのレベル(高・中・低)になってくるのです。これからご紹介する内容は、この規格の中でも比較的容易に実装ができるものを取り上げております。

それでは、具体的な内容をご紹介していきます。

コントラスト比を考えよう!

色使いの話です。前述したJIS規格では、以下のように記述されています。

> テキスト及び画像化された文字の視覚的な表現には,少なくとも4.5:1 のコントラスト比がなければならない。(一部抜粋:高齢者・障害者等配慮設計指針―情報通信における機器,ソフトウェア及びサービス―第3部:ウェブコンテンツ)

規格上、コントラスト比は数値で記述されていて「4.5:1」です。前景色と背景色の相対輝度のことを言っています。背景に画像を置いて、その上に文字情報を置いていた場合、意識した方が良いことです(可読性を考える)。とはいえ、目で見てわかるものではありません...。

そこで、コントラスト比を調査してくれるツールを見つけましたので、併せてご紹介します。コントラスト比を調査したい場合には、ご活用ください。

http://alfasado.net/apps/colortester-ja.html

次はHTMLソース内の画像についての話です。
皆さまのWebサイトの中で、画像を利用していないというサイトはないと思いますが、ここにも規格があり、「代替テキストに関するガイドライン」という項目です。
内容は、サイト内のimg要素にalt属性があるかどうか、alt属性を画像に合わせて適切に設定しているかなどです。

これは、様々な意図がありますが、恐らくは「音声ブラウザ」を利用する方々に向けたものだと思います。
音声ブラウザは、サイト内のテキストを認識し、読み上げるブラウザとなっています。
もちろん機械ですから、画像を認識することは困難です。そのため、音声ブラウザはimg要素のalt属性に設定されたテキストを読み上げるようになっています。alt属性を適切に設定していないと、利用者に情報を伝えることができないのです。

このように、画像に対してalt属性が設定されているかもWebアクセシビリティ向上では重要なことなのです。

まとめ

いかがでしたでしょうか?
基礎のさらに基礎編としてご紹介いたしましたが、皆さまのサイトは規格に沿っていますか?改めてご自身のサイトを確認し、できていない場合は、改善を図ってみてください。
今回ご紹介したことはどれも簡単なことですが、小さな気遣いがWebアクセシビリティの向上に繋がります!また機会があれば、Webアクセシビリティについてもっと深くご説明したいと思います!お楽しみに(^^ゞ

By Consultant Keisuke Itoi

ホームページ制作でお困りの方はホームページ制作会社ティファナにご相談ください!

お問い合わせはこちらから

関連するサービス

JIS規格(JIS X8341-3:2010)対応サイト制作

ユーザービリティの向上

ホームページ制作

text_totop