リンク先は「どこ」ですか？アクセシビリティから考える「親切なリンク」の作り方
Webサイトを作っていると、必ずと言っていいほど登場する``タグ。
「ここをクリック！」とか「詳細はこちら」といったリンク、よく見かけますよね。でも、実はこれ、「目が見えない人」にとっては、ものすごく不安な案内になってしまっている可能性があるんです。
今日は、Webサイトを「誰にとっても使いやすい場所」にするための、ちょっとした魔法のスパイス「ARIAラベル」についてお話しします。難しく考えすぎなくて大丈夫。一緒に紐解いていきましょう！
—
「ここをクリック」は、目隠しをしている人には伝わらない
想像してみてください。あなたは今、目隠しをして、誰かに「この部屋にある一番大事な書類を渡して」と頼まれています。
その人は、あなたにこう言いました。
「ここをクリックして、書類を受け取ってね」
……どうでしょう？「ここ」ってどこ！？って思いませんか？
スクリーンリーダー（画面読み上げソフト）を使っているユーザーさんは、まさにこの状況です。画面上のリンクだけを拾い読みしていくと、「ここ」「こちら」「詳細」といったリンクが並んでしまい、結局何がどこにあるのかサッパリ分からない、ということが起きてしまうんです。
aria-labelで「心の声」を書き足そう
そこで登場するのが、`aria-label`（アリア・ラベル）です。
これは、画面には表示されないけれど、スクリーンリーダーが読み上げてくれる「ヒミツの付箋」のようなもの。
例えば、「詳しくはこちら」というリンクがあったら、そこに「このボタンを押すと、最新のiPhone 15のスペック詳細ページに飛びますよ」という補足情報をこっそり添えてあげるんです。
実践してみましょう！
まずは、よくある少し不親切なコードを見てみましょう。
これを、`aria-label`を使って親切なリンクに書き換えてみます。
これだけで、ユーザーさんはリンクを押す前に「あ、これはスペック詳細のページだな」と理解して安心してクリックできるようになるんです。すごいですよね！
—
どんな時に使うと効果的？
ARIAラベルは万能薬ではありません。使いすぎるとかえって読み上げが長くなりすぎてしまうこともあります。こんなシーンで使ってみるのがおすすめです。
- アイコンだけのリンク（SNSのロゴなど）: アイコンだけだと「画像」としか認識されないので、`aria-label=”Twitterの公式アカウントへ”`のように補足すると親切です。
- 同じテキストが並ぶ場所: ニュースサイトなどで「記事を読む」というリンクが何個も並んでいる時、それぞれに`aria-label`でタイトルを付け足すと、迷子にならずに済みます。
—
もっと「深掘り」したいあなたへ：aria-labelledbyのヒント
もし、リンクの近くに既に「タイトル」が書かれているなら、`aria-labelledby`という技も使えます。
iPhone 15のスペック
最新の性能についてはこちらをご覧ください。
こうすると、「iPhone 15のスペック」という言葉をIDで紐付けて、「詳細はこちら」というリンクに意味を持たせることができるんです。「情報を二重に書かなくて済む」という、ちょっとスマートな書き方ですね。
—
最後に：Web制作は「おもてなし」です
プログラミングやマークアップというと、つい「正しく動くか」「エラーが出ないか」という技術的な側面に目が行きがちです。でも、Webサイト作りは、実は「相手を思いやるおもてなし」そのものなんですよね。
「このリンクを押したら、あの人はどう感じるかな？」
「この案内は、誰にでも伝わるかな？」
そんなふうに、画面の向こう側にいる誰かを想像しながらコードを書く。その温かい視点こそが、世界中で愛されるWebサイトを作る一番の秘訣だと、私は信じています。
今日からあなたのコードに、ちょっぴり優しい「aria-label」を添えてみませんか？きっと、あなたのサイトを訪れる誰かの心が、少しだけ軽くなるはずですよ！
それでは、また次回の記事でお会いしましょう！Happy Coding!
コメント