aria-labelとは
aria-labelは要素に文字列で名前（アクセシブルネーム）を与えるARIA属性です。スクリーンリーダーはこの値を読み上げるため、画面に文字が表示されていない要素でも意味を伝えられます。
もっとも典型的な用途は、虫眼鏡や歯車などアイコンだけのボタンです。見た目では検索や設定と分かっても、内部にテキストがなければ支援技術には「ボタン」としか伝わりません。aria-labelで名前を補うことで、何のボタンかが伝わります。
aria-labelに指定した文字列は画面には表示されず、支援技術にだけ届きます。
aria-labelledbyとの違い
似た属性にaria-labelledbyがあります。こちらは文字列を直接書くのではなく、ページ内の別要素のidを参照し、その要素のテキストを名前として使います。
すでに画面上にラベルとなるテキストが存在する場合は、それを参照するaria-labelledbyが向いています。一方、参照できる可視テキストがなく、その場で名前を書きたい場合はaria-labelが適しています。
両方を同じ要素に指定した場合、一般にaria-labelledbyが優先されます。重複して指定する必要は通常ありません。
実務ではどこで関係する？
aria-labelは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。
aria-labelについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。
- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める
使うべき場面
aria-labelが活きるのは、可視テキストを持たない操作要素です。アイコンボタン、閉じるボタンの×印、ナビゲーションが複数あるときの区別などが代表例です。
たとえば同じページにnavが複数あると、支援技術には「ナビゲーション」が並ぶだけで区別できません。それぞれにaria-labelでグローバルナビ、フッターナビといった名前を付けると、利用者が目的の領域へたどり着きやすくなります。
アイコンボタンに名前を付ける手順
アイコンだけのボタンにaria-labelを付ける基本的な流れは次のとおりです。
ポイントは、ボタンに名前を与えると同時に、装飾目的のアイコン画像を支援技術から隠すことです。両方をそろえると、読み上げが重複せず分かりやすくなります。
- 対象がボタンやリンクとして正しくマークアップされているか確認する
- そのボタンの機能を表す簡潔な名前を決める（例: 検索、メニューを開く）
- 要素にaria-label属性として、その名前を指定する
- アイコン画像が装飾目的なら、画像側は支援技術から隠す設定にする
- スクリーンリーダーで意図した名前が読み上げられるか確認する
避けたほうがよい使い方
aria-labelは便利ですが、可視テキストがある要素に異なる名前を上書きすると、見た目と読み上げが食い違い混乱を招きます。原則として、可視テキストと読み上げ名は一致させます。
また、見出しや段落など本来名前を付ける対象ではない要素に乱用するのも避けます。aria-labelが効くのは、ボタンやリンクなど名前を持つべき対話的な要素が中心です。さらに翻訳の対象になりにくいなどの注意点もあるため、可視テキストで表現できるならそちらを優先します。
読み上げ結果のレビュー
aria-labelが意図どおり読み上げられるかは、実際の支援技術で確認するのが確実です。テキストが見えない要素ほど、開発者の思い込みと実際の読み上げがずれやすいためです。
確認したいページをチームやアクセシビリティ担当に見てもらうとき、ギガサイト便を使えばHTMLやZIPをドロップするだけで共有URLを発行できます。公開期限や認証も設定できるため、検証用ページを関係者だけに一時的に渡す用途に向いています。
よくある質問
aria-labelに書いた文字は画面に表示されますか？
表示されません。aria-labelの値は支援技術に読み上げられる名前として使われるだけで、視覚的には何も表示されません。画面にも文字を出したい場合は、通常の可視テキストを使います。
テキストのあるボタンにもaria-labelを付けるべきですか？
基本的に不要です。可視テキストがあればそれが名前になります。むしろ異なる名前を上書きすると見た目と読み上げが食い違うため、可視テキストと読み上げ名は一致させるのが原則です。
aria-labelとtitle属性は同じですか？
違います。title属性はマウスホバー時のツールチップ表示が主目的で、支援技術での扱いは一貫しません。要素のアクセシブルネームを確実に与えたい場合は、title属性ではなくaria-labelを使うほうが信頼できます。
どんな名前を付ければよいですか？
その要素の機能を短く具体的に表す名前が望ましいです。検索、メニューを開く、閉じるなど、利用者が操作結果を予測できる言葉にします。ボタンという語自体は役割から伝わるため、名前に含める必要はありません。
実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？
細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。