WCAG Techniques でパンくずナビの挿入位置のベストプラクティスが明言

投稿

先日のパンくずナビのマークアップ論点列挙の記事でも少し触れたとおり、WCAG Techniques でパンくずナビの挿入位置のベストプラクティスが明言されることとなりました。

  • 本記事の投稿時点（10月16日11:30）で WCAG Techniques G65 のページはまだ更新されていませんが、PR はマージされたのでじきに反映されるでしょう。とりあえずはプレビューページ(deploy-preview-4545--wcag2.netlify.app)で確認可能です。

今回追加されたのは以下の文章です。

Placing the breadcrumb high on the page, typically after the header, is a best practice and helps users quickly understand their location within the site.

G65: Providing a breadcrumb trail(W3C)

というわけでパンくずナビはページの上部、ヘッダーの直後に配置することがベストプラクティスになりました。ただし About WCAG Techniques(W3C) にもあるとおり WCAG Techniques はあくまで参考情報であり、WCAG 2 への適合判断に直接影響するわけではありません。

従来、パンくずナビをどのようにマークアップすべきかの議論が盛り上がったことはあれど、挿入位置に関する議論は聞いたことがありません。ARIA Authoring Practices Guide (APG) にもパンくずナビの事例(W3C)はあるのですが、挿入位置への言及はされていません。個人的には「それってアクセシビリティなの?」という思いもあり、WCAG の関連文書で明言されたことは意外でした。それを言うなら「サイトロゴは左上にあるべき」とかも言及する必要がありそうな🤔

ところでパンくずが今回定められたベストプラクティスとは逆にコンテンツエリアの下にある事例としては Apple のサイトが昔から有名です。例えば MacBook Pro のページ(www.apple.com) を見ると、あまり目立たないものの長大な脚注の下にパンくずがあるのが分かります。

サムネイル画像
MacBook Pro のページ下部にあるパンくずナビオリジナル画像
  • 余談ですが Apple サイトのパンくずはマークアップもあまり見かけない構造であり、ホームへのリンク（Apple ロゴ）は単体の <a> 要素で、それと並列に2階層目以降のリンクが <ol> 要素で構造化されているのです。RDFa による構造化データが設定されているくらいですし、なにより Apple のことですから何かしらの意図があるはずですが、理由は気になりますね。

また日本の文化庁のようにコンテンツの上下2か所にある例（例えば文化庁の紹介(www.bunka.go.jp)）も稀に見られます。こういうのはどう判断されるのでしょうかね。最低限ページ上部にあれば、他の場所に複製するのは構わないのかな?