ページネーションを aria 属性で Accessible に

公開日

ページネーションとは

サイトの一覧ページや記事下で良く見るこんなやつです。

« ‹ 1 2 3 › »

記事を分割したり、リストのページ遷移をしたりするものですね。
現在このサイトでも利用している WordPress Luxeritas Theme にもページネーション機能が実装されています。
便利な機能ですが、このままだと問題が有ります。

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

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

aria 属性を付加してガイドする

HTML 要素に aria 属性を付加する事で要素内の記号をスクリーンリーダーの読み上げ用の文章に置き換える事が出来ます。
一番簡単なのは記号を「前へ」や「次へ」といった文字に置き換える事ですが、デザイン性を損ねますし、スクリーンリーダーの事だけ考えて視認性が悪くなっては本末転倒です。
aria 属性を使えば、デザイン性を損なわずにスクリーンリーダーにも対応する事が出来ます。

何か偉そうな事言ってますが、私も最近ちょっと調べてみて使いたくなっちゃっただけなんですけどね。
どの属性を使えば良いのか迷うところですが、今回は「aria-label」と「aria-hidden」属性を実装してみようと思います。

WordPress Luxeritas Theme に実装

まずはページネーションが記述されている箇所を探します。
PHP がほとんど読めない私には既にハードルが高いのですが、探すこと数時間…ついに見つけました。
親テーマの「inc」ディレクトリ内の「filters.php」の中にその記述が有ります。
どうも子テーマでは編集が難しい場所の様で、仕方なく親テーマを直接編集する事に。

filters.php の479行目あたり


if( $paged > 1 ) {
	$html .= '<li><a href="' . get_pagenum_link( 1 ) . '" aria-label="先頭へ"><i>&laquo;</i></a></li>' . "\n";
	$html .= '<li><a href="' . get_pagenum_link( $paged - 1 ) . '" aria-label="前へ"><i>&lsaquo;</i></a></li>' . "\n";
}
else {
	$html .= '<li class="not-allow" aria-hidden="true"><span><i>&laquo;</i></span></li>' . "\n";
	$html .= '<li class="not-allow" aria-hidden="true"><span><i>&lsaquo;</i></span></li>' . "\n";
}

&laquo; が「«」&lsaquo; が「‹」を指しています。
その<a>要素に「aria-label」でスクリーンリーダーに読ませたい文章を挿入しています。
更に、ページ遷移のリンクが存在しない場合は「aria-hidden=”true”」でスクリーンリーダーでは読み飛ばす指定をしています。

filters.php の514行目あたり


if( $paged < $pages ) {
	$html .= '<li><a href="' . get_pagenum_link( $paged + 1 ) . '" aria-label="次へ"><i>&rsaquo;</i></a></li>' . "\n";
	$html .= '<li><a href="' . get_pagenum_link( $pages ) . '" aria-label="最後へ"><i>&raquo;</i></a></li>' . "\n";
}
else {
	$html .= '<li class="not-allow" aria-hidden="true"><span><i>&rsaquo;</i></span></li>' . "\n";
	$html .= '<li class="not-allow" aria-hidden="true"><span><i>&raquo;</i></span></li>' . "\n";
}

&rsaquo; が「›」&raquo; が「»」を指しています。
こちらも同じ様に「aria-label」で意味付けをして「aria-hidden=”true”」で不要なガイドを削除しています。

親テーマを修正しているので、テーマの更新があった際は上書きされてしまいますが、実装事態は分かってしまえば簡単なので、その都度置き換えれば良いかなと思ってます。
そして奇跡的に製作者さんがこの記事を読んで追加してくれたりして…とか密かに期待しています。