よくあるマークアップ
<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
の使用はなるべく控えた方がいいでしょう。