Web制作の世界へようこそ！HTMLを書き始めたばかりの頃って、``タグや``タグをなんとなく使って、「とりあえず動いたからOK！」となりがちですよね。その気持ち、痛いほどよくわかります。
でも、少しだけ視点を広げて「目の見えないユーザーさん」や「スクリーンリーダー（画面読み上げソフト）」のことを想像してみると、HTMLの世界はグッと奥深くて、もっと言えば「誰にでも優しい魔法のツール」に変わるんです。
今日は、そんなインライン要素に「名前」をつけてあげる、`aria-label`と`aria-labelledby`という魔法の言葉についてお話しします。
—
なぜ、インライン要素に「名前」が必要なの？
例えば、Webサイトによくある「アイコンだけのボタン」を想像してみてください。
虫眼鏡のマークだけがある検索ボタンとか、バツ印だけの閉じるボタンです。
私たちには「あ、これは検索だな」と一目でわかりますよね。でも、スクリーンリーダーにとっては、ただの「リンク」や「ボタン」としか認識されず、「リンク。リンクをクリックしてください」とだけ読み上げられてしまうことがあります。これでは、何ができるボタンなのか全くわかりませんよね。
そんな時、「これは『検索』のためのボタンだよ！」と裏側で教えてあげるのが、今回紹介するARIA属性なんです。
—
1. 魔法の言葉その1：aria-label
`aria-label`は、その要素に直接「名前」を書いてあげる方法です。一番シンプルで、よく使われます。
例：アイコンだけのリンクボタン
例えば、SNSのアイコンリンクを作るとき、こんな風に書くことができます。
ここがポイント：
`aria-label`の中身は、その要素が「何をするものなのか」を端的に書くのがコツです。「Twitter」だけよりも、「Twitterへ移動」のように、動作まで含めてあげると親切ですよね。
—
2. 魔法の言葉その2：aria-labelledby
次に紹介するのは、少し上級者向けの`aria-labelledby`です。これは「別の場所にあるテキストを、この要素の名前として使ってね」という「参照」の魔法です。
例：記事の続きへのリンク
ブログなどで「続きを読む」というリンクが並んでいるとき、スクリーンリーダーは「続きを読む」「続きを読む」と繰り返してしまいます。これだと、どこが何の続きなのかわかりませんよね。
そんな時、見出しのIDを借りてくることができます。
美味しいコーヒーの淹れ方
こうすると、スクリーンリーダーは「美味しいコーヒーの淹れ方、続きを読む」と繋げて読んでくれます。これなら、どの記事の続きなのか一目瞭然ですね！
—
使う時に気をつけてほしい「たった一つのルール」
この魔法、便利すぎて全部に使いたくなるかもしれませんが、「本当に必要な時だけ使う」のがプロのこだわりです。
- HTMLの本来の役割を優先する：
例えば、``タグで「重要！」と書いてあるなら、わざわざ`aria-label`を足さなくても、読み上げソフトは自然に重要性を伝えてくれます。
- テキストがあるなら不要：
`ホームに戻る` のように、すでに文字があるなら`aria-label`は不要です。二重に読み上げられて、かえって邪魔になってしまうことがあるんです。
—
まとめ：誰かの「目」になるコードを書こう
最初は難しく感じるかもしれませんが、「もし私が目が見えなくて、この画面を読み上げソフトで操作したらどう感じるかな？」と考えること。それが、アクセシビリティの第一歩です。
`aria-label`や`aria-labelledby`は、コードを飾るための装飾品ではありません。Webサイトという空間を、誰もが迷わずに歩けるようにするための「案内板」なんです。
まずは小さなアイコンのリンクから、この魔法を試してみてください。あなたの書いたコードが、誰かのWeb体験をより豊かに変えていくはずですよ。
もし迷ったり、うまくいかなかったりしても大丈夫。少しずつ覚えていけばいいんです。これからも一緒に、素敵なHTMLの世界を楽しんでいきましょう！
コメント