やらねば.com

the_posts_pagination のWebアクセシビリティ

ページネーションはサイトの一覧ページや記事下で記事を分割したり、リストのページ遷移をしたりする為に使われています。
例えばこんなやつです。

«‹123›»

スクリーンリーダーでは操作が困難

音声読み上げソフトのスクリーンリーダーでこのページネーションを操作しようとすると、記号の部分「«」「‹」と「›」「»」を正しく理解出来ません。
スクリーンリーダーにもよりますが、記号をそのまま読もうとしたり、そもそも読み上げなかったりします。
視覚ではすぐ理解出来ても、音声を頼りにしている人の為に何を示しているのかを説明する必要が有ります。

aria-label 属性等を使ってWebアクセシビリティを確保する事は出来ますが、WordPress テーマで独自に実装されているものは該当箇所の修正が困難であったり、アップデートで修正し直す必要が出てきます。

WordPress で使える the_posts_pagination 関数と出力されるコード

WordPress にはページネーションを呼び出す関数 the_posts_pagination が用意されています。
アーカイブページで「<?php the_posts_pagination(); ?>」のコードで簡単にシンプルなページネーションを呼び出す事が出来ます。

シンプルと言ってもアクセシビリティはとても優秀で、WordPress 5.3 で出力される HTML コードは


<nav class="navigation pagination" role="navigation" aria-label="投稿">
<h2 class="screen-reader-text">投稿ナビゲーション</h2>
<div class="nav-links">
<a class="prev page-numbers" href="https://～/">前へ</a>
<a class="page-numbers" href="https://～/">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="https://～/page/3/">3</a>
<a class="next page-numbers" href="https://～/page/3/">次へ</a>
</div>
</nav>

上記は3ページ中2ページ目にいる時に出力されるコードです。

aria-current

2ページ目にいる為、現在地は<a>要素では無く、<span>要素になっています。
aria-current="page" はスクリーンリーダーに現在地を知らせるもので、「現在のページ」等と情報が付加されて読み上げられます。
aria-current 属性の動作検証

role と aria-label

<nav>要素の role="navigation" は要素にナビゲーションの役割を与えるものですが、<nav>要素自体が既にその意味を持っているので、これは出力される必要は無さそう。
aria-label="投稿" は<nav>要素内にフォーカスが入った時にその値が読み上げられます。
この場合は、マウスカーソルがページネーションに近づいた時に「投稿」と情報が読み上げられます。
aria-label の動作検証

screen-reader-text

<h2>タグに付加されるクラスの中身は


.screen-reader-text{
  clip: rect(1px,1px,1px,1px);
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px
}

となっており、隠しテキストとしてスクリーンリーダーに「投稿ナビゲーション」の読み上げと見出しタグの情報が渡されます。

これを CSS を使って display:none で隠す方法が紹介されていたりしますが、見出しタグはスクリーンリーダーユーザーにとって最重要とも言える要素なので、これを隠すとアクセスが難しくなり、Webアクセシビリティが低下するのでおすすめしません。

このテキストは <?php the_posts_pagination(); ?> を修正して


<?php the_posts_pagination( array( 'screen_reader_text' => __( '任意のテキスト', 'textdmain' ) ) ); ?>

で置き換える事が出来ます。

置き換えるテキストは<nav>要素の aria-label="" の値と<h2>要素の両方に適用される様です。
ちなみに、デフォルトでは「投稿ナビゲーション」となっていますが、ソフトにもよりますが、スクリーンリーダーは<nav>要素にフォーカスが差し掛かると「ナビゲーション」と情報を読み上げるので、テキストにナビゲーションの文字を入れると「ナビゲーション」と2回読み上げる事になります。それで混乱する事は無いですけどね。
Google の検索結果ページでもページナビゲーションの見出しは使われていて、こちらのテキストは「ページの操作」となっていました。参考までに。

又、記号よりも文字列にした方が間違いが無く、「前へ」「次へ」や「Prev」「Next」等の分かり易いテキストにすれば音声を頼りにしているユーザーにも快適な閲覧を提供出来るのではないでしょうか。