デモページはこちら

ナビゲーションメニューにWAI-ARIAのaria-current属性で現在位置を指定します。jQueryでページのURLを判別し、対象のaタグに自動的にaria-current="page"を付与します。テストでaria-current属性の付与を除外するナビゲーションも設置します。

以下のhtmlでテストします。全てのナビゲーションにaタグを設定します。aria-current属性の付与を除外するhtmlファイルはno-currentディレクトリ内に格納します。

<p class="title">aria-current付与</p>
<ul>
	<li><a href="https://blog.brick-plan.jp/wp-content/themes/bp_blog/demo/aria-current/index.html" class="c-text-link js-location">メニュー01</a></li>
	<li><a href="https://blog.brick-plan.jp/wp-content/themes/bp_blog/demo/aria-current/index2.html" class="c-text-link js-location">メニュー02</a></li>
	<li><a href="https://blog.brick-plan.jp/wp-content/themes/bp_blog/demo/aria-current/index3.html" class="c-text-link js-location">メニュー03</a></li>
</ul>
<p class="title">aria-current付与除外</p>
<ul>
	<li><a href="https://blog.brick-plan.jp/wp-content/themes/bp_blog/demo/aria-current/no-current/index.html" class="c-text-link js-location">メニュー04</a></li>
	<li><a href="https://blog.brick-plan.jp/wp-content/themes/bp_blog/demo/aria-current/no-current/index2.html" class="c-text-link js-location">メニュー05</a></li>
	<li><a href="https://blog.brick-plan.jp/wp-content/themes/bp_blog/demo/aria-current/no-current/index3.html" class="c-text-link js-location">メニュー06</a></li>
</ul>

aria-current属性が付与されたaタグはCSSのpointer-events: none;でリンクを無効化します。

.c-text-link[aria-current] {
	pointer-events: none;
}

jQueryのコードです。aタグのhref属性とURLが一致したaタグにaria-current=”page”を付与します。href属性に「no-current」が含まれる場合はaria-current属性の付与を除外します。

function navCurrent() {
	var url = window.location;
	$('.js-location:not([href*="no-current"])[href="' + url + '"]').attr('aria-current', 'page');
}
navCurrent();