この記事は最後に更新してから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


お勧め

the_modified_author(2019年10月17日 更新)

void the_modified_author()
更新者の表示名を表示する。

wp_assign_widget_to_sidebar(2021年7月29日 更新)

void wp_assign_widget_to_sidebar( string $widget_id, string $sidebar_id )
ウィジェットをサイドバーに配置する。

get_comment_ID(2018年5月27日 更新)

int get_comment_ID( )
現在のコメントのIDを取得する。

term_is_ancestor_of(2019年3月15日 更新)

bool term_is_ancestor_of( int | object $term1, int | object $term2, string $taxonomy )
タームが子孫関係か調べる。

wp_get_custom_css_post(2019年11月14日 更新)

WP_Post wp_get_custom_css_post( [ string $stylesheet = '' ] )
カスタマイザーで追加したCSS情報を取得する。