最近コーディングするにあたり、WAI-ARIAを極力使うように個人的に気をつけています。先日更新した[seoplus_inline/]でも、アクセシビリティを意識しながら作りました。
WAI-ARIAを使うにあたり個々のhtmlタグの意味などをあらためて考え直していて、ふと気になったことがあったので備忘録に残しておきます。正解かどうかは分からないので参考程度にどうぞ。
パンくずリストはolタグの方が良いのではないだろうか
サイト内の階層関係を示すパンくずリストは特に決まったルールはないものの慣習的にulタグで作りがちです。
しかしulタグは単なるリスト表示などに使います。リスト項目の順番は関係ありません。一方でolタグは明確に順序が決まっているものに使用します。
ホームページ作成系のサービスやECサイトのテンプレート、WordPressで人気のテーマなどを見ていると、パンくずリストもschemaでマークアップされていることがほとんどなので、ulタグかolタグか、などと神経質になる必要はどこにも無いのですが、タグ自身がもつ本来の意図から考えると、パンくずリストにはolタグの方が適しているのはないだろうかと思った次第です。
パンくずリストとWAI-ARIA
冒頭にWAI-ARIAの話を出したのは導入の意味でしかなかったのですが、それで思い出したので蛇足話を１つ。
パンくずリストにnav使う？使わない？
html5が登場した頃あちこちの解説サイトを見て回ったのですが、「navタグは各ページに１つしか使わない。多くの場合グローバルナビゲーションが該当するだろう」と書いてあったと記憶しています。
しかし実際には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> schemaの構造化データに関しては、microdataよりもjsonが推奨されているので、直接コーディングはあまりしないほうが良いですね。コードも長くなって読みにくいし。
