Webアクセシビリティとは何か
アクセシビリティは英語ではaccessibility書き、直訳すると『近づきやすさ』という意味です。
製品や建物に対して使われ、誰もが使いやすい環境であるかどうかの度合を示す時に使われます。Webコンテンツに対して使われる場合は、Webアクセシビリティと呼ばれます。
Webアクセシビリティの意味や、ユーザービリティとの違いを解説します。
誰もがアクセスできる環境
Webアクセシビリティは、Webサイトの見やすさや使いやすさに対して使われる言葉です。
高齢者や体が不自由な人など、様々なバックグラウンドを持つ人たちを含む、すべての人が不自由なく使える環境を目指そうとする概念を意味します。
Webアクセシビリティに乏しいと、訪問者がWeb上で提供されている情報にアクセスすることが難しくなるでしょう。
ユーザービリティとの違い
アクセシビリティと混同されがちな言葉に、ユーザービリティがあります。
アクセシビリティはすべての人が使いやすいかどうかを指すことに対し、ユーザービリティは訪問者が目的を果たしやすいかどうかを意味しています。
具体的には、ナビゲーションメニューの使いやすさや、入力フォームの入力しやすさなどが該当します。
Webアクセシビリティの基準
すべての人がアクセスしやすい環境を作るには、いくつもの項目をチェックする必要があります。
ある人にとってはアクセスしやすくても、ある人にとってはアクセスしづらいということにならないように、様々な項目をチェックすることが大事です。Webアクセシビリティの重要性や、基準について確認しましょう。
Webアクセシビリティの重要な意味
Webアクセシビリティを無視してしまうと、一部の訪問者しかサイト上の情報を入手することができない事態に陥ります。
例えば、視覚が不自由な人はWebページのテキストを読み上げるソフトを利用し、耳から情報を入手しています。
もし、Webサイト側に音声読み上げソフトが使われることを想定した配慮がされていなければ、コンテンツを正しく理解することが難しくなってしまうでしょう。
義務化されている国もある
インターネットが生活を便利にするために、なくてはならないものとなっている人は多いことでしょう。
インターネットの利用率は年々増加しています。利用率の増加に伴い、ユーザーにおける高齢者やの割合も多くなってきました。
ほとんどの先進国ではインターネットの需要が高まるにつれ、誰もが等しくWebサイトにアクセスできることを人権のひとつであると考え、Webアクセシビリティの確保を義務化しています。
日本も例外ではなく、公的機関におけるWebアクセシビリティを合理的に配慮することが法定義務として定められました。
JIS X 8341-3 2016
Webアクセシビリティに取り組むための基準として、日本で設けられているものが『JIS X 8341-3 2016』です。
情報通信における機器やソフトを、誰でも操作あるいは利用できることを目的とした公的規格として、日本工業標準調査会（JISC）が制定しました。
JIS X 8341-3 2016にはウェブコンテンツの企画・開発・運営に携わる人が、配慮すべき要件がまとめられています。
達成基準はレベルA～AAAの3つに分類されており、どれだけ基準を満たしているかを判断することが可能です。
日立システムズは等級AA達成
民間が運営するWebサイトの場合、Webアクセシビリティに関する法定義務はありません。アクセシビリティを確保するように努めなければならない努力義務として、企業の判断に委ねられている状態です。
Webアクセシビリティに対する対応がされていなくても罰則があるわけではありませんが、利用者のことを第一に考えるのであれば必要不可欠なものだといえるでしょう。
企業としての社会的責任を重く考えている企業は、Webアクセシビリティの確保に積極的です。
例えば、日本でも有数の企業である日立システムズは、JIS X 8341-3 2016のAA（中レベル）を達成しています。
WCAG 2.0
WCAGはW3Cが勧告している、Web Content Accessibility Guidelines（ウェブコンテンツに関するアクセシビリティガイドライン）のことです。WCAG 2.0は、1999年に公開された仕様の後継になります。
W3CはWebに関する様々な技術の標準化を目指す、非営利団体のことです。Webに携わる仕事をしている人やWebサイトの運営を行ったことがある人であれば、一度は耳にしたことがあるのではないでしょうか。
WCAG 2.0にはWebアクセシビリティを高めるためのガイドラインが広範囲に定義されており、A～AAAまでの適合レベルが設けられています。
出典：Web Content Accessibility Guidelines (WCAG) 2.0
Webアクセシビリティ対応のポイント
すべての人を対象として、あらゆる情報を取得しづらい状況を想定することが、アクセスのしやすさを図ることにつながります。Webアクセシビリティを高めるためのポイントをチェックしましょう。
利用シーンを想像する
指先が不自由な人が、パソコンからWebサイトを利用するシーンを思い浮かべてみましょう。マウスを思うように動かせない場合、利用者はキーボードからの操作に頼ることになります。
例えば、Tabキーを使ってフォーカスを移動するケースで、移動順序が適切に整えられていない場合、使用者に大きなストレスを与えてしまうことになるでしょう。
また、ページが不必要に長いと、必要な情報を探すために時間をかけることになってしまいます。
Webアクセシビリティは必ずしも、体が不自由な人や高齢者のためだけに必要なものというわけではありません。
例えば、移動中にスマホを使ってページを閲覧するケースでは、体が不自由かどうかに関わらず直感的な操作ができるかどうかが重要です。あらゆる利用シーンを想像することが、Webアクセシビリティの向上につながるでしょう。
検索上位に表示されることも大切
Webアクセシビリティを高めるにはサーチエンジンの最適化（SEO対策）をきちんと行っているかも重要な要素になります。Webページから収集した結果をもとに、検索結果の順番が変わることをご存知の人は多いでしょう。
この収集作業は機械的に行われているため、HTMLによる文書構造が適切かどうかや、画像に代替テキストが指定されているかどうかが重要です。
視覚に障害を持つ人が利用しているWebページの読み上げソフトは、機械的に制御されています。Webページが検索結果の上位に表示されていれば、機械にとって読み取りやすいページを作れていることになるでしょう。
文字のアクセシビリティ対応
Webページにおいて、文字のあり方は情報を得るために重要な要素になります。アクセシビリティ向上のために押さえておきたいポイントをチェックしましょう。
環境依存文字を使わない
文字を変換した時に『環境依存』と表示される文字列は、特定の環境下でしか表示できない文字を意味します。
環境依存文字は特定の環境以外では文字化けの原因となったり、読み上げられない場合が多いため、使わないようにしましょう。どうしても使う必要がある場合、画像として表示させることもひとつの方法です。
文字列の長さ
文字がぎっしりと詰まっているWebページは、例え視覚に問題がない人でも読みにくさを感じます。視野が狭い人や、難読症の人は読みにくくて仕方がないでしょう。
1行に入れる文字数を日本語の場合40文字、英数字は80文字以下にすることで、どんな人にも比較的読みやすいページにすることができます。
また、WCAGでは文字数の規定に加えて、横にスクロールしなくても200%までの拡大表示が可能になるように設定することを推奨しています。
文字サイズに合わせたフォント
Webページの中には、サイトのイメージ合わせてフォントを設定しているページが珍しくありません。しかし、フォントによっては、文字サイズが小さいと読みづらくなってしまう場合があります。
小さな文字を表示したい場合は、書体のデザインよりも視認性にこだわることが大事です。ゴシック体のフォントを使用すると、10px程度の小さな文字でも比較的認識しやすくなります。
音声読み上げに対応した表記
日付を入れる場合は漢数字を使った表記をすると、スムーズに読み上げてもらいやすいです。2019/3/14のように『/』を使うと、分数として読み上げられてしまうことがあります。
また、文字の体裁を整えるためだけにスペースを使うことは避けた方がいいです。単語の中に余計なスペースを入れてしまうと、読み上げソフトが正しく認識できなくなります。
例えば『氏 名』と表記してしまうと、『し、な』というように個別に読み上げられてしまい、意味がわかりにくくなるでしょう。
画像のアクセシビリティ対応
文字だけでなく画像のアクセシビリティも意識することで、誰にとっても使いやすいWebページを目指すことができます。画像に関するアクセシビリティのポイントを見ていきましょう。
必要に応じてalt属性を設定する
alt属性は画像の代替文字のことを表し、imgタグに含まれます。alt属性には、読み上げられた時に正しく意味が伝わるようなテキストを設定することが重要です。
何も入れなかったとしても画像を表示させることは可能ですが、Webページの読み上げを行うソフトは、alt属性がない画像の存在をユーザーに知らせてくれません。
alt属性を省いてしまうと、画像を見ることができない人に画像の存在を伝える手段がなくなってしまうことになります。
もし、画像だけで構成されているようなページがあった場合、alt属性に適切な文字が入力されていないと、ひとつも情報を得ることができないという事態に陥ってしまうでしょう。
キャプションをつける
画像にキャプションを付けると、より意味が伝わりやすくなります。例えば人物写真を掲載する場合は『写真：（人名）』というキャプションを付けると意味がわかりやすいです。
必要であれば画像に注釈を付けるfigure要素を使って、文書構造をより正確に伝えるといいでしょう。
適切なキャプションがあると画像と文章の関係性がよりわかりやすくなるため、視覚に障害を持つ人だけでなく、誰にとっても有益だと考えられます。
誰が見ても分かる図を使用する
色覚障害には様々な種類があるため、一概にこの色同士の組み合わせなら大丈夫と言い切れない面があります。
アクセシビリティを高めるには、誰が見てもわかるようなデザインの図を作成することが大事です。具体的な作成のポイントを押さえましょう。
色の違いだけではなく、形で分かりやすく
色覚の異常によって、色を正しく判別できないケースもあります。色覚に不安がある人の利用を想定せず、色で意味の違いを表現しようとすると混乱を招いてしまうでしょう。
例えば、入力フォームで入力が成功した場合は緑色に枠線が表示され、エラーの場合は赤で枠線が表示されるというケースを見たことがないでしょうか。
この場合、赤と緑の見分けがつきにくい人は、どこがエラーになってしまったのかわかりません。○や×のアイコンを使って、分かりやすく成功と失敗を表示する必要があります。
似た色はデザインを変えて違いを表す
色覚障害は、すべてが同じ見え方をするわけではありません。人によって、色の判別のしやすさが異なり、赤と緑の見分けがつきにくい人もいれば灰色とピンクが同じ色に見える人もいます。
色だけに頼った図では意味が伝わらないリスクがあるため、デザインを変えて別のものであることをわかりやすく伝えるといいでしょう。例えば、色を変えるだけでなく柄を変えるといった工夫をすることがおすすめです。
配色をチェックしよう
Webページの文字の識別しやすさにも、ガイドラインが設けられられています。コントラスト比を整えて、誰からも見やすいページを目指しましょう。コントラストに関する規定やチェック方法をご紹介します。
コントラストのガイドライン
WCAGによると、コントラストに関するガイドラインには、3つの達成方法があります。
- テキストと背景のコントラストは、4.5：1以上の比率を持たせる
- 背景色やテキストの色を使用せず、初期設定を変更可能な技術や機能を使用しない
- 利用者が十分なコントラストのある表現に変換可能である
3つすべてを達成しなければならないわけではなく、いずれかを満たしていればコントラストに関するアクセシビリティは確保できていることになります。
Photoshopの校正設定
画像編集ソフトのPhotoshopには、色覚障害を持つ人からどのように色が見えているかを疑似変換し、色の校正をするための機能が搭載されています。この機能が標準搭載されているのは、Photoshop CS4からです。
WebページをスクリーンショットしPhotoshopで開いて色の校正を選択すると、色の強弱の見分けが付きづらい部分を的確に発見し、修正できるでしょう。
- 商品名：Photoshop
- 価格：月額2480円～
- 公式HP
ColorTester
ColorTesterは、WCAG 2.0の達成基準に基づいて2色間のコントラスト比を導き出し、評価してくれる便利なソフトです。背景色と前景色をそれぞれ選択するだけで、コントラスト比を確認できます。
Mac OS X 10.7以降のバージョンであれば、Webブラウザから直接ツールボックス内に画像をドラッグ&ドロップするだけで判別可能です。
Windowsで使う場合は、Mozilla Firefoxを利用すると簡単に利用できます。
- 商品名：ColorTester
- 価格：無料
- 公式HP
まとめ
社会の中でインターネットの役割が重要性を増すに連れ、今後益々Webアクセシビリティへの関心が高まるでしょう。日本では公的機関以外の企業では、まだ義務付けられているわけではありませんが、需要は高まっていると考えられます。
すべての人が使いやすい環境を目指せば、Webサイトへのアクセス数もアップするでしょう。便利なツールを利用しながら、アクセシビリティが高いサイト作りを目指してはいかがでしょうか。
