水無月ばけらのえび日記

bakera.jp > 水無月ばけらのえび日記 > 第1回アクセシビリティBAR~初夏のパンくず祭

第1回アクセシビリティBAR~初夏のパンくず祭

2011年5月31日(火曜日)

第1回アクセシビリティBAR~初夏のパンくず祭

公開: 2011年6月5日17時55分頃

以前からやろうといっていた「パンくず祭」、ついに実現!

参加者はウェブアクセシビリティ基盤委員会ワーキンググループ2 (waic.jp)のメンバー7人とを中心に、3人を加えた合計10人。そういう構成だったこともあり、ちょっと内輪ネタが多かったような感じもなきにしもあらずですが、全体としてはとても面白い話ができたと思います。

議論の中心になったのは以下のような点でしょうか。

そもそも結論を出そうとして議論していたわけではありませんので、結論は特に出ていませんが、出た議論の中で印象に残ったものを書いておきます。実際の発言とは違う可能性があります。

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

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

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

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

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

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

  • 富士通のサーバのコンテンツ (primeserver.fujitsu.com)では、JSで左のナビを読んでパンくずを表示する実装を行っている。パンくずのマークアップはol
  • ulはあるがolはちょっと無いのではないか。
  • 日本郵政のサイト (www.japanpost.jp)ではdlが使われている。dtには「現在位置」と入っている。
  • これはdlの濫用なのではないか。
  • 「現在位置」を見出しにすると強すぎる気がするのでdtにしている。
  • リストの入れ子を使うケースもある (各階層ごとにulを入れ子にする)
  • そもそもリストではないのではないか。自分はpdivでマークアップしている。
  • そもそもコンテンツの内容に入れることが適切なのかどうか。本来は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))。

とまあ、そんなこんなで非常に有意義なお話ができました。

全体を通して思ったのは、アクセシビリティに対するアプローチの仕方がいくつもあるということ、そのアプローチの仕方は大きく2つに分けられるのではないか、ということ。その辺りはまた別の機会に書くかもしれません。

関連する話題: Web / アクセシビリティ / アクセシビリティBAR

人気のページ

最近の日記

関わった本など

デザイニングWebアクセシビリティ - アクセシブルな設計やコンテンツ制作のアプローチコーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション体系的に学ぶ 安全なWebアプリケーションの作り方 脆弱性が生まれる原理と対策の実践ウェブの仕事力が上がる標準ガイドブック 5 WebプログラミングWeb Site Expert #13Dreamweaver プロフェッショナル・スタイル [CS3対応] (Style for professional)友井町バスターズ (富士見ファンタジア文庫)

その他サイト