パンくずリストを音声読み上げ対応に

• 公開日 : 2009年12月13日 (2011年8月13日 更新)
• カテゴリー : アクセシビリティ

パンくずリストとは、Webサイト内のそのページの現在位置を示すナビゲーションです。

上記のようなスタイルで、Webページの上のほうに表示されるのが一般的です（この例でいうと、「ホーム」と「犬」にはリンクが貼られているケースが多く、上位階層に簡単に移動できます）。童話「ヘンゼルとグレーテル」で、森の中で迷わないようにパンくずを少しずつ落としながら歩いたという故事が由来のようです。

ところでこのパンくずリスト、階層関係の表示において、不等号を使うのが一般的ですが、スクリーンリーダーや音声ブラウザといっ支援技術を使って読み上げると、「ホーム、だいなり、いぬ、だいなり、ミニチュアダックスフンド」のようになってしまい、視覚からのインプットが無い場合、意味がスムーズに伝わらない恐れがあります。もっとも、大半のパンくずリストがテキストによる不等号表記（あるいはHTMLエンティティによる記述「>」）で表現されている現状を考えると、恐らく視覚障碍を持つスクリーンリーダーユーザーの多くは理解してと歩み寄ってくれているんだろうなと推測しますが、少しでも改善できないものでしょうか。

というわけで、特に目新しい手法ではありませんが、今回、下記のような対策を施してみました。

当サイトでの細かな工夫点ですが、ホームと第二階層との間は「の中の」で結ぶのは文脈的に不自然なので「の下の」で結び、第三階層がある場合（コラム記事のページ）は、第二階層（カテゴリー）と第三階層（コラム記事のタイトル）との間を「の中にある」で結んでいます。

また、パンくずリストの前後に「現在位置は」と「です。」というテキストを埋め込み、パンくずリスト部分の読み上げがひとつの自然な文（センテンス）になるようにしています（もちろん、これらのテキストは、晴眼者ユーザーにとっては不要なため、CSSを使ってブラウザ画面上に表示されないようにしています）。

これらの工夫を総合すると、たとえばこのページのパンくずリストは、次のように読み上げられます。

ちょっと丁寧すぎ（冗長）でしょうか？でも簡単な工夫で視覚障碍者にとってのユーザビリティが向上するようにも思われますので、試してみた次第です。スクリーンリーダーをお使いの方からのフィードバックなどもいただけると嬉しいです。

この記事を Twitter で共有