バリアフリーWebサイトを作成する

視覚障害のある人にとって、インターネットは視野を広げ、自立への扉を開く可能性を秘めています。新しいインターネット閲覧技術を使えば、点字版や音声版を何日も、あるいは何週間も待つことなく、またボランティアによる読み上げサービスに頼ることなく、新聞や雑誌を読むことができます。音楽、食料品、航空券のショッピングも可能です。学習、銀行取引、仕事、あるいは単にインターネットを閲覧することも可能です。

それがインターネットの可能性です。しかし現実には、多くのウェブサイトは視覚障碍者にとって操作が煩雑、あるいは不可能です。バナー広告、複数列のレイアウト、不適切な表現のハイパーリンク、ラベルのないグラフィックなどは、見た目はエレガントなサイトを操作上の悪夢に変えてしまう可能性があります。

インターネットアクセシビリティの課題とその解決策をご紹介します。この記事では、主に重度の視覚障害を持つユーザーのニーズに焦点を当てています。これは、デザインの選択が彼らの体験に最も影響を与えるためです。その他のアクセシビリティに関する課題の概要については、オンラインサイドバー「その他の障害を持つユーザーのためのデザイン」（http://[removed-link]/2000/08/create/access.html）をご覧ください。

意識の高まり

幸いなことに、視覚障害者だけでなく、あらゆる障害を持つ人々にとってのインターネットアクセシビリティ向上の必要性は、議員たちの尽力もあり、大きな注目を集めています。米国政府は最近、1973年リハビリテーション法の改正の一環として、年末までに連邦政府のウェブサイトを障害者が利用できるようにすることを義務付ける規制を可決しました。一方、全米盲人連盟は、AOL（アメリカ・オンライン社）のシステムがアクセシビリティに欠けているとして訴訟を起こしました。

しかし、障害のあるユーザーのニーズに応えることは、単なる善意の活動ではなく、ビジネスとしても大きなメリットがあります。考えてみてください。アメリカ人の約10%が身体障害を抱えており、1998年の連邦政府の調査では、障害を持つ消費者の可処分所得は1,750億ドル以上に上ると結論付けられています。この層にサイトを公開すれば、オーディエンスを拡大できるだけでなく、非常に忠実な顧客を獲得できる可能性もあります。

アクセシビリティ機能を追加することは、今後急増するWeb対応デバイスへの備えにも役立ちます。Palm VIIなどのWeb対応ハンドヘルドコンピュータは既に発売されており、近い将来、携帯電話や車のダッシュボードなど、様々なデバイスからWebサイトを閲覧できるようになるでしょう。これらのデバイスはどれも、今日のWebサイトにあるような派手なグラフィックや複雑なレイアウトを表示するために必要な大型ディスプレイを備えていません。グラフィックなしでもサイトを操作できるようにすることで、目の見える顧客にも視覚障害のある顧客にもメリットをもたらします。

サイトの音

視覚障害のある人はどのようにしてWebにアクセスしているのでしょうか？ほとんどの人はスクリーンリーダーソフトウェアを利用しています。スクリーンリーダーは音声合成を用いて、ウィンドウ、メニュー、その他のインターフェース要素の内容を読み上げます。最も人気のあるスクリーンリーダーは、Henter-Joyce社（800/336-5658、https://www.hj.com ）のWindows版Jaws（795ドル）です。Mac版では、Alva Access Group（510/451-2582、https://www.aagi.com ）のoutSpoken（695ドル）が利用可能です。

スクリーンリーダーは、HTMLタグ、特にハイパーリンク、ウェブフォーム、グラフィックを扱うタグを解釈することで、視覚障害のあるユーザーがサイト内を移動できるよう支援します。例えば、次のHTMLコードをご覧ください。‹a href=”http://www.yoursite.com/index.html”›ホームページへ移動‹/a›

スクリーンリーダーはリンク全体を読み上げる代わりに、「リンク：ホームページへ」とだけ読み上げます。視覚障碍のあるユーザーは、Tabキーを押すことで次のリンクに移動できます。視覚障碍のあるユーザーが、アクセシブルなサイトとそうでないサイトの両方でどのような体験をするかについては、サイドバー「サーフィンの音」をご覧ください。

アクセシビリティを向上させる簡単な方法

サイトをアクセシブルにするということは、派手なグラフィック、ロールオーバー、マルチメディア、Javaアプレットなど、今日のサイトを華やかに（そして時には乱雑に）するあらゆる装飾を排除することを意味しますか？ 決してそうではありません。実際、目が見えるユーザーは、アクセシビリティ対策のほとんどに気付くことさえありません。

以下のヒントは、既存のサイトでも簡単に実装でき、多くのヒントは、目の見えるユーザーの閲覧エクスペリエンスも向上させます。

グラフィックについて説明しましょう。今日のウェブサイトではグラフィックが主流であることは周知の事実です。ボタン、ロゴ、アートワークなど、1ページに12枚以上の画像が含まれることもあり、その多くはナビゲーションに不可欠です。スクリーンリーダーはデフォルトで、これらのグラフィックを見つけるとファイル名を読み上げますが、多くの場合、Top2_rev.gifのような、役に立たない、あるいは全く理解できない文字列になります。

スクリーンリーダーにこれらのファイル名を無視させ、グラフィックの重要なコンテキストを提供するように指示できます。‹image›タグのalt属性を使用して、画像の簡単な説明を記述します。例えば、企業ロゴの場合は「XYZ Corporation Logo」、グラフィックボタンの場合は「Link to the home page」のように記述します。多くのデザイナーのように、レイアウトのスペースをコントロールするために透明なGIF画像を使用する場合は、alt属性の説明には空白スペースを使用してください。多くのスクリーンリーダーは、これらの説明を完全に読み飛ばします。

簡潔で意味のある代替テキストは、追加できる最も重要なアクセシビリティ機能の一つです。また、ブラウザで画像をスキップするように設定して高速に閲覧する多くの視覚障害者にとって、サイトの品質向上にもつながります。

イメージマップにラベルを付ける イメージマップは、1つの画像を複数の異なるリンクに分割する一般的なナビゲーションデバイスです。イメージマップには2種類あります。サーバーサイドマップは、Webサーバー上で実行されるソフトウェアを利用してユーザーがクリックした場所を解釈します。クライアントサイドマップは、HTMLタグを使用して、マップ上のクリック可能なホットスポットをWebページ内に直接示します。一部のスクリーンリーダーは、クライアントサイドマップしか解釈できません。

クライアントサイドマップを提供するだけでなく、クリック可能な領域（特にナビゲーションに使用される領域）ごとに、alt属性を使用して分かりやすいテキスト説明を作成することが不可欠です。Yahoo、Amazon、The New York Times on the Webなど、多くのサイトがこのステップを省略しており、視覚障害のあるユーザーにとってマップがほとんど役に立たない状態になっています。

意味のあるリンクを書く 一部のスクリーンリーダーは、ページ上のすべてのテキストを読み上げる前にハイパーリンクだけを読み上げます。これにより、ユーザーはすべての単語を聞かずに別の場所に移動できます。しかし、ハイパーリンクによくある「ここをクリック」を使用すると、ユーザーには「ここをクリック、ここをクリック、ここをクリック」としか聞こえません。解決策は、「製品について」のように、文脈を示す意味のあるリンクを書くことです。テストとして、ページのハイパーリンクを音声で読み上げてみましょう。サイトはナビゲートできますか？

テキストベースのナビゲーションを提供する ナビゲーションにイメージマップやグラフィックを使用する場合は、各Webページの上部または下部にリンクの列を配置するなど、テキストベースのナビゲーションスキームも提供します。リンク間に縦線（|）を配置して区別します。これにより、一部のスクリーンリーダーがリンクを識別しやすくなります。

テキストベースのサイト マップも優れたアイデアであり、これにより、目の見えるユーザーも目の見えないユーザーも、関心のあるセクションにすばやくジャンプできるようになります。

フォームへのアクセス

ほぼすべてのオンラインショッピングサイトで必須となっているウェブフォームは、入力情報用のテキストボックス、オプションを選択するためのポップアップメニュー、フォームの内容を送信するための「送信」ボタンなど、追加のユーザーインターフェース要素に依存しているため、独自のアクセシビリティ問題を抱えています。これらの要素の作成方法と配置は、スクリーンリーダーによる解釈精度に大きく影響します。

フォーム要素に適切なラベルを付ける 視覚障害のあるユーザーがフォームを操作しやすくするために、すべてのフォーム要素にテキストラベルを付ける必要があります。例えば、ユーザーの住所を入力するための4つの空欄をそのまま残すのではなく、各ボックスに住所のどの部分を入力すればよいかを明確に示しましょう。また、ラベルは必ず、説明対象の要素の真上または真左に配置しましょう。こうすることで、スクリーンリーダーは要素に関する追加情報（例えば「編集：住所」など）を読み上げることができます。

フォームの送信ボタンに画像を使用する場合は、必ず代替テキストを指定してください。そうしないと、スクリーンリーダーは画像を「ボタン」と読み上げてしまいます。また、ページに複数のボタンがある場合、視覚障碍のあるユーザーはどのボタンが何なのか分からなくなってしまいます。

最も可能性の高い選択肢を先頭に配置する ナビゲーション用や国などの値を選択するためのポップアップメニューを作成する場合は、階層構造を作成することを検討してください。最も可能性の高い選択肢をデフォルト値とし、その下に可能性の高い順に他の選択肢を配置します。これにより、ユーザーが目的の選択肢にたどり着くまでにスクロールする回数を減らすことができます。

サイトのデザイン

新しいサイトを立ち上げる際、または既存のサイトを再設計する際には、以下のテクニックを活用するとよいでしょう。この段階でのデザインの選択は、サイトのアクセシビリティ、そしてモバイル端末など、他の種類のブラウジングデバイスへの適応性に大きな影響を与えます。

表をシンプルにする 多くのデザイナーは、Webページ上のアイテムを配置するためにHTMLの表を使用します。その結果、テキストが画面上で論理的に読み取られない場合があります。Jawsは表を適切に分解できるほど賢いですが、ほとんどのスクリーンリーダーはそうではなく、意味不明な結果を返します。

レイアウトに表を使用する場合（そして、表はブラウザとの互換性が最も高いレイアウト手法であることは事実です）、表のネストは避けてください。また、サイト上の最も重要なページについては、表形式ではないバージョンを提供することも検討してください。シンプルなレイアウトは、誰にとってもサイトの読み込み速度を向上させます。

Flashに頼らないでください。視覚障碍のあるユーザーは、Flashムービーなどのマルチメディア要素にアクセスできません。そのため、ナビゲーションやコンテンツの表示にFlashを使用している場合は、サイトのアクセシビリティを高めるために、Flash非対応バージョンを提供する必要があります。

サイトをテストする

視覚障害のない方は、アクセシビリティの問題点を正確に特定するのが難しい場合があります。JawsとoutSpokenの無料試用版は、それぞれのウェブサイトから入手できます。試用版はすべての機能を備えていますが、20～40分しか使用できず、再起動が必要になります。最も人気のあるスクリーンリーダーであるJawsは、Connectix（800/950-5880、https://www.connectix.com）のVirtual PC 3.0（179ドル）を使用してMacで試すことができます。

サイトにアクセシビリティ機能を追加した場合は、Usenetニュースグループalt.comp.blind-usersにお知らせを投稿してください。メンバーにサイトを訪問してフィードバックを提供するよう呼びかけましょう。また、https://www.cast.org/bobbyにWebサイトを送信することもできます。サイトはテストされ、アクセシビリティに関するレポートが送信されます。

より多くの店舗やサービスがウェブに移行するにつれて、アクセシビリティはますます重要な問題となります。今少しの準備と事前の検討があれば、後々深刻な問題に悩まされることを防ぎ、貴重な新規顧客を獲得できる可能性があります。

1984年からMacworldの寄稿編集者を務めるジム・ハイド氏（https://www.heidsite.com）は、Web開発のあらゆる側面について執筆・講演を行っています。彼は、WGBH National Center for Accessible Mediaのトム・ウォドコウスキー氏に深い洞察をいただいたことに感謝しています。

2000年8月号 109ページ

サーフィンの音

Jawsなどのスクリーンリーダーを通してウェブサイトの音声を聞くことは、ウェブサイトのアクセシビリティの背後にある課題や問題を理解する最良の方法です。以下は、ニューヨーク・タイムズ（https://www.nytimes.com）と公共放送大手WGBH（https://www.wgbh.org）のアクセス数の多いウェブサイトを訪問した際に聞こえる音声の例です。

タイムズ紙の苦難

ウェブ版のニューヨーク・タイムズは、すぐに出だしからまずい展開を見せます。左上隅の広告画像（A）には代替テキストがないため、Jawsはリンクを読み上げます。サイトはほとんどの広告をデータベースから動的に提供しているため、これらのリンクは理解不能です。この場合、Jawsの閲覧体験は次のように始まります。「このページには131個のリンクがあります。リンク画像は、一点鎖線と一点鎖線とGIFの文字、6696d6です。…」この数字の意味不明な表示は、その後数秒間続きます。画像タグに alt="広告" を追加するだけで、この煩わしさから解放されたはずです。

ここから状況はほんの少ししか改善されません。サイトのデザイナーは左側のイメージマップ（B）に代替テキストを指定していないため、Jawsはリンクを次のように読み上げます。「イメージマップリンク スラッシュインデックス。イメージマップリンク フロント スラッシュインデックス。イメージマップリンク デイ スラッシュワールド。イメージマップリンク デイ スラッシュナショナル」。そして、これが延々と続きます。

最後に、主要なトップページ記事（C）へのリンクは、単に「記事へ移動」とだけ書かれています。視覚障碍のあるユーザーは、リンクからリンクへと移動する際に、どのリンクがどの記事を指しているかわかりません。

スムーズトーカー

ボストンの WGBH の Web サイトは、その目的を的確に果たしています。WGBH が National Center for Accessible Media の本部であることを考えると、驚くことではありません。

Jawsユーザーが最初に聞くのは「このページには39個のリンクがあります」というメッセージです。これは、The New York Times on the Webの131個のリンクに比べると、それほど圧倒されるものではありません。そこから「リンク：Dの縦棒。リンク：テキスト版とアクセス方法。グラフィック：今週のニュース。」（alt属性のおかげで、Jawsはファイル名全体を読み上げません。）「リンク：サイトマップ…」というメッセージが聞こえてきます。

ページ最上部のテキストリンク（A）をクリックすると、視覚障碍のあるユーザーがサイトのテキスト版に素早くアクセスし、サイトの構造やアクセシビリティ機能に関する説明を入手できます。「d」リンク（B）をクリックすると、ホームページのグラフィックの説明（グラフィックの数や外観など）が掲載されたページに移動し、よりインクルーシブなサイトとなっています。