JIS X8341-3 5.2g パンくずリストのアクセシビリティ

| コメント(1)
JIS X8341-3 5.2g
閲覧しているページがウェブサイトの構造のどこに位置しているか把握できるように、階層などの構造を示した情報を提供することが望ましい。
これっていわゆる「パンくずリスト」のことを指していると思うのですが、 じゃぁどんな感じでマークアップすればいいの?ってわけで調べてみました。気になる点は3つ。
  1. 矢印となる部分って画像?それとも「>」?
  2. パンくずのIDってどんなになっているんだろう?
  3. そもそもどんな感じで組んでいるんだろう?
  4. 現在位置はどんなマークアップなんだろう?

無作為にサイトを選ぶのもつまらないので、2006年のアックゼロヨンアワード受賞サイトで見てみましょう。

  • グランプリ&最優秀コーポレートサイト&内閣総理大臣賞「みずほ証券
    1. 矢印は「半角スペース>半角スペース」
    2. IDは「topicPathBlock」
    3. div要素#topicPathBlockのなかにp要素で作成しています。
    4. 現在位置部分はパンくず上になく、すぐh1要素で見出しタイトルが出現。
  • 最優秀プロモーションサイト「Johnson'sブランドサイト
    1. 矢印は「 >> 
    2. IDは「Pankz」
    3. div要素#Pankzのなかにspan要素で作成しています。
    4. 現在位置部分は特に何もせず。
  • 最優秀コマースサイト「無印良品 ネットストア
    1. 矢印は「 > 
    2. IDは「storeContentHeader」
    3. div要素#storeContentHeaderのなかにp要素で作成しています。
    4. 現在位置部分は特に何もせず。
  • 最優秀公共サイト&国土交通大臣賞「兵庫県ホームページ
    1. 矢印は「全角>」
    2. IDは「pankuzu」
    3. p要素#pankuzuのなかに作成しています。
    4. 現在位置部分は特に何もせず。
  • 最優秀Flash賞「NTTデータ公式ホームページ
    1. 矢印は「半角スペース>半角スペース」
    2. IDは「topicPath」
    3. div要素#topicPathのなかにp要素で作成しています。
    4. 現在位置部分はem。
  • チャンレンジド賞「横浜市立盲学校Webサイト
    1. 矢印は「全角>」
    2. IDは「topicpass」
    3. p要素#topicpassのなかに作成しています。
    4. 現在位置部分は特に何もしていませんが、「(現在の位置)」と表記。
  • 審査員特別賞「中部大学webサイト
    1. 矢印は「全角>」
    2. IDは「breadcrumb」
    3. div要素#breadcrumbのなかに作成しています。
    4. 現在位置部分は特に何もせず。
  • 総務大臣賞「島根県ホームページ
    1. 矢印は「 >
    2. IDは「topic_path」
    3. div要素#topic_pathのなかに作成しています。
    4. 現在位置部分は特に何もせず。
  • 経済産業大臣賞「COLORs catalog|カラログ
    1. 矢印は「全角の≫をstrong要素で囲む」
    2. IDは「pagenavi」
    3. div要素#pagenaviのなかにulリストで作成しています。
    4. 現在位置部分は特に何もせず。
  • 厚生労働大臣賞「富士通
    1. 矢印は「 >
    2. IDは「location」
    3. div要素#locationのなかにolリストで作成しています。
    4. 現在位置部分は特に何もせず。
  • 環境大臣賞「ファミリーマートホームページ
    1. 矢印は「全角≫」
    2. IDは「topicPath2」
    3. div要素#topicPath2のなかにp要素で作成しています。
    4. 現在位置部分は特に何もせず。
  • 外務大臣賞「浜松市公式Webサイト
    1. 矢印は「半角スペース>半角スペース」
    2. IDは「bList」
    3. div要素#bListのなかに作成しています。
    4. 現在位置部分は特に何もせず。

これらを見てみて、多数決ではなく個人的ベストチョイスをしてみると


  1. 矢印は「 >
  2. IDは「location」の富士通式
  3. div要素#locationのなかにp要素で作成でしょうか。リストは避けたいかも。
  4. 現在位置部分は特に何もしないか、NTTデータのようにemで強調させるか。


みたいな感じになりました。

元同僚せきぐちくんのLike@lunatic「パンくずリストのマークアップ考察」には、
矢印を画像にしてalt属性に「の中の」と入れる、インフォアクシア・植木さん方式もありますし、
CSS HappyLifeさんの「もう、class名やid名で悩まないんだからっ!!」には、
パンくずっぽいののID名が列記されていました。

正解はないのでしょうが、パンくずくらい(といったらパンくずに失礼?)ある程度の
マークアップの方法が示されてもいいのかなぁ・・・と思いました。

コメント(1)

激しく参考になりました。そしてトラックバックありがとうございます。
本当にサイトによって様々ですね~。Web標準がある程度の指針を与えるものとはいえ、細かいところは作る人によってさっぱり違うということを改めて感じました><

プロフィール

林大輔 写真
林 大輔
旅を売るWebデザイナー / ジャム男子
楽天トラベルでWebデザイナーとして働いています。ごくたまに個人でもWebサイト作ってます。趣味ではジャムをつくる自称・ジャム男子。
著書「FireworksレッスンブックCS6対応」「ガレリアCSS

詳しいプロフィールを見る

最新のエントリー