トップページ » WEBJIS ノウハウ » ウェブアクセシビリティ入門　第７号

« ウェブアクセシビリティ入門　第６号 | ウェブアクセシビリティ入門　第８号 »

2006年10月20日

ウェブアクセシビリティ入門　第７号

■どんな方にも判り易いウェブサイトを目指して■

ウェブアクセシビリティ入門　第７号

－ナビゲーションメニュー対策と課題－

　このメルマガでは、具体例を交えながら障害者や高齢者にも読みやすいウェブサイト作りのヒントを毎週お届け致します。

株式会社アメディア

前号の要約

前号では、アクセシビリティ対策が取られていないページのナビゲーションメニューを、音声ブラウザを利用している視覚障害者がどのようにこなして本文にたどり着いているかについてお話させて頂きました。

今回は、第４号から連載して参りましたナビゲーションメニュー対策のまとめとそれぞれの対策の持つ課題を整理します。

ナビゲーションメニュー対策とその課題

多くのサイトには、サイト共通のリンク集がそれぞれのページの上部に配置されています。

これはサイトの目次とも言えるものですが、アクセスしてきた人達をサイト内の適切なページにナビゲートするためのリンク集なので、「ナビゲーションりんく」とか「ナビゲーションメニュー」などと呼びます。

本誌では、これを「ナビゲーションメニュー」と呼んでいます。

さて、このナビゲーションメニュー、音声ブラウザでページ内容を聞いている視覚障害者にとっては、別のページに移動しても必ず最初に聞かされてしまう本文を読む前の壁になっているというところから話がスタートします。

その対応策として、４号と５号に分けて３つの方法を紹介しました。

実は、それぞれのノウハウにやはり長所と短所があります。今回は、そこまで考えて見ます。

１．　ナビゲーションメニューをスキップするリンクの設置

これは、ＷＥＢＪＩＳにも記載されている方法で、ウェブアクセシビリティの分野に精通している人達にとっては標準的なノウハウだと考えられます。

とは言っても、実際にこの方法を採用しているサイトは全体の比率で言えばほんのわずかです。

各ページの先頭に極近い個所に「本文へジャンプ」という内部リンクを設置し、ここをクリックすると、ナビゲーションメニューを飛び越えて本文にいきなり行くようにする方法です。

（例）

このノウハウの長所と短所を以下のようにまとめて見ました。

■長所■

●一般的なページ構成をくずさない。

●　透明なガゾウにリンクを付け、それにALT属性でテキストを付加するという形で、目に見えないようにも設置できる。

この場合、目には見えないけれども音声ではしゃべる状態になります。

■短所■

▽PC-Talkerや95Readerなどのスクリーンリーダー＋ＩＥの組み合わせでジャンプ先を読み上げてくれないことがあります。

実は、このことに私自身も比較的最近気付きました。

でも、これは考えて見るとものすごく大きな短所ですね。

もともとナビゲーションメニューをスキップするために付けてあるリンクなのに、スキップしてくれないというのは、その目的を果たしていないからです。

現象としては、画面上では目的の位置までスクロールしているけれども、音声では別のところを読んでしまうというようなんです（私は目が見えないので、てっきり画面上でも移動していないのかと思ってしまいました）。

でも、もちろん、上で紹介させて頂いたハーモニーさんとＩＢＭさんのページは大丈夫なんですよ。

第５号で紹介させて頂いた衆議院のページではジャンプ先を読み上げてくれません。

ちなみに、音声ブラウザのボイスサーフィンやホームページ・リーダーを使っていれば衆議院のサイトでも大丈夫、デザイナーさんが意図した通りに動作します。また、わずかなテストですが、ＪＡＷＳとＩＥの組み合わせでも大丈夫でした。

このことについて、ウェブアクセシビリティにのめり込んでいる私の友人のデザイナーに教えてもらいました。

リンクを付けた画像が小さすぎるとダメなんですって！

だから、画像ではなくテキストにリンクを付けた場合もダメ！（こちらは私もテスト済みです）

ということで、ＷＥＢｊｉｓではこの方法が推奨されていますが、私個人としては、以下に紹介する２つの方法をむしろお勧めします。

２．　ナビゲーションメニューをページの最後に配置

これは、株式会社アメディアのホームページで採用している方法で、あまりほかには見かけなかったので、少し心細くなっていましたが、

ＡＴ(Assistive Technology" の分野の代表格、こころWeb でも同じ方法を採っていたのに気がつきました。「これはよかった」と胸をなでおろしています。

この方法の長短をまとめると、こんな感じでしょうか。

■長所■

●ナビゲーションメニューをわざわざスキップする必要がない。

■短所■

●一般的なページの作り方とはやや異なる。

ところで、このメルマガを書くためにいろいろと考えをめぐらせているうちに、このノウハウにさらに

「ナビゲーションメニューまでスキップ」

というリンクを設置するとさらに良いことに気がつきました。

アメディアのサイトはおいおいこの「本文をスキップ」するリンクを配置して行こうかなと思っています。

３．　本文を第２または第３フレームに配置して、そのフレーム位置を表示

これは、いろいろなホームページを見ていると、

第１フレーム：ナビゲーションメニュー
第２フレーム：本文

あるいは

第１フレーム：サイト共通のナビゲーションメニュー
第２フレーム：そのページ独自のメニュー
第３フレーム：本文

といったような構成のサイトが案外多いのです。

ならば、第１フレームの先頭に「サイトのメニューはこのフレーム、このページの目次は第２フレーム、本文は第３フレームにあります」などと音声で発声するように記載してくれてあれば、音声ブラウザ利用者は自分で対応が取れます。

ちなみに、本誌でテストの対象としている

ボイスサーフィン
ホームページリーダー
ＰＣ－ＴＡＬＫＥＲで音声化した状態のＩＥ

は、いずれも読み上げ体賞とするフレームを簡単なキー操作で切り替えることができます。

このノウハウの長短は、次のようにまとめられます。

■長所■

●一般的なページ構成をくずさずにアクセシビリティへの配慮ができる。

■短所■

●利用者がフレーム切替という操作を理解している必要がある。

●フレーム未対応のブラウザではアクセスできない（今はほとんどないと言ってよいと思います）。

なお、この手法を用いているサイトの例は見つけられませんでした。

フレームのアクセシビリティについての考察

フレームの使用に関しては、ＷＥＢＪＩＳでは

5.2 構造及び表示スタイル

のf)の項で以下のように記載しています。

f) フレームは，必要以上に用いないことが望ましい。使用するときは，各フレームの役割が明確になるように配慮しなければならない。

参考：音声ブラウザなどの利用者は，視覚的に全体を把握することができないため，各フレームの役割を理解したり，フレームの内容の変化を認識したりすることが難しい場合がある。

参考：キーボードだけで操作するとき，フレームの切り替えが煩雑になる場合もある。

参考：フレームを使用したページは，各フレームの役割及び各フレーム内のデータの変化が分かりにくいために，情報アクセシビリティを損ねる可能性がある。また，音声ブラウザによっては，フレームを別々のページとして認識する場合があり，作成者の意図どおりに利用者が理解できない可能性もある。タイトル又は広告などを表示するためだけにフレームを使用したり，レイアウトのために中身が空白のフレームを作ったりすると，利用者は理解しにくくなる。

ちょっとこの文章だけでは判りにくい点がありますね。ただ、フレームをあまり良いものとは見ていないことは感じ取れますね。

アメディアの「ＷＥＢアクセシビリティガイド」には、フレームについて次のように書かれています。

音声ブラウザの中には、フレームを別々のページとして認識して動作しているものがあります。よって、フレームの利用は必要最小限にしてください。

例えば、フレーム１を読んでいる状態からフレーム２の内容を見たいときには、読み上げ対象のフレームを意図的に切り替えるという操作を行います。この特性から、特に、左のフレームと右のフレームの内容が対応関係になっていて、左を読んでその次に右の対応する箇所を読むといったような作りは、視覚障害者にとってはアクセス困難なページになります。

視覚障害者へのアクセシビリティに配慮するならば、フレームを使用する場合には、一つのフレームの中で内容が簡潔するような構造にすべきです。

少しイメージをつかんでいただけたかと思います。

アメディアのガイドラインでも、かなりフレームには否定的なスタンスが見られますが、今回いろいろと研究して見て、使い方さえ間違えなければ、案外便利だということに気付かされました。

次回予告

次号からは、３回ぐらいのシリーズで、画像と音声読み上げの関係について述べていきたいと思います。

さらに先の予定をお話しますと、その後は、ＷＥＢｊｉｓの

「5. 開発及び制作に関する個別要件」

で取り上げられている項目をおおよそ順番どおりになぞって行きたいと思います。

というのは、読者の方から、内容が音声ユーザーの立場からのみ奥深く突っ込んでいて難しい、もっと初心者向けの解説もして欲しいという声を頂いたからです。

すみません。確かに４号からは音声でホームページを聞いている者のための配慮ばかりに終始していますし、この号も「まとめ」というタイトルなのにかなりマニアックな内容になってしまいました。

後３回ほど、「視覚障害者の主張」を我慢して聞いてください。

その後は最初に知っておくべき基本の説明をなるべく中心に据えて進めて参りますので。

編集後記

このメルマガを発行するに当たって、私自身は一応ＷＥＢｊｉｓも全て読んだし、ほかのかなり詳細に説明してある本も１冊読んだし、また、もう１年前になりますがアメディアの「ＷＥＢアクセシビリティガイド」を作成するときにいろいろと自分なりに考えをめぐらしたので、これまでの蓄積で書いていけば、そんなに負担はかからないだろうと甘く見ていました。

ところが、今回紹介したような、ナビゲーションスキップの問題点に突然突き当たるなど、最初に考えていたよりもずっと重労働になっています。

でも、これも修行ですね。

逆に、本に書かれていないいろいろな課題があるとすれば、このメルマガの独自性が出しやすいということですね。

そう考えてこれからも書きつづけて行きます。