HTML

The aria-label attribute in HTML provides a text label that isn't displayed on-screen, allowing screen readers and other assistive technologies to accurately convey the meaning or function of elements—such as icon buttons—that lack visible text.

aria-label属性

はじめに

HTML の aria-label 属性は、視覚に頼らない支援技術（スクリーンリーダーなど）を利用する方々にも、より正確に情報を伝えるための重要な手段の一つです。Web アクセシビリティを高めるには欠かせない要素となっており、初めて学ぶ方はもちろん、すでに知っている方にとっても運用方法やベストプラクティスを再確認する価値があります。

aria-label とは？

aria-label は、WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）の仕様で定義された属性の一つです。主に次のような役割があります。

スクリーンリーダーなどの支援技術が読み上げるテキストを指定: 視覚的には表示されていない名称を、要素に関連づけることができます。例えば、アイコンボタンにテキストがない場合でも、スクリーンリーダーに読ませる「ボタンの機能」や「ラベル」を設定できます。
視覚に頼ることなく要素の意味を伝える: 画像やアイコンなどの装飾のみの要素に、役割や意図を補足するときにも活用されます。

ARIA 全体像の一部

aria-label は、ARIA 全体の中でも「名前付け」のための属性です。ARIA には他にも、要素の役割を示す role 属性や、要素間の関係を示す aria-labelledby や aria-describedby などさまざまな属性があります。aria-label はその中でも特に「明示的に名前を指定したい」場合に使用します。

なぜ aria-label が必要か？

ウェブサイト上の多くの要素は、デフォルトで何らかのテキストやラベルを持っています。たとえば、<button> 要素にはボタン内のテキスト、<img> 要素には alt 属性など。しかし、次のようなケースでは、従来の方法だけではラベルを適切に提供できない場合があります。

アイコンボタンなど可視テキストがない場合: 例：ハンバーガーメニューアイコン、検索アイコン、閉じるアイコンなど。
装飾用の背景画像やアイコンフォントを使用していて、要素そのものには文字がない場合: 例：CSS で背景としてアイコンを表示しているようなケース。
見た目としてテキストを非表示にしている場合: 例：スタイルシートでテキストを隠してアイコンのみにしている場合。

これらの要素は視覚的には何かの役割を持っているのに、テキストが存在しないため、スクリーンリーダーには「何の要素か」分かりにくくなってしまいます。ここで aria-label を使うことで「このアイコンボタンは ‘検索ボタン’ です」などと明示的に伝えることができるわけです。

基本的な使用例

アイコンボタンにラベルを付与する

HTML

<button aria-label="メニューを開く">
	<!-- アイコンフォントやSVGアイコンを表示する -->
	<svg aria-hidden="true" width="24" height="24">
		<!-- ハンバーガーメニューアイコンのパス -->
	</svg>
</button>

ここでは、見た目としてアイコンのみを表示しているボタンに「メニューを開く」というラベルを与えています。
aria-hidden="true" をアイコンに付けることで、アイコン自体はスクリーンリーダーに読み上げさせないようにしています。読み上げさせるのは aria-label で指定した文字列のみです。

画像を装飾として使う場合

HTML

<span aria-label="新着情報">
	<img src="new_icon.png" alt="" />
</span>

画像はデコレーション目的であり、実際には alt を空にしてスクリーンリーダーに読み上げさせない（無視してもらう）パターン。
その代わりに span 要素に aria-label を付与して、読み上げるテキストを指定しています。

ラベル付きテキストフィールド（あまり推奨されないパターン）

HTML

<input type="text" aria-label="検索キーワード入力欄" />

label 要素を使わずに、直接 aria-label でテキストフィールドに名称を与えている例です。
本来は label 要素と紐づける（あるいは aria-labelledby を利用する）のが望ましいですが、デザイン上どうしても表示が難しい場合や、動的に生成される UI などで柔軟に制御したい場合などに使われます。

aria-label と関連属性の比較

aria-labelledby との違い

aria-labelledby は「既に存在する要素のテキスト」をラベルとして参照する方法です。
複数の要素が組み合わせてラベルを形成する場合は aria-labelledby が有効です。
一方で aria-label は「直接文字列を指定」します。その要素自体がラベルを内包していない場合は、シンプルに aria-label が便利です。

例: aria-labelledby の使用例

HTML

<label id="searchLabel">検索</label>
<input type="text" aria-labelledby="searchLabel" />

上記の例では、ラベルテキストを明示的に <label> 要素として用意し、その id を aria-labelledby で参照しています。

aria-describedby との違い

aria-describedby は説明文や補足情報を提供するための属性です。
例えば、「この入力欄には半角英数で入力してください」といった注釈を伝えたい場合は aria-describedby を使います。
ラベル（要素の名前付け）とは明確に役割が異なるため、混同しないよう注意が必要です。

例: aria-describedby の使用例

HTML

<input type="text" id="emailField" />
<span id="emailHelp">メールアドレスを半角英数で入力してください。</span>

<script>
	const emailField = document.getElementById('emailField');
	emailField.setAttribute('aria-describedby', 'emailHelp');
</script>

上記のように、aria-describedby で関連付けられたテキスト（ここでは emailHelp）は、スクリーンリーダーが必要に応じて読み上げる「補足的な説明」として扱われます。

ベストプラクティス

可能な限りネイティブ要素の仕組みを優先

<button> とそのラベル、<label> と <input> の組み合わせなど、ネイティブ要素だけで十分に意味が伝わる場合は、それを最優先で利用しましょう。aria-label はあくまで「補完的」な位置づけとして考えるのが基本です。

コンテンツの文脈に即した分かりやすいラベルを

aria-label で指定する文字列は、できるだけ簡潔かつ文脈を踏まえたものにしましょう。ユーザーがスクリーンリーダーで理解しやすい表現が理想です。

例：aria-label="メニューを開く" → 「開く」という動作を明確に
例：aria-label="メールで問い合わせ" → 特に「メールで」と手段を明示すると分かりやすい

視覚上のテキストもある場合は aria-label を重複して使用しない

もし要素内に既にラベル（テキスト）が存在するなら、aria-label は不要なケースも多いです。テキストと aria-label の両方があると、スクリーンリーダーによっては重複して読み上げられる可能性があります。

アイコンフォントを使用する場合の注意

アイコンフォントや SVG を使用している場合、aria-hidden="true" を適切に使って不要な読み上げを防ぎましょう。ボタンやリンク本体で aria-label を指定する、もしくはテキストがあればそちらを読み上げさせるようにします。

トラブルシューティングと注意点

aria-label が効かない場合

要素が非表示（display: none; や visibility: hidden;）だと、支援技術によっては無視されることがあります。
そもそも ARIA に対応していないブラウザや支援技術は少ないですが、古い環境では期待通りに動作しない可能性もゼロではありません。対象ユーザーの環境を考慮しつつテストを行いましょう。