Webページを掲載する官公庁・企業のご担当者、Webページを制作するWebデザイナーのかたに向けたガイドです。
対象とする利用者は、スクリーンリーダー(画面読み上げソフト)を必要とする、強度弱視のかたから全盲のかたまでです。
高知システム開発は、スクリーンリーダー PC-Talkerシリーズ、音声ブラウザ NetReaderを開発しているメーカーです。30年にわたり視覚障がい者のパソコン利用を支援してきた経験をもとに、実際の利用場面に即したポイントをご紹介します。不定期に更新する予定です。
アクセシビリティ対応の前に、まず利用者がどのようにWebページを使っているかを知っていただくことが近道です。
スクリーンリーダーの音声を頼りに、キーボードだけで操作します。マウスは使いません。画面も見ません。
ページは「先頭から順番に」音声で読み上げられます。画面のどこに何が配置されているかというレイアウト情報は伝わりません。
目的の場所へは、見出しからジャンプ、リンクだけを拾い読み、Tabキーで移動、といったキーボード操作でたどり着きます。
画像は、代替テキスト(alt属性)が設定されていればその文章が読まれ、なければ存在しないのと同じか、無意味なファイル名が読まれるだけです。
画面を強く拡大し、黒背景・白文字などの高コントラスト配色に調整したうえで、スクリーンリーダーの音声を併用します。
拡大しているため、一度に見えるのは画面のごく一部です。「いまフォーカスがどこにあるか」がぼんやりとでも視覚的に分かることが、操作の大きな助けになります。
キーボード操作が中心ですが、マウスを併用するかたもいます。
スクリーンリーダーが読み上げられるのはテキスト情報だけです。閲覧のアクセシビリティは「必要な情報がテキストとして存在するか」で決まります。
画像化された文字(ラスタ・ベクタ形式を問わず)には、テキスト情報が含まれません。バナーや図版の中の文字は読み上げられません。
文字はできる限りテキストのまま掲載し、やむを得ず画像にする場合は、同じ内容を代替テキスト(alt属性)や本文で必ず提供してください。
操作できる画像やボタン、内容の理解に必要な画像・写真には、すべてテキストによる説明(alt属性など)が必要です。
逆に、装飾だけの画像には空のalt属性(alt="")を設定してください。余計な読み上げがなくなり、聞きやすくなります。
スクリーンリーダーには「次の見出しへジャンプする」機能があり、多くの利用者が多用しています。
見た目の文字サイズではなく、h1〜h6の見出しタグで文書の構造を作ってください。見出しがないページは、先頭から全部聞かないと目的の場所を探せないページになります。
利用者はページ内のリンクだけを一覧して拾い読みすることがあります。
「こちら」「詳細」だけのリンクは、一覧で聞いたときに行き先が分かりません。「製品カタログのダウンロードはこちら」のように、リンクの文言だけで行き先が分かる表現にしてください。
Webページ側でガイド音声を流したり、ページの一部を読み上げたりする独自機能を実装しているサイトが見られます。
スクリーンリーダーの利用者は常に自分の音声環境で聞いているため、ページ側の音声と重複・競合して、かえって聞き取れなくなることがあります。音声はスクリーンリーダーに任せ、ページ側はテキスト情報の整備に注力いただくのが確実です。
テキスト情報の整備でページを「読む」ことはできるようになります。しかし、読めることと操作できることは別の問題です。
リンクやボタンの実行、メニューの展開、フォームの入力と送信まで、マウスを使わずTabキー・矢印キー・Enterキーだけで完了できることが必要です。
マウスオーバー(ポインターを乗せること)でしか開けないメニューや、ドラッグでしか動かせない部品には、キーボードで同じ目的を果たせる代替手段を用意してください。
Tabキーで移動している「いま選ばれている場所」の枠線(フォーカス表示)を、スタイルシートで消さないでください。
強度弱視のかたは、音声とフォーカス表示の組み合わせで現在位置を把握しています。フォーカス枠は太く・高コントラストにするほど助けになります。
制作者が晴眼者(目が見えるかた)の場合、デザインとマウス・タッチ操作に重点を置くため、気づかないうちにキーボードでは操作できないページになる傾向があります。クラウドサービスやCMSの部品をそのまま使った場合にも、同じ傾向が見られます。
公開前に、マウスやタッチ画面を使わず、キーボードだけで最初から最後まで操作できるか、ぜひ一度検証してください。
アクセシビリティを高めるための参考例です。
次の3つを試すだけで、大きな問題のほとんどが見つかります。
Webクリエイター向けに、無料でWebページをテストできるPC-Talker Neo Plusのベータ版をご用意しています。
音声で読み上げる情報を音声キャプションウインドウでテキスト表示できるため、スクリーンリーダーの利用経験がないかたでも、読み上げ内容を目で確認しながら検証できます。
ベータサイトよりダウンロードしてお使いください。