参考資料

ウェブ・アクセシビリティについて


<ウェブ・アクセシビリティとは>
 高齢者や障害者といった、ホームページ等の利用になんらかの制約があったり利用に不慣れな人々を含めて、誰もがホームページ等で提供される情報や機能を支障なく利用できること。
Accessibility(アクセシビリティ)=Access+ability (アクセス+可能であること)

<重要性>
 インターネットの社会基盤としての重要性が高まり、ICTを活用して提供される公共サービスが充実すればするほど、それらのサービスが利用できない場合の不利益も深刻となり、障害者や高齢者も含めたあらゆる人々がそれらのサービスを利用できることが重要な課題となっている。


◆ウェブ・アクセシビリティの例(1)〜視覚障害者

【問題点の例】
視覚障害者は、画面読み上げソフト等を利用してホームページ等の内容を把握しているが、以下のような問題を抱えている。
  1. 画像情報について内容の把握ができない。
  2. 単語の途中にスペースがあると画面読み上げソフト等が間違った読み方をしてしまい、意味が取れない。

【実装例】→画面読み上げソフト等への対応
  1. 「代替テキスト」を設定することで、画像が示す内容を読み上げさせることができる。
  2. 単語の間にスペースを入れないことで、正しく読み上げさせることができる。


※良い例 代替テキストを設定することで目が見えない人でも画像が示す内容が理解できる。
    代替テキストが適切な良い例。富士山の風景写真に「本栖湖から見た富士山の風景」という代替テキストを設定。


※悪い例 「経済」ではなく「経_済」となっているために「けい・ざい」ではなく「けい・すみ」と読み上げてしまう。
    単語の間にスペースが入っている悪い例。「経済」という単語の間にスペースが含まれている。
 


◆ウェブ・アクセシビリティの例(2)〜色覚障害者、高齢者

【問題点】
ウェブサイトの情報のうち、色分けのみで示されている図表が見にくい。

【実装例】→複数の情報識別手段の設定
情報識別の手段として、色彩のみを使用せず、文字やパターンなどの変化も併用する。


※悪い例 色だけで円グラフの領域を表現
    色彩だけで違いを表現した悪い例。円グラフに4種類ある領域を色彩の違いだけで表現しているため、判別しにくい場合がある。


※良い例 引き出し線をつけ領域の違いを表現
    色彩と引き出し線を併用した良い例。円グラフに4種類ある領域を色彩と引き出し線を併用することにより、判別がしやすい。
 


◆ウェブ・アクセシビリティの例(3)〜上肢障害者

【問題点】
細かなマウス操作が困難な場合、ラジオボタンの表示面積は小さいので、マウスでのクリック操作が困難になる。

【実装例】→操作性の向上
ラジオボタンだけではなく、テキストをクリックした場合でも選択できるようにする。


※悪い例 ラジオボタンしかクリックできない
    設問に対して選択肢を選ぶ悪い例。ラジオボタンとテキストが併記されているが、ラジオボタンしかクリックできない。


※良い例 テキストの部分もクリックできる
    設問に対して選択肢を選ぶ良い例。ラジオボタンとテキストが併記され、どちらでもクリックできる。
 



報道資料に戻る