パンくずリストのWebアクセシビリティについて

パラリンピックでは、障がいを持たれた方々がハンディキャップを克服するため車椅子や義足などの介助器具を自らの体の一部として使いこなされている事や、目の不自由な方が鈴の音を頼りに敏感に、正確に反応されている様子を見られ、多くの方々が感動されていたのではないかと思います。

さて、わたしは、遠視に加え、乱視があるため30代前半から老眼が始まり、今では、新聞の見出し文字でも2重、3重に見えてしまい、老眼鏡で補正しないと何も読めなくなっています。車を運転する際も、眼鏡の補正が無いと、メーター類の文字が見えない状況です。

わたしとWebページのアクセシビリティ

インターネット接続が始まり、ワールド・ワイド・ウェッブ（WWW）により情報共有が広まり始めたころからこの世界にドップリと浸かってきたわたしにとって、Webページのアクセシビリティ化の波は2004年のJIS（JIS X8341-3）交付に向けた事前準備の頃からです。

テーブルレイアウトで１pixelたりともズレたらアカン！　というページデザインから、少々ズレてもいいやん。って考え方に変え、CSSによるレイアウトへ移行できた事や、調査と称し目の不自由な方のパソコンや、Webページの使い方を実際に見せていただき、ご意見などをお伺いできた事が始まりです。

その頃、会社のWebページはFLASHコンテンツ一辺倒。カッコよくコンテンツを動かすことを追求していたと思いますが、わたしの担当していたページは、読み上げブラウザで利用しやすくなるよう、様々な補助テキストを埋め込んでいました。（FLASHコンテンツも作っていましたょ。）(^^ゞ

で、チェック業者さんにお願いし、実際に目の不自由な方に評価をお願いすると、「なんやコレ？　ナンかものすごいお節介なものがたくさん入っていて、ウザいな！！」「何で、ページの先頭に、メニューや、本文や、参考情報へのリンクがあるの？　こんなの他に無いから、かえって使いにくいわ。邪魔や！」と言われ......。

それ以降、Webページ内にお節介なテキストの埋め込みを止め、Web標準として適正なコーディングとなるようなページづくりをしてきましたが、今年3月にJIS X8341-3が改訂された事や、世の中の障がい者に対する意識の変化が感じられたため、今回、「パンくずリスト」への補助テキストの埋め込みをおこなう事にしました。

（前置きが長かった......　^^　）

パンくずリストの意味

Webページに表示されている「パンくずリスト」とは

利用者がそのリストを見ることで、サイト内のどの位置にあるページなのかが視覚的に判るよう、そのページの上位階層となるページを順に記載したリスト。

なので、パンくずリストは、サイトのトップページから［ > ］（矢印）で区切られ、表示しているページの上位カテゴリが階層表示されています。
これは、SEO的にも意味がある（あった）ため、通販サイトなどの商品ページのパンくずリストは、トップからそのページに至る複数のリストが表示されている場合があります。

わたしは、この「視覚的に」という部分がポイントだと思っていて、［ > ］で区切られていても、この文字を見ることができない方にこのリストの意味を認識していただけるのだろうか？

実際に、パンくずリストの部分を音声で読み上げると、『ホーム 小なり（>）風景写真 小なり（>）......』と読み上げられるはずです。

そこで、パンくずリストを聴覚的も理解でき、意味のある内容にすべきではないかということで、過去にトライし、嫌われた手法をこのサイトのパンくずリストに復活させてみました。

聴覚的にも意味を持たせたパンくずリスト

要は、パンくずリストをひとつの文章としてWebサイトのどの位置なのかが認識できるような内容にすればいいはず。そうすれば、パンくずリストを読み上げられることで、そのページの位置が判断できるようになります。

以下は、通常表示と、テキストブラウザで表示した画面コピーになります。
視覚に障がいのある方が利用されている音声読み上げブラウザでは、テキストブラウザで表示されている内容をページの上部から下部に向け順に読み上げられるようになっています。

※テキストブラウザは、GoogleChromeの拡張機能の「SloppyTextBrowser」を使用してます。

このように、画像が表示できない環境では、パンくずリストが、「表示ページは、定八.comの　ホーム の中の 風景写真 の中の......。」という文章に置き換わるようなコーディングを行っています。

付加テキストの埋め込み方法は、1×1pixelの透過GIF画像（sp.gif）と、画像化した［ > ］（icon-arrow-s-l.gif）を利用し、それぞれの画像に対するalt属性を工夫することで対応しています。

他に、パンくずリストは、ページ階層を表しているのでol要素を利用したリストに入れる事も考えたんですが、p要素として、説明を加えた文章として構成する方が判りやすいのではないかと思ったので、このような構成にしています。

課題としては、リンク読み上げを使われると、a要素のテキストしか読み上げられないので、補助テキストが無視される事です。
しかし、リンクテキストにはリンクテキストとしての本来の機能があるため、a要素に対し、リンク以外のパンくずとしての説明を加えると、a要素が異なった意味になってしまう可能性があるため、視覚に障がいのある方々への補助機能として有効に機能してくれる事に期待しています。

---

今回、このサイトで行ったアクセシビリティに関する内容について紹介させていただきました。アクセス数そのものが少なく、到底、視覚に障がいをお持ちの方が利用されるとは思えないこのサイト。
Webページの制作を生業にさせていただいているので、ちょっとでもお役に立てれば幸いです。