Webページを掲載する官公庁・企業、Webページを制作するWebデザイナー向けのガイドです。不定期に更新する予定です。
高知システム開発では、目の不自由なかたがWebページにアクセスするための支援ソフトとして、スクリーンリーダー(PC-Talkerシリーズ、VDMWシリーズ)、音声ブラウザ(NetReader)をリリースしています。
ナレーターなどOS標準のスクリーンリーダーも含め、Webページのアクセシビリティを高めるためには、Webページの閲覧「テキスト情報の設定」と、Webページの操作「キーボード対応」が重要となります。
Webページのテキスト情報は大変重要です。
(ラスタ、ベクタ形式に関わらずに)画像化された文字には、テキスト情報が含まれません。
その他、文字画像が含まれないボタンや画像・写真なども、操作可能な場合は、すべてテキスト情報(Alt属性などテキストによる説明)が必要です。
デザインを優先したWebページでも、利用者に必要な視覚情報をテキスト情報として提供することで、視覚障がい者は音声を頼りに、Webページの内容を詳しく知ることが可能になります。
※Web側でガイド音声を提供したり、ページの一部分を読み上げたりする独自機能を実装しているWebも見られますが、スクリーンリーダーと併用する場合は音声の重複や競合が発生して逆に不便になることがあります。
テキスト情報(説明文)の設定により、Webページの内容を音声を頼りに読むことができるようになります。
しかし、閲覧はできるようになっても、操作ができるとは限りません。
一般的に、Webページの制作者が晴眼者(目が見えるかた)の場合、デザインに加えて、マウスやタッチ操作に重点を置くため、視覚障がい者の操作が困難になる傾向がみられます。(クラウドサービスやCMSの利用でも同じ傾向が見られます)
とくに晴眼者の場合、マウスやタッチ画面が使える状態ですと、アクセシビリティ向上という意味では、そのことが障害となってしまいます。
いまいちど、Webページを公開される前に、マウスやタッチ画面を使わずにキーボードだけで操作が可能かどうか、検証されることをおすすめいたします。
アクセシビリティを高めるための参考例です。
・見出しタグを利用すると、目的の場所にアクセスしやすくなります。
・レイアウトにはテーブルではなくスタイルシートをお奨めします。
・二者択一はチェックボックス、それ以上の複数選択はコンボボックスがおすすめです。(ラジオボタンはキー操作が複雑なため)
・画像によるキャプチャ認証が必要な場合は、音声による認証も必ず付加して下さい。
Webクリエイター向けに無料でWebページをテストできるPC-Talker Neo Plusのベータ版をご用意しました。
音声で読み上げる情報を音声キャプションウインドウでテキスト表示することができます。
ベータサイトよりダウンロードしてお使いください。