リンク
リンク（ハイパーリンク）の存在は Web には欠かせないものです。アクセシビリティーの高い Web ページを作成するためには、いくつか気をつけなければならないものがあります。
見た目でリンクだとわかるようにする
HTML では <a href="https://www.freee.co.jp">フリー株式会社</a> のように記述すると、リンクとなります。
多くのページでは、青系の文字色でアンダーラインつきの見た目で表示されます。
良い例: 見た目でリンクだと理解できる
ほかのテキストと区別のつきやすい色や、アンダーラインがついていることで、リンクであることがわかりやすくなります。 ボタン風の見た目にするのもひとつの方法です。
フリー株式会社 では、freee会計やfreee人事労務といったプロダクトの開発・提供を通して、だれもが自由に自然体で経営できる環境をつくっていきます。
フリー株式会社では、一緒にスモールビジネスを盛り上げていくエンジニア・デザイナー・プロダクトマネージャーを募集しています
悪い例: 下線がなく、リンクだとわかりづらい
以下の例ではリンクのアンダーラインが、マウスオーバーしなければ表示されません。 この状態ではリンクであることが一見するとわかりづらく、特にグレースケール表示にしていると、リンクの場所を認識するのが困難になります。
フリー株式会社 では、freee会計やfreee人事労務といったプロダクトの開発・提供を通して、だれもが自由に自然体で経営できる環境をつくっていきます。
フリー株式会社では、一緒にスモールビジネスを盛り上げていくエンジニア・デザイナー・プロダクトマネージャーを募集しています
関連するチェック
リンク先を具体的に表す文言にする
スクリーンリーダーを使用していて、リンクへのジャンプを使用する場合やTabキーでフォーカスを移動させていく場合、リンクに指定している文字列が読み上げられます。 このとき、リンク先を具体的に表現した文字列になっていない場合、ユーザーはその前後を読んで文脈を理解しなければ、どれが目的のリンクなのか理解できなくなってしまいます。
良い例: リンク先が具体的に書かれている
悪い例: リンク先のことが具体的に書かれていない
以下の例ではすべてのリンクが「こちら」となっており、その手前のテキストを読まなければリンク先が何であるのかを理解できません。
また、画面を視覚的に捉えているユーザーにとっても、「こちら」とい文字列部分が短いためマウスポインタを合わせてクリックすることが難しい場合があったり、アンダーラインを表示しないようにしている場合にはリンクを見つけづらい場合があったりします。
関連するチェック
<a href="..."> で実装する
リンクは <a> 要素に href="..." 属性があってはじめてリンクとして機能します。
見た目や挙動をどんなにリンクに寄せても、 <a href="..."> で実装されていなければ、スクリーンリーダーのユーザーにはリンクであることが伝わりません。
それぞれの例で、以下のような操作を試してみてください。
- マウスポインタを合わせてクリックする
- Tabキーでフォーカスを合わせ、Enterキーを押下する
- リンクを右クリックして、「新しいタブで開く」操作をする
- Control (Windows) または Command (macOS) を押しながらクリックして、「新しいタブで開く」操作をする
- スクリーンリーダーで操作する