Webアクセシビリティとは？メリットが多いサイトの「バリアフリー」化

年齢や性別、障害の有無にかかわらず全ての人が同じようにWebサイトにアクセスでき、同じ情報を得ることができる。これが「Webアクセシビリティ」です。

多くの人が利用するインターネットは、もはや電車やバスと同じ公共サービスと言っても過言ではありません。そんな公共サービスに求められるものは、全ての人が同じように利用できるバリアフリーな環境です。今回は、Webアクセシビリティによって実現されるサイトのバリアフリー化についてご紹介します。

最後まで読み終わる頃には、Webアクセシビリティに関する疑問点が解消されていることでしょう。

Webアクセシビリティとは？

利用環境やハンディキャップの有無にかかわらず、誰もが使える「Webアクセシビリティ」。具体的にはどのようなメリットがあるのでしょうか？

Webアクセシビリティが注目される理由

以前のインターネットユーザーは主に若者から中年層までが多く、ハンディキャップを考慮する緊急性はそれほど高くありませんでした。そのため、Webアクセシビリティが大きく取り上げられることも少なかったのです。

しかし、今やWebは老若男女、障害の有無に関係なく誰もが利用するようになっています。またPCだけでなくスマートフォンやタブレットなどデバイスの多様化が進んでいます。さらに、市役所などの公的機関もWebサイトで多くの情報を発信するようになっています。現在では多種多様な人がWebサイトを閲覧しているため、Webアクセシビリティの必要性が注目されるようになりました。

Webアクセシビリティの重要性とメリット

・ユーザビリティの向上

1つ目のメリットは、ハンディキャップを持った人でも健常者と同じ情報が得られるということです。

例えば、文字が大きく、音声再生機能も付くことにより「目の不自由」な人が健常者と同じ情報を得ることができます。サイト上に貼られている音声情報に文字の説明が加われば、「耳の不自由」な人が重要な情報を聞き漏らすことがなくなります。また、ページごとのボタンの位置を統一させると、マウスを動かす範囲が小さくなるため、手の不自由な人でも操作しやすくなります。

さらに、これらの全てがそろうと、高齢者にとってもやさしいWebサイトになります。

・外国人ユーザー数の増加

2つ目のメリットは、日本語以外の言語に対応することで、日本語を母国語としない外国人でも、日本人と同じ情報を得られるということです。1ページ目で言語を選択できるような構造にしておくと、自分が理解できる言語に変換してからサイトの内容に目を通すことができます。

・企業の社会的イメージアップ

3つ目のメリットとして、Webアクセシビリティに配慮したWebサイトを制作する姿勢を打ち出すことで、企業のイメージ向上につながる点が挙げられます。消費者は、イメージが良く、信頼できるブランドや企業の商品を選択する傾向にあるため、社会的なイメージをアップさせることは、結果としてコンバージョンにつながります。

Webアクセシビリティに対応するためのポイント

Webアクセシビリティを実現するために知っておきたい5つのポイントをご紹介します。

1）文字サイズの最適化

高齢者や視覚障害でも読みやすくするために、文字のサイズは大きめに設定しましょう。とはいえ、あまり大きくし過ぎると逆に読みづらくなってしまうため、全体のバランスが大切です。重要な文章や単語は太字にしたり、文字のサイズをさらに大きくして強調するのが良いでしょう。

2）文字の色・背景の色

認識しやすくするため、文字と背景の色とのコントラストをはっきりとつけましょう。コントラストの強弱を知りたいときは、一度白黒印刷をするとわかります。

3）画面サイズの最適化

手の不自由な人の中にはスクロールが困難なケースがあるので、なるべく縦に長いサイトは避けます。また、別ウインドウは煩雑になる上「前に戻る」ことが難しいので避けたほうが良いでしょう。

4）音声機能

視覚が不自由な方は、音声の読み上げソフトなどを使うことが多いですが、画像や動画は文字ではないので読めません。したがって画像や動画には文字による説明を記載しましょう。

5）動画の字幕表示

テレビなどでは字幕放送も多くなっていますが、聴覚障害の方にとって動画は内容が理解しづらいものです。動画の下部に字幕を入れるようにしましょう。

Webアクセシビリティをチェックする方法

Webサイトのバリアフリー化が実施されているかどうかをチェックできる方法をご紹介します。ご自身のサイトをチェックしてみてください。

Webアクセシビリティをチェックする作業は、上記の項目を一つひとつ確認していくので手間がかかります。チェック専用の便利なツールがありますので、そちらを利用すると良いでしょう。

Check My Colours

Webサービスとして提供されているもので、URLを入れると、サイトの配色コントラストがチェックできます。これによって配色が悪く、修正が必要な箇所がわかります。

Check My Coloursのサイトはこちらから

Another HTML-lint 5

HTMLの構文チェッカーですが、Webアクセシビリティのチェックも可能となっています。検証による分析の結果は、「問題あり」「問題の可能性大」などとレベル分けして表示され、詳細を確認することが可能です。

Another HTML-lint5のサイトはこちらから

mi Checker

総務省がWebアクセシビリティ対応の促進をサポートするために提供している評価ツールです。サイトをチェックし、問題のある箇所を色分けして表示することができます。また、音声読み上げの様子を視覚的に確認することも可能です。

mi Checkerのサイトはこちらから

スクリーンリーダー

視覚障害者がPCを操作し、Webサイトを自由に閲覧できるように音声で読み上げてくれるソフトです。音声でPCの画面やWebサイトを読み上げてくれるので、目が不自由な方であっても健常者と同じように利用することができます。

スクリーンリーダーのサイトはこちらから

重要度を増すWebアクセシビリティの価値

Webアクセシビリティを実現することは、すべての人が平等に情報にアクセスできるようになるという点で社会的に意義のあることです。

Webアクセシビリティが充実したWebサイトを作成するためには、視覚や聴覚、色彩コントラストなどをチェックする必要があります。

超高齢化社会を迎える日本で、Webアクセシビリティの重要性はこれからますます高まっていくでしょう。