5.3の機能強化：ナビゲーションにaria-label属性が追加される

説明

先日「WordPress 5.3 Beta 1」が投稿され、アップデート内容は多い感じ。さっそく開発環境にインストールしてみると、管理画面全体の見た目が変わり、ブロックエディターが進化した印象である。

aria-label属性、使っていますか？

はじめに、この記事は公開された5.3 Beta1をもとにしており、正式リリースの際に変更される可能性があることを予めお断りする。

ここで紹介するのは5.3でaria-label属性が出力されるようになったナビゲーションリンク関連の関数である。

実際にthe_post_navigation関数をパラメータなしで使ってみる。

the_post_navigation();

出力されたHTMLは次の通り（タブは除去）。aria-label属性が出力されている。

<nav class="navigation post-navigation" role="navigation" aria-label="Posts">
<h2 class="screen-reader-text">Post navigation</h2>
<div class="nav-links"><div class="nav-next"><a href="http://localhost/2019/09/26/next/" rel="next">Next</a></div></div>
</nav>

関数のパラメータが省略された場合は'Posts'になっているが、ソースコードを見てみると'Posts'の翻訳テキストが適用されるようになっている。なおthe_post_navigation関数は投稿向けのナビゲーションになるが、the_comments_navigation関数のようなコメント向けのナビゲーションの場合は'Comments'の翻訳テキストが適用されるようになっている。

aria-label属性の適用ルール

ここで先の関数の呼び出しでパラメータの配列に'aria_label'キーを指定してみる（キーの部分、-ではなく_になるので間違えないこと）。

the_post_navigation( array( 'aria_label' => 'Post navi' ) );

出力されたHTMLでは、aria-label属性値がパラメータで指定した'Post navi'に変更された。

<nav class="navigation post-navigation" role="navigation" aria-label="Post navi">
<h2 class="screen-reader-text">Post navigation</h2>
<div class="nav-links"><div class="nav-next"><a href="http://localhost/2019/09/26/next/" rel="next">Next</a></div></div>
</nav>

パラメータを省略した場合とパラメータの配列に'aria_label'キーを指定した場合の例を紹介したが、aria-label属性の出力に関してもう1つルールがある。それは'aria_label'キーは指定せず、'screen_reader_text'キーを指定した場合である。実際に'screen_reader_text'キーを使ってみる。

the_post_navigation( array( 'screen_reader_text' => 'Post navi' ) );

<nav class="navigation post-navigation" role="navigation" aria-label="Post navi">
<h2 class="screen-reader-text">Post navi</h2>
<div class="nav-links"><div class="nav-next"><a href="http://localhost/2019/09/26/next/" rel="next">Next</a></div></div>
</nav>

'screen_reader_text'キーは本来h2要素の内容を指定するものだが、今回のアップデートではaria-label属性にも影響を与えるようになる。

この記事で紹介した関数をテーマやプラグインで使用されている場合は、5.3へのアップデートに合わせて対応するとよいだろう。