ページネーションのマークアップ

よくあるマークアップ

<ol>
	<li><a href="/page/1/">最初のページへ</a></li>
	<li><a href="/page/6/">前へ</a></li>
	<li><a href="/page/1/">1</a></li>
	<li><a href="/page/2/">2</a></li>
    <li>…</li>
    <li><a href="/page/6/">6</a></li>
    <li>7</li>
    <li><a href="/page/8/">8</a></li>
    <li>…</li>
    <li><a href="/page/12/">12</a></li>
    <li><a href="/page/8/">次へ</a></li>
    <li><a href="/page/13/">最後のページへ</a></li>
</ol>

このマークアップは一見正しそうに見えますが、以下の問題点があります。

• スクリーンリーダーの読み上げが以下のように読まれる（VoiceOverの場合）
  • いち りんく　最初のページへ
  • に りんく　前へ
  • さん りんく　わん
  • よん　りんく とぅー
  • ご
  • ろく　りんく　ろく
  • なな　せぶん
• ページネーションなのかどうかがわからない
• n個目のliの連番とページ番号の連番が少し分かりにくい
• 現在何ページ目なのかが判断しづらい
• 飛ばされたページ部分が読み上げられないので何ページ目かを読み上げる数字が一気に飛ぶ

改善

<nav aria-label="お知らせ ページネーション">
    <ol>
    	<li><a href="/page/1/">最初のページへ</a></li>
    	<li><a href="/page/6/">前へ</a></li>
    	<li><a href="/page/1/">1</a></li>
    	<li><a href="/page/2/">2</a></li>
        <li><span class="sr-only">3〜5ページをスキップ</span><span aria-hidden="true">…</span></li>
        <li><a href="/page/6/">6</a></li>
        <li><a role="link" aria-disabled="true" aria-current="page">7</a></li>
        <li><a href="/page/8/">8</a></li>
        <li><span class="sr-only">9〜11ページをスキップ</span><span aria-hidden="true">…</span></li>
        <li><a href="/page/12/">12</a></li>
        <li><a href="/page/8/">次へ</a></li>
        <li><a href="/page/13/">最後のページへ</a></li>
    </ol>
</nav>

• スクリーンリーダーの読み上げが以下のように読まれる（VoiceOverの場合）
  • お知らせページネーション　ナビゲーション
  • いち りんく　最初のページへ
  • に りんく　前へ
  • さん りんく　わん
  • よん　りんく　とぅー
  • ご　3〜5ページをスキップ
  • ろく　りんく　しっくす
  • なな　単色表示現在のページ　りんく せぶん

やったこと

• nav要素で囲い、aria-labelでページネーションであることを明示した
• カレントのリンクにaria-current="page"を付与した
• カレントのリンクをクリックしてページがリロードされてしまうのを避けるためにhref属性を無くし、無くしたことで失われるrole="link"を追加した
• スキップされる部分のテキストにスクリーンリーダー用のテキストを追加した

ちょっと体験がよくなりましたね。

少し気になること

• olを使うとliの何個目なのかが読み上げられるので少し混乱しますが、ページ数は最後に読まれるので許容できそうです
  • 個人的にはulよりもolの方がまだ良いかなと思います

まとめ

ページネーション一つとっても考えることは意外と多いですね。

スクリーンリーダー向けに調整しすぎるのも良くありませんが、実際スクリーンリーダーで読み上げてみて混乱したり何が何だかわからなくなるような場合は調整した方が良さそうです。

ただ、表示されるテキストとアクセシブルネームが違う場合ボイスコントロールが直感的ではなくなるときもあるので注意した方が良いでしょう。

aria-xxxは基本的に使用しない方がいいとAPGにも書いてありますが、特にリンクやボタンなどに関してはaria-labelの使用はなるべく控えた方がいいでしょう。

参考

• Page by Page: How Pagination Makes the Web Accessible