良いリンクの書き方

最近になってMDNのHTMLのチュートリアルを読み直している。

HTMLを何年も書き続けているものの感覚で書いている部分が多く、きちんと基礎を固めたいと思ったからだ。
チュートリアルを進めていく中で、良いリンクの作り方の項目が印象に残ったので備忘録として書いておきたい。

良いリンクとは？

全てのユーザがアクセスできるように作られているリンクのこと。
ここでいうアクセスできるとは物理的にアクセスできる以外にも、リンクの存在とリンクに関する情報がユーザに伝わることを意味する。

良いリンクの作り方

リンクのテキストはリンク先の内容が説明されているテキストを設定すると良い。

スクリーンリーダーの場合、リンク部分をまとめて読み上げる機能がある。
そのため、リンクのテキストに「リンク」や「リンク先」、「こちら」を使われている場合、スクリーンリーダーで読み上げられる時にリンク先の情報が理解しづらくなってしまう。

また、リンクであることは視覚的なユーザは見た目で理解ができるのと、スクリーンリーダーを使う場合もリンクであることはユーザに伝わるため、リンクのテキストで「リンク」であることを伝える必要がない。
これはつまり、リンクの下線を消したり、色をリンク以外のテキストと同じものにしたり、リンクであることを見た目から分からないようにさせないということも大切だ。

リンクのテキストで言うと、URLをテキストとして使うこともやめた方が良い。
これはスクリーンリーダーだと1文字ずつ読まれることになり理解がしづらくなってしまうからだ。

まとめ

「リンクを作る」という作業はWebサイトを作る上で基本中の基本のテクニックで出来ているつもりだったけど、Webアクセシビリティの観点で見ると自分はまだまだ学ばなきゃいけないことが多くあるなー。
自分達が作るものはユーザの何かの課題を解決していくもののはずなので、作るものが技術的に動くかどうかだけではなく、全てのユーザに使いやすいものになっているかはきちんと考えないといけないな。