こんにちは！フロントエンドの世界へようこそ。HTMLを書き始めて、「リンクやテキストに補足情報を付けたいけれど、どうすればいいんだろう？」と悩んだことはありませんか？
今日は、そんなあなたの疑問を解決する「魔法の属性」、`aria-describedby` についてお話しします。
難しそうな名前ですが、大丈夫。実はこれ、「デパートの案内板」を想像するとすごく分かりやすいんです。一緒に紐解いていきましょう！
—
aria-describedbyって、一体なに？
Web制作をしていると、こんな場面に出くわしますよね。
- 「もっと詳しく」というリンクがあるけれど、画面読み上げソフト（スクリーンリーダー）を使っている人には、何について「もっと詳しく」なのか伝わりにくい。
- ボタンやテキストの近くに注釈があるけれど、プログラム的にはバラバラに置いてあるので、関連性が伝わらない。
そんな時、「このリンクの説明は、あそこにあるあの文章ですよ！」と橋渡しをしてくれるのが `aria-describedby` です。
例えるなら、「この商品の詳しい使い方は、あちらの棚にある説明書を見てくださいね」と、案内板を指差してあげるようなもの。視覚的に見ている人には当たり前のことでも、機械には教えてあげないと分からない。その「橋渡し」をしてあげるのがこの属性の役割なんです。
—
実際に書いてみよう！
言葉だけだと少し硬いので、具体的なコードを見てみましょう。例えば、「利用規約」へのリンクがある場合を考えてみます。
利用規約
を読む。
※クリックすると新しいタブでPDFが開きます。
ここがポイント！
1. リンク（`a`タグ）に `aria-describedby=”ID名”` を書く：これが「私の説明は、あのIDの場所にあるよ！」という合図です。
2. 補足説明側のタグに `id=”ID名”` を書く：ここが重要！リンクが指差している先（ID）が一致していないと、魔法はかかりません。
これだけで、スクリーンリーダーを使っている方は「利用規約」というリンクにフォーカスした際、続けて「※クリックすると新しいタブでPDFが開きます」という注釈も読み上げてくれるようになります。親切ですよね！
—
よくある「つまずき」ポイント
ここで少し、「あれ？」となりがちなポイントを整理しておきますね。
- `aria-label` と何が違うの？
- `aria-label` は「名前の書き換え」です。例えば「もっと読む」というリンクを「〇〇記事を詳しく読む」に書き換えるイメージ。
- `aria-describedby` は「補足説明の紐付け」です。あくまで「メインはここ、説明はあそこ」という関係性を作る時に使います。
- どこにでも使っていいの？
- 便利だからといって、全ての要素に付ける必要はありません。あくまで「説明が必要な時」だけで大丈夫ですよ！
—
まとめ：Webを「みんなに優しい場所」に
HTMLを書くとき、「誰がどうやってこのページを見ているかな？」と想像するだけで、あなたのコードはぐっと温かいものになります。
`aria-describedby` は、機械に「あっちも読んであげてね」と優しく教えてあげるためのツールです。これを使うだけで、あなたのサイトはぐっとアクセシブル（誰にとっても使いやすい）なWebサイトに進化します。
最初は難しく感じるかもしれませんが、まずは「リンクの補足を繋いでみようかな？」という軽い気持ちで、小さな一歩から試してみてくださいね。
あなたの書くコードが、誰かのWeb体験を少しだけ明るくする。そんな素敵な魔法を、ぜひこれからも楽しんでいってください！
それでは、また次回の記事でお会いしましょう！
コメント