「音声ユーザビリティ視覚化」 で検出されるアクセシビリティ、およびユーザビリティの問題点

aDesigner は音声ブラウザを使ってウェブページを読むユーザーにとってのアクセシビリティ、およびユーザビリティの問題点を検出することができます。検出された問題点は、詳細レポートの個別表示の 「エラー内容」 に表示されます。 ここでは、aDesigner で検出される問題点と、それらへの対処の仕方について述べます。

到達時間

「到達時間」 とは、音声ブラウザを使ってウェブページを読んだ場合に、ページの先頭から各要素まで到達するのにかかる時間のことを意味します。 もしウェブページの情報量が非常に多く、適切なページ内リンクが設定されていない場合、下に行くほど到達時間が長くなり、音声ブラウザユーザーはウェブページの大部分にアクセスするのが困難になります。 aDesigner はウェブページ内の各要素への到達時間を、背景色をグラデーションで表現することによって視覚化します。 許容最大到達時間(初期値は90秒)を超える要素は真っ黒に表示されます。 つまり、これらの要素は、音声ブラウザユーザーにとって非常にアクセスしづらいといことになります。

到達時間の問題に対処するためには、ページ内リンクを適切に設定する必要があります。 また、見出しタグを用いて、ウェブページ全体を適切に構造化することも非常に有用です。

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

情報量の多いウェブページ(全体を読み上げるのに時間がかかるウェブページ)には、適切にページ内リンクを挿入するようにしてください。 aDesigner は、リンク先が存在しないページ内リンクや、読み上げ可能なテキストがない(つまり音声ブラウザで検知できない)ページ内リンクも検出します。 これらのエラーが検出されたら、適切に修正してください。 視覚化ビューでリンク元アイコンを選択すると、対応するリンク先アイコンまでの間に矢印が描画されます。

冗長なテキストの情報

aDesigner は冗長なテキストの情報を検出します。 たとえば、"電話帳" という ALT 属性が与えられたアイコンの後に "電話帳" というテキストが繰り返され、それぞれ同じページにリンクが設定されているような場合、 音声ブラウザは「電話帳電話帳」と同じテキストを2回読み上げます。 これは読み上げ時間を増大させ、ユーザビリティを低下させるとともに、ユーザーを混乱させてしまいます。 このような場合は、アイコンの ALT 属性を空文字 ("") にするのが適切です。

不適切なALT属性

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

テーブルに関連する問題

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

入れ子になったテーブルが使用されていると、音声ブラウザユーザーはウェブページの構造を理解することがますます困難になります。 また、ウェブページ制作者にとっても、ウェブページが音声ブラウザにどのように読み上げられるか予測するのが難しくなります。 レイアウトを整える目的で入れ子になったテーブルを利用することは、アクセシビリティの観点では好ましくありません。

aDesigner は、アクセシビリティ関連タグに色をつけて表示したり、テーブルセルを表示することにより HTML 文書の構造を視覚化します。 視覚化ビューでは、テーブルヘッダーセル(見出しセル)は緑(*)で表示されます(*色は設定パネルで変更可)。 データテーブルには、常にテーブルヘッダーセルを挿入するようにしてください。

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

aDesigner は従来のアクセシビリティ・チェッカーと同様に、アクセシビリティ・ガイドラインへの準拠度をチェックすることができます。 詳細は 「Web アクセシビリティ・ガイドラインへの準拠」 をご参照ください。

関連項目

インデックスに戻る