【備忘録】パンくずリストはolでつくる

最近コーディングするにあたり、WAI-ARIAを極力使うように個人的に気をつけています。先日更新したカラーミーSEO+テンプレートでも、WAI-ARIAをいくつか書き足しておきました。

WAI-ARIAを使うにあたり個々のhtmlタグの意味などをあらためて考え直していて、ふと気になったことがあったので備忘録に残しておきます。正解かどうかは分からないので参考程度にどうぞ。

パンくずリストはolタグの方が良いのではないだろうか

サイト内の階層関係を示すパンくずリストは特に決まったルールはないものの慣習的にulタグで作りがちです。

しかしulタグは単なるリスト表示などに使います。リスト項目の順番は関係ありません。一方でolタグは明確に順序が決まっているものに使用します。

ホームページ作成系のサービスやECサイトのテンプレート、WordPressで人気のテーマなどを見ていると、パンくずリストもschemaでマークアップされていることがほとんどなので、ulタグかolタグか、などと神経質になる必要はどこにも無いのですが、タグ自身がもつ本来の意図から考えると、パンくずリストにはolタグの方が適しているのはないだろうかと思った次第です。

パンくずリストとWAI-ARIA

冒頭にWAI-ARIAの話を出したのは導入の意味でしかなかったのですが、それで思い出したので蛇足話を1つ。

パンくずリストにnav使う?使わない?

html5が登場した頃あちこちの解説サイトを見て回ったのですが、「navタグは各ページに1つしか使わない。多くの場合グローバルナビゲーションが該当するだろう」と書いてあったと記憶しています。

しかし実際にはnavはページ内で複数使うことが出来ます

「外部リンクを含むナビゲーション全てにnavを使う必要はない」らしいので、私はグローバルナビとパンくずはnavタグで囲むようにしています。

role="navigation"の位置

WAI-ARIAのロール分類を隈なくみても、パンくずを表すroleは無さそうなのでnavigationが最善だと思われます。

パンくずだけでなく、グローバルナビも同じくnavigationロールですが、ol(ul)タグにrole="navigation" をセットしているサイトを見つけることがあります。

ですが、mozillaのデベロッパーサイトなどでも、ulタグを囲む親要素にnavigationロールをセットしており、ul(ol)タグそのものにつけるのは誤りであると思われます。

navは自動的にnavigation属性を持つので role="navigation"をセットする必要はなく、仕様書でもできるだけnavを使うことを推奨しています。

そういうわけで、最終的に自分の中で落ち着いたパンくずはこんな感じ。

<nav aria-label="パンくず">
 <ol>
  <li><a href="/"> ... </a></li>
  <li><a href="xxx"> .. </a></li>
 </ol>
</nav>

もし、schemaも直接コーディングするとなると、途端に長くなってしまう。

<nav aria-label="パンくず">
 <ol itemscope itemtype="https://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="/" itemprop="item"><span itemprop="name">...</span></a><meta itemprop="position" content="1"></li>
 <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem"><a href="xxx" itemprop="item"><span itemprop="name">..</span></a><meta itemprop="position" content="2"></li>
 </ol>
</nav>

広告

2020年6月27日HTML/CSSaria-label,role,wai-aria,構造化データ

Posted by ミフネWEB