くまだどうも、くまだです。
WAI-ARIAのaria-currentについてのメモ。
aria-current属性について
aria-current属性は「現在の項目」を意味し、スクリーンリーダーを利用するユーザーに対して「現在表示されているページ」を示すことができます。
<nav>
<ul>
<li><a href="">Top</a></li>
<li><a href="" aria-current="page">About</a></li>
<li><a href="">Service</a></li>
</ul>
</nav>aria-current=”page”を指定するとその要素は、「現在のページ、リンク、About」と読み上げられます。
aria-currentはパンくずリストにも使えます。
<nav>
<ol itemscope="itemscope" itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem">
<a href="#" itemprop="item">
<span itemprop="name">ホーム</span>
</a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem">
<a href="#" itemprop="item">
<span itemprop="name">下層1</span>
</a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope="itemscope" itemtype="http://schema.org/ListItem">
<a href="#" itemprop="item" aria-current="page">
<span itemprop="name">下層2</span>
</a>
<meta itemprop="position" content="3" />
</li>
</ol>
</nav>なお、itemprop~などの記述は以下のサイトを参考にしています。
ここまで読んでくださりありがとうございました。