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


お勧め

get_post_time(2018年5月27日 更新)

mixed get_post_time( [ string $d = 'U' [ , bool $gmt = false [ , mixed $post = null [ , bool $translate = false ] ] ] ] )
パラメータ$dで指定されたフォーマットに従って投稿データの投稿時刻を取得する。

has_tag(2012年1月17日 更新)

bool has_tag( [ mixed $tag = '' [ , mixed $post = null ] ] )
投稿記事に投稿タグが付属しているか調べる。

delete_term_meta(2018年5月27日 更新)

bool delete_term_meta( int $term_id, string $meta_key [ , mixed $meta_value = '' ] )
タームのメタ情報を削除する。

wp_save_post_revision(2023年4月3日 更新)

int | WP_Error | void wp_save_post_revision( int $post_id )
現状の投稿のリビジョンを作成する。

safecss_filter_attr(2023年3月31日 更新)

string safecss_filter_attr( string $css [ , string $deprecated = '' ] )
インラインスタイルをサニタイズする。