【入門編】インライン要素におけるaria-labelとaria-labelledbyの活用 – HTML実践ガイド

こんにちは！フロントエンドの現場で日々コードと格闘しているエンジニアです。

Webサイトを作っていると、「見た目は完璧なのに、なんだかアクセシビリティが気になる…」なんてこと、ありますよね。特に、アイコンだけのボタンや、「詳しくはこちら」というリンクばかりのページ。これ、実はスクリーンリーダー（視覚障がいのある方が使う、画面を読み上げるソフト）を使っている人からすると、ちょっと「不親切」になってしまうことがあるんです。

今日は、そんな悩みを解決する魔法の杖、`aria-label`と`aria-labelledby`について、身近な例えを交えながら一緒に紐解いていきましょう！

—

1. なぜ「言葉」が必要なの？

突然ですが、お買い物を想像してみてください。スーパーで「中身が何かわからないラベルなしの缶詰」が山積みにされていたら、どう思いますか？「どれがトマトソースで、どれがツナ缶かわからない！」と困ってしまいますよね。

Webの世界での``タグや``タグも同じです。
例えば、ただの「鉛筆アイコン」があるだけのボタン。私たち目が見える人は「あ、編集ボタンだな」と直感的にわかります。でも、スクリーンリーダーという「目」を持たないツールは、そのアイコンを読み取れません。

そこで登場するのが、「中身を説明する付箋（ラベル）」を貼るという考え方なんです。

—

2. aria-label：直接「名前」を教えちゃう

まずは一番よく使う`aria-label`から。これは、要素に対して「あなたはこういう名前ですよ！」と直接教えてあげる属性です。

実践コード：アイコンボタンの例

「なんだ、これだけ？」と思うかもしれませんが、これだけでスクリーンリーダーを使っているユーザーさんは、「ああ、これを押せば編集できるんだな」と安心して操作できるんです。優しさですね。

—

3. aria-labelledby：近くにある「説明文」を借りてくる

次に紹介するのは、少し大人なテクニックの`aria-labelledby`です。
これは、自分で名前を直接書くのではなく、「ページのどこかにあるテキストを、自分の名前として引用する」という方法です。

例えば、記事のタイトルがすぐ横にある場合、わざわざ同じ言葉を`aria-label`に書くのは二度手間ですよね。そんな時は、そのタイトルを「僕の名前として使わせてもらうよ！」と指定してあげるんです。

フロントエンドの未来について
1. 4. 知っておいてほしい「注意点」
2. 最後に：アクセシビリティは「おもてなし」

フロントエンドの未来について

これなら、もしタイトルが変更されても、リンク側のコードをいちいち書き換える必要がありません。効率的で、かつ賢いやり方だと思いませんか？

—

4. 知っておいてほしい「注意点」

ここで一つだけ、お伝えしたい大切なことがあります。

それは、「HTML本来のパワーを優先する」ということ。
ボタンには`