この記事は最後に更新してから1年以上経過しています。

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

説明

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

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

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

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

関数名機能
get_the_post_navigation投稿ページ向けのナビゲーションを取得する
the_post_navigation投稿ページ向けのナビゲーションを表示する
get_the_posts_navigationアーカイブページ向けのナビゲーションを取得する
the_posts_navigationアーカイブページ向けのナビゲーションを表示する
get_the_posts_paginationアーカイブページ向けのページ番号ナビゲーションを取得する
the_posts_paginationアーカイブページ向けのページ番号ナビゲーションを表示する
get_the_comments_navigationコメントナビゲーションを取得する
the_comments_navigationコメントナビゲーションを表示する
get_the_comments_paginationコメント向けのページ番号ナビゲーションを取得する
the_comments_paginationコメント向けのページ番号ナビゲーションを表示する

実際に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へのアップデートに合わせて対応するとよいだろう。


最終更新 : 2019年09月26日 10:21


お勧め

wp_is_recovery_mode(2019年5月8日 更新)

bool wp_is_recovery_mode()
リカバリーモード中か調べる。

wp_cache_delete(2023年4月20日 更新)

bool wp_cache_delete( mixed $id [, string $flag = '' ] )
キャッシュから任意のデータを削除する。

get_post_type_object(2022年4月6日 更新)

object get_post_type_object( $post_type )
投稿タイプ情報(オブジェクト)を取得する。

checked(2022年1月26日 更新)

string checked( mixed $checked [ , mixed $current = true [ , bool $echo = true ] ] )
HTMLのchecked属性を表示する。パラメータ$echoにfalseを指定した場合は表示しない。

get_pagenum_link(2019年5月10日 更新)

string get_pagenum_link( [ int $pagenum = 1 [ , bool $escape = true ] ] )
ページ番号リンク(URL)を取得する。