過去3回にわたり、ウェブアクセシビリティの記事を公開してきました。

• はじめてみよう、ウェブアクセシビリティ (基礎知識編)
• はじめてみよう、ウェブアクセシビリティ (実践編)
• 【Tips】すぐできるウェブアクセシビリティ！フォーカス編

今回も簡単に始められるウェブアクセシビリティのTipsを紹介したいと思います。
今回ご紹介するのは「リンク先の表記」についてのTipsです。

リンク先の表記に「こちら」「もっと読む」はNG？

文章中に挿入されるリンクや一覧ページなどで、リンク先の詳細が記載されていて続けて「こちら」というリンクが貼られていたり、Blogの一覧ページなどで「続きを読む」というリンクをクリックすると記事詳細ページが見られる…というものを皆さん一度は目にしたことがあると思います。

ウェブアクセシビリティの観点から言うと、これらのリンクの貼り方は避けた方がよいと言われています。

「こちら」や「もっと読む」を避けた方がよい理由

• リンクの文字だけを見て、リンク先を判断することができない。前後の文脈を読まないといけない
• 「こちら」や「もっと読む」を1ページの中で複数使用していると、リンク一覧機能を使った時にリンク先を判断することができない

リンク一覧機能は、スクリーンリーダー(読み上げ機能)を使用するユーザーが使うもので、そのページに存在しているリンク先を一覧にして読み上げてくれるという機能です。
「こちら」や「もっと読む」が複数あると、何のリンクを表現しているのかが分からなくなってしまいます。

解決策：リンク先が推測できるテキストをリンクに含める

この問題を解決するためには、リンク先は何のページなのか？をリンク自体に含めてあげる必要があります。

例えば
「Eyes, JAPAN Blogはこちら」ではなく「 Eyes, JAPAN Blog を見る 」 としたり、
「福利厚生について詳しく見る」ではなく「 Eyes, JAPANの福利厚生を詳しく見る」
という文言にします。

また、文中にリンクがたくさん入る場合は、本文中にリンクは貼らずに、本文の最後に「関連リンク」などとしてリスト形式でリンクを紹介するという方法もあります。

一覧ページなどで「もっと読む」というリンクをつける場合、「もっと読む」自体にタイトルを含めると長くなり収まりきらない場合があります。
その場合は、タイトルのエリアを含めてリンクを設定してあげる方法が効果的です。
下記に例を記します。

/* もっと読むだけにリンクがついている */
<h2>blogのタイトルが入ります</h2>
<a href="URL">もっと読む</a>

ではなく

/* <h2>タイトルにもリンクがついている */
<a href="URL">
  <h2>blogのタイトルが入ります</h2>
  <span>もっと読む<span>
</a>

とした方が良いでしょう。
ただしこの場合は、あまりにも長い文章が含まれているとリンク一覧が長くなり、スクリーンリーダーを使用しているユーザーが混乱する可能性があります。
あまりにも長いコンテンツをリンクに含めるのは避けた方がよさそうです。

まとめ

ついつい「こちら」や「もっと読む」は使いたくなりますが、スクリーンリーダーを使うユーザーに対しては不親切なリンクなんですね。
これ以外にも、資料のリンクを「PDF版」などとしてしまうと何の資料なのかわからないという問題が出てくる場合もあります。

ぜひ「 <a>タグで囲まれた部分だけで遷移先のページが想像できるか」ということを頭に置いて、リンク先の記載を見直してみてもらえたらと思います。

参考書籍

デザイニングWebアクセシビリティ – アクセシブルな設計やコンテンツ制作のアプローチ [amazonリンク]