水無月ばけらのえび日記

そもそも、パンくずリストは必要なのか

パンくずリストには現在位置を把握させる機能と上の階層に戻る機能がありますが、これがそもそも必要なのかどうか。

• ディレクトリ型の階層構造を持つコンテンツであれば、ある程度有効なのではないか。
• 最近はディレクトリ型でないコンテンツも増えてきている。有効性がないケースもありそう。
• アクセス解析をすると、実際に数パーセントの人は確実にパンくずをクリックしている。それなりに使われているのではないか。
• ここに来ているのはリテラシの高い人だから「あまり使わない」と思うかもしれないが、リテラシが高くない人は使うのではないか。
• 高齢者のユーザーテストをすると、とにかくホームに戻りたがる傾向がある。

「パンくず要らない」という強硬派の意見があるかと思いきや、意外とそうでもなかった印象です。

パンくずリストをどのようにマークアップするべきか

パンくずリストのマークアップについて。

• 富士通のサーバのコンテンツ (primeserver.fujitsu.com)では、JSで左のナビを読んでパンくずを表示する実装を行っている。パンくずのマークアップはol。
• ulはあるがolはちょっと無いのではないか。
• 日本郵政のサイト (www.japanpost.jp)ではdlが使われている。dtには「現在位置」と入っている。
• これはdlの濫用なのではないか。
• 「現在位置」を見出しにすると強すぎる気がするのでdtにしている。
• リストの入れ子を使うケースもある (各階層ごとにulを入れ子にする)
• そもそもリストではないのではないか。自分はpやdivでマークアップしている。
• そもそもコンテンツの内容に入れることが適切なのかどうか。本来はhead要素内に入るような性質のものではないのか。ブラウザが対応していないので仕方なくbodyに入れている、ということかもしれない。

ここは割と持論がばらけたところです。様々なサイトのパンくずを見ていったところ、区切りを画像にしてaltをつけているサイトに遭遇。そして、その話が盛り上がって行くことに……。

「>」を画像にして alt="の中の" とするパンくずリストは是か非か

パンくずリストの区切りには「>」が使用されることが多いですが、それを画像にして alt="の中の" と設定しているケースがあり、この是非が議論になりました。インフォアクシア (www.infoaxia.com)のサイトがそうなっているのですが、代表の植木さんがこの場にいらっしゃっていたため、たいへん素晴らしい盛り上がりを見せることに。

• そういえば昔CSS Nite LP2 (cssnite.jp)で紹介されていた記憶がある。植木さんとは別の誰かが紹介していたような気も。
• 推奨したつもりはない。スクリーンリーダーでパンくずリストが自然に読まれる方法の一つとして紹介。
• いちおうユーザーテストもやっていて、それなりに良い結果が得られている。
• これはスクリーンリーダーのユーザーを甘やかしすぎている感じがする。
• 今ではこれがベストとは思っていない。

植木さんも含め、わりあい批判的な意見が多かったように思います。

私がこのやり方に違和感を覚えるのは、スクリーンリーダーの利用者が、そうでない人よりも多くの情報を得ているという点です。区切りを「の中の」と読むと分かりやすくなるというなら、スクリーンリーダーだけでなく、全ての人に「の中の」を見せれば良いのではないでしょうか。それが鬱陶しいと思われるのであれば、スクリーンリーダーの利用者にとっても鬱陶しいものになっている可能性があります。

※余談ですが、summary属性にもこの手の違和感があります。表のサマリーは、スクリーンリーダーの利用者だけでなく、他の利用者にも役立つものになるでしょう。HTML5ではsummary属性を使わない方法が考えられています (4.9.1.1 Techniques for describing tables (www.w3.org))。