Webサイトのナビゲーションは、現在のページをaria-current=”page”でマークアップすることが適切でした。ただし、パンくずリストについては、現在のページをaria-current=”location”とした方が良いようです。
aria-currentの”page”と”location”の違い
MDN Web Docsの解説を確認します。
aria-current=”page”
Represents the current page within a set of pages.
一連のページ内の現在のページを表します。
aria-current=”location”
Represents the current location, for example the current page in a breadcrumbs hierarchy.
パンくずリスト（ブレッドクラム階層）の現在のページなど、現在の場所を表します。
上記の説明を見ると、ページナビゲーションでは「aria-current=”page”」。パンくずで「aria-current=”location”」となります。
どちらも現在のページであることは変わりないので、使い分けが必要なのか疑問です・・・。
パンくずのサンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<nav> <ol> <li> <a href="/index.html">ホーム</a> </li> <li> <a href="/about/index.html">企業情報</a> </li> <li> <a href="/about/contact/index.html" aria-current="location">お問合せ</a> </li> </ol> </nav> |
パンくずの見た目に関わる「＞」や文字の色はCSSで設定します。
リストのマークアップは、階層の順番があることから、ulよりolの方が望ましいようです。
参考ページ：Button Contrast Checker