二つの障害視覚化

aDesigner は、視覚障害者の方にとってのアクセシビリティやユーザビリティの 「チェッカー」 であるとともに、視覚障害の 「シミュレーター」 という面も持っています。 aDesigner は、シミュレートやチェックを行う対象の視覚障害を二つに分類し、それぞれに対応する障害モードを持っています。 音声ユーザビリティ視覚化は、視覚を使わず音声ブラウザでウェブページにアクセスするユーザーが対象です。 音声ブラウザ利用時のウェブページのユーザビリティを視覚化してウェブページ制作者に提示するとともに、音声ブラウザ利用者にとってのアクセシビリティやユーザビリティ、およびアクセシビリティ・ガイドラインへの準拠度をチェックします。 ロービジョンシミュレーションは、視覚を使うユーザーが対象で、弱視、色覚異常、白内障(水晶体の光透過率低下)、およびこれらの組み合わせをシミュレートできます。 また、設定されたユーザーにとってのアクセシビリティやユーザビリティの問題点をチェックします。

音声ユーザビリティタブ

aDesigner の音声ユーザビリティタブは、次の3つの機能を持っています。「音声ユーザビリティの視覚化」、「アクセシビリティとユーザビリティのチェック」、「アクセシビリティ・ガイドラインへの準拠度のチェック」 です。 視覚化の詳細は 「設定パネル(Blind 設定)」 で設定することができます。

音声ユーザビリティの視覚化

ウェブページ内の各要素への到達時間

音声ブラウザによるウェブページの読み上げは、本質的に時間のかかる作業です。 aDesigner の音声視覚化では、ウェブページの先頭から各要素に到達するまでにかかる時間(到達時間 と表現します)を視覚化します。 到達時間は各要素の背景色によって表現されます。 到達時間が短い要素の背景色は明るく表示され、到達時間が長くなるにつれて背景色は暗く表現されます。 許容最大到達時間(初期値90秒)を超える要素は、一律に真っ黒な背景色となります。 このような表現により、ウェブページ制作者は、自分のウェブページ内で到達するのに時間がかかる場所をひと目で把握することが可能になります。

アクセシビリティ関連タグ

音声ブラウザは、HTML のいくつかのタグをナビゲーションの目印として利用することができます。 aDesigner は以下の4種類のタグを認識し、色をつけて表示します。

テーブル構造

<TABLE>タグは表(データテーブル)を作るのにも、レイアウトを整える目的(レイアウトテーブル)にも利用されています。 いずれの場合にも、情報をテーブルから 「視覚的・直観的に獲得する順序」 と、音声ブラウザによる 「読み上げ順序」 が異なるケースが多く、テーブルはユーザビリティの問題を引き起こしやすいと言えます。 aDesigner はテーブルセルを視覚化し、ウェブページ制作者がテーブル構造を把握するのを助けます。

音声ブラウザ出力テキスト

aDesigner は音声ブラウザからの出力テキスト(実際に読み上げられるはずのテキスト)を表示することができます。 この機能は、ウェブページの2次元の視覚的な表現と1次元の音声による表現の違いを体験するために使うことができます。 たとえば、ウェブページの中央部分に重要な内容を配置した場合、そこに到達するまでに、その上方や左方に存在するメニュー等をどれだけ読まなければならないかを目で見て確認することができます。

アクセシビリティとユーザビリティのチェック

ページ内リンク

音声ブラウザによるナビゲーションを容易にするために、ページ内リンクは非常に強力な武器になります。 aDesigner は "本文へジャンプ" リンクの有無を調べます。 このリンクが挿入されていれば、音声ブラウザユーザはウェブページの先頭からメインの部分(本文)にすぐに移動することができるようになります。

また、aDesigner は、リンク先が存在しないページ内リンクや、読み上げ可能なテキストがない(つまり音声ブラウザで検知できない)ページ内リンクも検出します。

不適切な ALT 属性

aDesigner は、画像の不適切な ALT 属性(代替テキスト)を検出します。 たとえば、スペーサー画像(レイアウトを整える目的で用いられる空白の画像)に "spacer" という ALT 属性を与えることは不適切です。 これは、スペーサー画像の存在がわかっても、音声ブラウザユーザーにとっては意味がなく、"spacer" と読み上げても単にユーザーを混乱させる効果しかないからです。

冗長なテキストの情報

aDesigner は冗長なテキストの情報を検出します。 たとえば、"電話帳" という ALT 属性が与えられたアイコンの後に "電話帳" というテキストが繰り返され、それぞれ同じページにリンクが設定されているような場合です。

文書構造

上述のように、アクセシビリティ関連タグに色をつけて表示したり、テーブルセルを表示したりすることにより、aDesigner は HTML 文書の構造を視覚化します。 さらに、aDesigner は入れ子になったテーブルや、見出しタグの有無を検出します。

アクセシビリティ・ガイドラインへの準拠度のチェック

aDesigner は、従来のアクセシビリティ・チェッカーと同様に、ウェブページのアクセシビリティ・ガイドラインへの準拠度もチェックします。 詳細についてはWeb アクセシビリティ・ガイドラインへの準拠をご覧ください。

ロービジョンタブ

aDesigner のロービジョンシミュレーションタブは、「ロービジョンシミュレーション」 と 「アクセシビリティとユーザビリティのチェック」 の2つの機能を持っています。

ロービジョンシミュレーション

aDesigner のロービジョンシミュレーションは、弱視、色覚異常、白内障(水晶体の光透過率低下)、およびそれらの組み合わせのシミュレーションを行うことができます。

アクセシビリティとユーザビリティのチェック

aDesigner のロービジョンシミュレーション時には、以下の4種類のチェックを行います。

どのような症状(障害)についてシミュレーションを行うかは、「設定パネル(Low Vision 設定)」 で指定することができます。

関連項目

インデックスに戻る