Webのアクセシビリティを実現するために 実践編

有限会社アイ・クリエイツ
羽川 順子

2009年11月27日

視覚障害者がホームページを閲覧する

私たち人間は、情報の80パーセント以上を視覚から入手していると言われていますが、その視覚を失った視覚障害者がどのようにホームページを閲覧しているのかをご紹介します。

スクリーンリーダー

視覚障害者のPCには、電源を入れてOSを起動した時からその動きを合成音声の音声ガイドで知らせてくれる、「スクリーンリーダー」というソフトウェアを利用しています。これは、OS起動後も画面に表示されているテキスト情報を読み上げたり、PCの動作状況などを逐一音声で知らせてくれます。この「スクリーンリーダー」を使用して、メールの送受信を行ったり、WORD、EXCELやPDFも読み上げています。また、ホームページの閲覧も可能です。

最近は合成音声の技術が進み、かなり自然な人間の肉声に近づいています。余談ですが、視覚障害者は音に敏感なため、合成音声の質にはとてもこだわりのある方が多いです。とても聞きやすくなってきていることもあり、普段から視覚障害者が読み上げさせるスピードはとても速く、合成音声に慣れていない晴眼者には聞き取れないほどの速さです。それでもななめ読みが出来ないため、情報の多い文書を読むにはとても時間がかかります。

チラシや新聞などの印刷物は「墨字」といって、こちらはスキャナーで読み取り、テキスト化したデータをスクリーンリーダーで読み上げて利用していますが、新聞など複雑な段組の場合は簡単ではありません。

音声読み上げブラウザ

前述のスクリーンリーダーとは別に、ホームページの閲覧専用のソフトウェアがあります。これが「音声読み上げブラウザ」または「音声ブラウザ」と言われているものです。こちらは、スクリーンリーダーと違い、ホームページ閲覧用の機能が備わっており、見出しだけを抜き出して読み上げたり、ページ内リンクも操作可能です。

HTMLに記述されている要素によって、合成音声を使い分けて読み上げてくれるため、ページ内の構造や見出しの重要度を知ることが出来ます。

 

スクリーンリーダーと音声ブラウザの実演

スクリーンリーダー: PC-Talker  音声ブラウザ: NetReader   開発元: 高知システム開発

1.サイト全体について

音声で読み上げてホームページを閲覧するために、視覚障害者は、聴覚と記憶を駆使しています。そのためポータルサイトやニュースサイトは別として、1ページの情報が多すぎると、自分が何の情報を探していたのか、どの位置を閲覧しているのかがわからなくなってしまいます。これはPCに慣れていない高齢者などにも当てはまります。そのため、サイト全体を通して、次のような点に配慮し、効率良く閲覧できるようにすることが求められます。

  1. 見出し、段落、リストなどの要素を正しく使い、関連する文法・技術の規格や仕様に従って作成する。ページの構成がわかりやすくなる。
    → 見出し、段落、リストなどの要素を正しく使う
  2. 色や配置などの表現は、できるだけスタイルシートに記述し、文書の構造と見栄えを分ける。コンテンツの内容が整理され、音声ブラウザでもアクセスしやすくなる。
    → 色や配置だけで表現しない
  3. 表組み(TABLE)を使ってレイアウトするときは、音声ブラウザによる読み上げ時の順番に配慮すること。
    → 音声ブラウザの読み上げ順序に配慮する
  4. 1ぺージの情報量は適度に保ち、長くなり過ぎないようにすること。
    長くならざるを得ない場合は、ページ内リンクを利用し目的の情報にたどり着きやすくなるよう配慮すること。
  5. ページのタイトルは適切な名前をつけること。リンクテキストと違うタイトルが付いていると、目的のページが開いたのかどうかが分からなくなる。
  6. できるだけフレーム構造にせず、効率的なナビゲーションを配置すること。メニューの部分がフレームで分かれていると、メニューのファイルとコンテンツ本文の複数のファイルを行ったりきたりしなければならず、PC操作に慣れていない視覚障害者には扱いきれない。

 

2.操作や入力について

サイト全体を通したアクセシビリティを確保したところで、次は個々のコンテンツをアクセシブルにするためのポイントです。

  1. すべての操作は、限られた操作手段に限定せず、ユーザーの閲覧環境によって操作可能にすること。
    視覚障害者はマウスを使わないため、キーボードだけでも操作可能にすること。
  2. 同じドメインのサイト内で別のページに移動する際は、新しいウィンドウを開かないこと。別ウインドウになる場合は、その旨を記載すること。
    → 別ウィンドウを開くということ
  3. ページを自動更新しないこと。
    視覚障害者は音声で読み上げて閲覧しているため、自動更新されるともう一度ページの先頭から読み上げなくてはならず、自動更新の設定時間内で読み上げられる部分しか閲覧できない事態が発生する。
  4. 操作するリンクテキストやボタンは、見やすく操作しやすくすること。 
    → リンクテキストやボタンの例
  5. 各ページ共通のナビゲーションやメニュー群は読み飛ばせるようにすること。
    → 効率の良いナビゲーション
  6. 入力欄には何を入力すべきか分かるように示し、操作しやすくする。
    → 入力欄で気をつけること

 

3.画像について

視覚障害者は画像を見ることができません。基本的に画像にはテキスト情報を付与します。

  1. コンテンツの中で、重要な情報を画像で示している場合は、画像に代替テキストを付与し、何を表しているのかが分かるようにすること。
  2. 画像がリンクになっている場合は、リンク先の内容が予測できるような代替テキストを付与すること。
  3. 意味のある画像に対して、その説明文とともに表示している場合、代替テキスト情報と重ならないように調整すること。
  4. 特に情報を提供するものではなく、ビジュアルイメージ画像として使っている場合は、無意味なテキスト情報を付与すると、コンテンツの流れを邪魔することになるため、代替テキストは付与しないようにすること。背景画に指定することが望ましい。

 

4.プラグインや特定のアプリケーションが必要なページについて

FlashやPDFなどのプラグインが必要なオブジェクトや、特定のアプリケーションのインストールが要求されるページがあった場合、閲覧者にインストールが必要なことを事前に知らせ、安全にインストールできるように情報を提供します。

また、FlashやPDFそのものもアクセシブルな状態で提供することが必要です。FlashやAcrobatなどは、アクセシビリティを確保するための機能が備わっているバージョンのものを使用しましょう。アクセシブルでない情報の場合は、代替手段としてテキスト版やHTML版を別に提供するようにすること。

 

自分でもできるアクセシビリティ診断

W3CやIT企業などから、簡単にサイトをチェックできる様々なツールが提供されています。
まずトップページからアクセシブルにしてみましょう。考え方に慣れてきたら、サイト全体のアクセシビリティを確保していくようにします。

下記のツールをお試し下さい。

オンラインでチェックできます。

The W3C Markup Validation Service
HTMLの文法チェックができます。パスするとパスしたWebページであることを示すバナーがもらえます。
W3C CSS 検証サービス
CSSの文法チェックができます。パスするとパスしたスタイルシートであることを示すバナーがもらえます。
Another HTML-lint gateway
日本で一番有名なHTML文法チェックサイトです。アクセシビリティに配慮するためのチェック機能も入っています。
ウェブアクセシビリティチェックサイトHAREL
NTTデータの提供するアクセシビリティチェックサイトです。2009年10月にグッドデザイン賞(Gマーク)を受賞しています。
Color Contrast Checker
アイ・クリエイツが2001年から提供しているカラーバリアフリーのためのチェックツールです。

インストールして使います。

WebInspector : 富士通
富士通が提供しているウェブサイトのアクセシビリティを診断するソフトウェアです。
ColorSelector : 富士通
富士通が提供している背景色と文字色の見やすさを判定するソフトウェアです。
ColorDoctor : 富士通
富士通が提供しているディスプレイ上の表示内容を、グレースケールや各色覚特性に応じてシミュレート表示するソフトウェアです。
ウェブヘルパーを利用する:みんなのウェブ
総務省が開発した日本語ウェブページのアクセシビリティを点検・修正するためのシステムです。
ColorAccess(色覚アクセシビリティチェックツール)
ウェブページやプレゼンテーション資料の色覚アクセシビリティを簡単にチェックするためのツールです。

今後の動向に注目

2008年12月にWCAG2.0が公開されたことにより、2004年6月に制定された日本のJIS規格(JIS X 8341-3:2004 高齢者・障害者等配慮設計指針−情報通信における機器,ソフトウェア及びサービス−第3部:ウェブコンテンツ。以降WebJIS)も2009年12月に改変される予定です。

現在のWebJISでは、個々のコンテンツに対してアクセシビリティの確保を求めるよう規定しているものですが、WCAG2.0がより概念的な方針を定めた内容になっているため、WebJISも国際規格と整合性を取るように改変されます。

より概念的になっているということに対しては、一つ一つのコンテンツの技術的な手法を示唆するのではなく、取組みから規定するようになっているということが言えます。Webのプロジェクト全体を通した取組みから検討する必要があり、また自己適合宣言をするためには、具体的な実証環境を示すなどのルールが設けられる予定です。

WebJISに準拠するためには、今後の動向に注意していくことが求められます。

アイ・クリエイツ ロゴマーク

©2009 I-Create Corporation.