スクリーンリーダー利用者が [Tab] キーで Web ページ内のリンクを辿っていく場合、スクリーンリーダーは、リンクの範囲（ a 要素に囲まれている範囲）のテキスト、あるいは画像などの代替テキストを読み上げます。

未だに多くの Web サイトで見受けられる、文章中の「こちら」だけにリンクが貼られている場合、この3文字だけではリンク先に何があるのか全くわかりませんので、そのリンクの前後のテキストを確認する必要があります。

JIS X 8341-3:2010 では、「7.2.4.9：リンクの目的に関する達成基準」として、

それぞれのリンクの目的がリンクのテキストだけから特定できるメカニズムが利用可能でなければならない。ただし、リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。

とありますが、これは等級 AAA の達成基準となっています。一方、等級 A の達成基準では、「7.2.4.4：文脈におけるリンクの目的に関する達成基準」として、

それぞれのリンクの目的が、リンクのテキストだけから、又はプログラムが解釈可能なリンクの文脈をリンクのテキストとあわせたものから解釈できなければならない。ただし、リンクの目的が一般的にみて利用者にとって曖昧な場合は除く。

となっています。

つまり、「こちら」だけにリンクを貼ることは、同じ段落内のテキストや直前の見出しなどを参照してリンク先が分かれば、等級 A、あるいはこれを含む等級 AA も達成できるということになります。

しかし、[Tab] キーでリンクを辿っている途中で、「こちら　リンク」と読み上げられ、前に戻って確認しなければならないという行為は、とても煩わしいのではないかと思うのです。「7.2.4.9　リンクの目的に関する達成基準」は少なくとも等級 AA であるべきではないかと。

今回、当 Web サイトをリニューアルするにあたり、等級 AA 準拠を目指したわけですが、追加する AAA の達成基準として、よく取り上げられる「7.2.3.2：3回のせん（閃）光に関する達成基準」とか「7.2.4.8：現在位置に関する達成基準」などに加え、この「7.2.4.4：文脈におけるリンクの目的に関する達成基準」も重要だと考え、追加する達成基準に加えました。

JIS X 8341-3 は Web アクセシビリティ対応のための一つの手段（指標）であり、JIS に対応することがゴールではないと考えています。

リンクテキストを意識しながらマークアップをしていましたが、最後に引っ掛かったのが、ページネーション部分。記事一覧や検索結果など、複数ページにわたる場合に表示される各ページへの数字によるナビゲーションです。

「2　リンク」とか「3　リンク」とか読み上げられても、想像は付くかもしれないけど、何のことかわからないかもしれないと。視覚的にはページネーションであることは分かるので、例外事項の「リンクの目的が一般的にみて利用者にとって曖昧な場合」にも当てはまらないと思います。もしかしたら、等級 A も達成できないのではないかと。

どうにかしようと考えましたが、WordPress のテンプレートタグ paginate_links で吐き出している部分で、自由に HTML を書き替えることもできません。そこで、jQuery で書き替えてみました。

paginate_links で吐き出される HTML はこんな感じ。

<p class="pagination">
  <a class="prev page-numbers" href="http://www.will3in.co.jp/blog/">&laquo;&nbsp;前<span class="scrText">のページ</span></a>
  <a class='page-numbers' href='http://www.will3in.co.jp/blog/'>1</a>
  <span class='page-numbers current'>2</span>
  <a class='page-numbers' href='http://www.will3in.co.jp/blog/page/3/'>3</a>
  <a class="next page-numbers" href="http://www.will3in.co.jp/blog/page/3/">次<span class="scrText">のページ</span>&nbsp;&raquo;</a>
</p>

左右に表示される「« 前」と「次 »」については、paginate_links のパラメータで”のページ”を挿入しています。

これに、数字部分に対して jQuery でテキストを追加します。

jQuery(function($){
  $('p.pagination .page-numbers').each(function(){
    if ( $(this).text().match(/^(\d+)$/) ){
      $(this).append('<span class="scrText">ページ目</span>');
    }
  });
  $('p.pagination span.current').prepend('<span class="scrText">現在のページ: </span>');
});

すべてのリンクの class 値に page-numbers が付いているので、match 関数を使ってリンクテキストが数値のみの場合に “ページ目” を後に追加し、カレントページには “現在のページ:” を前に追加しています。

これによって生成される HTML は次のようになります。

<p class="pagination">
  <a class="prev page-numbers" href="http://www.will3in.co.jp/blog/">&laquo;&nbsp;前<span class="scrText">のページ</span></a>
  <a class='page-numbers' href='http://www.will3in.co.jp/blog/'>1<span class="scrText">ページ目</span></a>
  <span class='page-numbers current'><span class="scrText">現在のページ: </span>2<span class="scrText">ページ目</span></span>
  <a class='page-numbers' href='http://www.will3in.co.jp/blog/page/3/'>3<span class="scrText">ページ目</span></a>
  <a class="next page-numbers" href="http://www.will3in.co.jp/blog/page/3/">次<span class="scrText">のページ</span>&nbsp;&raquo;</a>
</p>

この追加したテキストは、<span class="scrText">〜</span> で囲んであり、CSS で

.scrText {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

として画面から隠しつつ、スクリーンリーダーで読み上げられるようにしています。

これで、テキスト追加前と変わらない見た目で、スクリンリーダーではより分かりやすく読み上げられるのではないかと思います。

ちなみに、display: none; でも画面に表示されなくなりますが、これはスクリーンリーダーでも認識されなくなります。せっかくページの先頭にスキップリンクを設けておきながら、display: none; で消してしまってる残念なサイトがよくありますね。