この記事は最後に更新してから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_the_post_thumbnail_caption(2018年5月27日 更新)

string get_the_post_thumbnail_caption( mixed $post = null )
投稿ページのサムネイル(アイキャッチ画像)キャプションを取得する。

wp_enqueue_style(2019年11月25日 更新)

void wp_enqueue_style( string $handle [ , string $src = false [ , array $deps = array() [ , string $ver = false [ , string $media = 'all' ] ] ] ] )
使用するスタイルシート(CSS)を出力用のキューに入れる。パラメータ$srcが指定された場合は、グローバル変数$wp_stylesに登録してから出力用のキューに入れる。

post_class(2018年5月27日 更新)

void post_class( [ string $class = '' [ , int $post_id = null ] ] )
投稿情報の種別に応じたクラス属性(class="post-?? post ...")を表示する。具体的なクラス名は、投稿ID(post-番号)、投稿種別(postやpage)、カテゴリー(category-名前)、タグ(tag-名前)などがある。これらクラス名に合わせたCSSを準備することで、投稿ページのユニークなデザインが表現可能になる。

get_header(2020年8月18日 更新)

void | false get_header( [ string $name = null [ , array $args = array() ] ] )
ヘッダパーツを記述したメインヘッダファイルheader.php(またはサブヘッダファイルheader-???.php)を読み込む。

get_the_excerpt(2018年5月27日 更新)

string get_the_excerpt( [ mixed $post = null$deprecated = '' ] )
投稿情報の抜粋記事を取得する。