Webサイトのナビゲーションで、現在のページをWAI-ARIAでマークアップするには、何を使えばよいでしょうか？aria-current=”page”が適切です。
aria-selectedではなくaria-current
ページのナビゲーションで、現在のページのリンクにaria-selectedを設定してしまう誤りがあります。
正しくは、aria-current=”page”を使います。
例えば「商品情報｜企業情報｜お問合せ」というナビゲーションがあった場合、現在「企業情報」のページが開かれている場合、下記のようなコードになります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<nav> <ul> <li> <a href="product.html">商品情報</a> </li> <li> <a href="about.html" aria-current="page">企業情報</a> </li> <li> <a href="contact.html">お問合せ</a> </li> </ul> </nav> |
WAI-ARIAの解説はMDNが分かりやすい
W3CのWAI-ARIA仕様書より、Mozillaの運営するMDN Web Docsの方が、aria-currentの解説は分かりやすかったです。
WAI-ARIAで迷ったときは、MDNも参考にすると良いかもしれません。