インターネットが身近になった今、あらゆる人種、性別、年齢、さらには身体的特徴や障がいを持たれた方がWebサイトを閲覧しています。私たちWebサイトを運用する側は、こちらすべてのユーザに対し情報を的確に伝える配慮を行うがあります。一般的に建物や製品を設計する上で必要とされている「ユニバーサルデザイン」と共通する考え方です。

今回は、あらゆるユーザーに対し「伝わる」Webサイトを提供してくために、私たちが理解し、取り組まなければいけないことについて解説しています。

Webサイトにおけるユニバーサルデザインとは？

まず、ユニバーサルデザインとは何でしょうか。

例えば、車いすの方が建物の中にスムーズに入ることができるように、あらかじめスロープを設計し、作り上げることをユニバーサルデザインと言います。
Webサイトにおけるユニバーサルデザインも考え方は同じです。「すべての人がウェブサイトで提供される情報を利用できるようにすること」が、Webサイトのユニバーサルデザインです。Webにおいては、「Webアクセシビリティ」と呼ばれることが一般的です。

障がい者はどのようにWebを利用しているのか？

Webアクセシビリティを理解するためには、まず障がいを持たれた方がどのようにWebサイトを通して情報を取得しているかを知ることが大切です。

総務省のWebサイトでは、視覚障がい者がどのようにWebページを利用しているか動画で紹介しています。
下記の動画をご覧ください。

視覚障害者（全盲）のウェブページ利用方法

視覚障害者（弱視）のウェブページ利用方法

肢体不自由者のウェブページ利用方法

肢体不自由者のウェブページ利用方法については、下記のページよりデータをダウンロードのうえ、ご覧になれます。
http://www.soumu.go.jp/menu_news/s-news/2005/051215_1_wmv.html

出典：総務省ホームページ （障害者のウェブページ利用方法の紹介ビデオ）

Webアクセシビリティを確保する際の配慮点

では、Webアクセシビリティの確保されたサイトを作成するにはどうすればいいのでしょうか。具体的な方法を4つ紹介します。

画像の代替テキスト（alt属性）の設定

画像を掲載するときには、代替テキストを設定するようにします。
代替テキストとは、Webサイト内に含まれている画像や動画が何らかの原因で表示されなかったときや、視覚障がい者などが音声ブラウザを使用するときに変わりに読み上げするテキストのことです。
img要素にalt属性をつけて代替テキストを記述します。

HTMLでの記述例

<img src="/media/05.gif" alt="健康保険証・紹介状（お持ちの方）・各種医療症（お持ちの方）・お薬手帳（お持ちの方）"/>

<img src="/media/06.gif" alt=" " >

alt属性を空にすることと、alt属性を付けないことでは大きな違いがあります。alt属性を付けないと、音声ブラウザは画像のファイル名を読み上げてしまいます。ユーザーにわずらわしい思いをさせないためにもalt属性をつけるようにしてください。

わかりやすいリンクテキストの作成

テキストをリンクとして用いる場合、「こちら」「ここをクリック」といった文言をリンクテキストにしているのを見かけますが、音声ブラウザの利用を考えると好ましくありません。通常、音声ブラウザにはページ内を効率的に読み進めるためにリンクだけを読み上げる機能があり、音声ブラウザのユーザーの多くがこの機能を利用しています。その際、「こちら」ではリンク先ページの内容を予想することができません。

【悪い例】　会場へのアクセスはこちら
【良い例】　会場へのアクセスは交通アクセスページへ

リンクテキストは、リンク先ページの内容を予想できるようなものにするのが望ましいです。

コントラストの確保

文字色と背景色のコントラストが弱いと読みにくくなってしまいます。同系色は避け、コントラストを充分にとるようにしましょう。

読みづらい例

WebアクセシビリティのJIS規格である「JISX8341-3:2016」では、コントラスト比を次のよう確保するよう定めています。

色だけで内容を表現しない

色覚障がいの方に配慮し、色だけで内容を表現するのは避けるようにしてください。

上図のように休日を赤色だけで示すと、赤色障害の方は休日を識別することができません。色だけでなく形や大きさでも識別可能な配慮が必要です。

さいごに

4年ほど前の調査報告ですが、「障がいのある方々のインターネット等の利用に関する調査研究」（2012年/総務省情報通信政策研究所）によると、障がい者全体の約53%がインターネットを利用しています。視覚障がい者だけに絞り込むと91.7%になるそうです。
さらに、2016年4月に施工された「障害者差別解消法（障害を理由とする差別の解消の推進に関する法律）」により、行政機関だけでなく民間事業者においてもアクセシビリティへの取り組みが必要とされています。

アクセシビリティについて具体的な取り組みをしていないWeb担当者の方は、これを機にアクセシビリティへの関心を持っていただき、どんな人にも伝わるやさしいホームページを目指してみてはいかがでしょうか？

この記事を書いた人

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。

この執筆者の最新記事

この執筆者の記事一覧

• 2022年10月24日WEBGraphQLサーバを構築するためのGoライブラリ「gqlgen」を使ってGraphQLサーバーを構築してみる
• 2022年8月25日WEBGo WebAssemblyでブラウザ上でGoを実行する その3 Javascript側からGoの関数を呼び出す
• 2022年6月21日WEBGo WebAssemblyでブラウザ上でGoを実行する その2 Go側からJavascriptを操作する
• 2022年4月25日WEBGoのコードをWebAssenblyにコンパイルしてブラウザ上でGoを実行する