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-hidden="true" で支援技術から隠し、名前付けは行いません。

ARIA 全体像の一部

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

aria-label は画面上には表示されません。いわゆるツールチップ表示を目的とする属性ではない点に注意してください（ツールチップ表示は title やコンポーネント側の仕組みで行います）。

なぜ aria-label が必要か？

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

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

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

なお、デザイン上テキストを見せたくない場合は、aria-label だけでなく「視覚的に非表示にしたテキスト（いわゆる sr-only）」でラベルを提供する方法もあります。チームのガイドラインや実装コストに応じて選択してください。

「視覚的に非表示」の実装では、display: none や visibility: hidden のように要素自体を不可視化すると支援技術からも見えなくなります。スクリーンリーダーに読ませる意図がある場合は、クリッピングやオフスクリーン配置などの sr-only ユーティリティ（要素は DOM に残しつつ視覚的にだけ隠す手法）を用いてください。

スタイル例

CSS

.visually-hidden {
	position:absolute !important;
	width:1px; height:1px;
	padding:0; margin:-1px;
	overflow:hidden; clip:rect(0,0,0,0);
	white-space:nowrap; border:0;
}

/* フォーカス/アクティブ時は可視化して操作中の所在を示す */
.visually-hidden:focus,
.visually-hidden:active {
	position:static !important;
	width:auto; height:auto;
	margin:0;
	overflow:visible; clip:auto;
	white-space:normal; border:0;
}

HTML

<label for="kw" class="visually-hidden">検索</label>
<input id="kw" type="search" placeholder="キーワード">

基本的な使用例

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

HTML

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

ここでは、見た目としてアイコンのみを表示しているボタンに「メニューを開く」というラベルを与えています。

aria-hidden="true" をアイコンに付けることで、アイコン自体はスクリーンリーダーに読み上げさせないようにしています。読み上げさせるのは aria-label で指定した文字列のみです。

トグル動作のボタンでは、ラベルを「メニュー」のように固定し、開閉状態は aria-expanded（または aria-pressed）で示すのが推奨です（下の例を参照）。

画像アイコンに aria-label を使う場合

装飾アイコンを正しく扱うには、目的に応じて以下のパターンを使い分けます。

画像として意味を持たせたい場合

HTML

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

単一の画像で意味を伝えるだけなら、よりシンプルに <img alt="新着情報"> としても構いません。role="img" は複数の画像や背景等をまとめて「1つの画像」として扱いたい場合などに有効です。

なお、role="img" を使う場合は、内側の画像や装飾要素は alt="" かつ aria-hidden="true" にして冗長な名前付けを避けてください。

なお、画像要素（<img>）の名前付けは原則 alt を用い、 aria-label による上書きは例外的なケースに限る方針にすると、実装の一貫性が保てます。

ボタンなど操作可能な要素に付けたい場合

HTML

<button type="button" aria-label="新着情報を開く">
	<img src="new_icon.png" alt="" aria-hidden="true">
</button>
可視テキストを使える場合（推奨）

HTML

<span class="icon" aria-hidden="true">
	<img src="new_icon.png" alt="">
</span>
<span>新着情報</span>
リンクがアイコンのみの場合

HTML

<a href="/contact" aria-label="お問い合わせフォームへ">
	<svg aria-hidden="true" width="20" height="20">…</svg>
</a>

リンク先の意味をボタン同様にリンク要素自身へ付けるのが基本です。内側のアイコンは aria-hidden="true" として冗長な読み上げを避けます。

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

HTML

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

label 要素を使わずに、直接 aria-label でテキストフィールドに名称を与えている例です。

本来は label 要素と紐づける（あるいは aria-labelledby を利用する）のが望ましいですが、デザイン上どうしても表示が難しい場合や、動的に生成される UI などで柔軟に制御したい場合などに使われます。

検索用途であれば type="search" を選ぶと、OSや支援技術の最適化（例：クリアボタン、検索想定の IME 挙動など）が期待できます。

aria-label と関連属性の比較

aria-labelledby との違い

aria-labelledby は「既に存在する要素のテキスト」をラベルとして参照する方法です。

複数の要素が組み合わせてラベルを形成する場合は aria-labelledby が有効です。

一方で aria-label は「直接文字列を指定」します。その要素自体がラベルを内包していない場合は、シンプルに aria-label が便利です。

基本形：label for で関連付け

HTML

<label for="searchInput">検索</label>
<input id="searchInput" type="text">

補完例：可視テキストが「別要素」のときに aria-labelledby

HTML

<h5 id="searchHeading">検索</h5>
<input type="text" aria-labelledby="searchHeading">

aria-describedby との違い

aria-describedby は説明文や補足情報を提供するための属性です。

例えば、「この入力欄には半角英数で入力してください」といった注釈を伝えたい場合は aria-describedby を使います。

ラベル（要素の名前付け）とは明確に役割が異なるため、混同しないよう注意が必要です。

例: aria-describedby の使用例

HTML

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

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

複数の説明を参照したい場合は aria-describedby に id を 半角スペース 区切りで並べられます（例：aria-describedby="emailHelp passwordPolicy"）。

ベストプラクティス

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

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

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

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

可視テキストがある場合は aria-label で上書きしない

既に可視テキストがある要素に aria-label を付けると、支援技術では可視テキストを無視し、aria-label の内容で名前を置き換えます。その結果、画面に表示されているテキストが読み上げられなくなる場合があります。

可視テキストがあるときは aria-label を使わず、そのまま可視テキストをラベルとして利用してください。

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

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

なお、可視テキストがある場合に aria-label を付けると可視テキストによる名前付けを上書きします。可視テキストが使えるなら aria-label は付けない方針を徹底しましょう。

「開く/閉じる」などトグル動作のボタンでは、aria-label を毎回書き換えるよりも、ラベルは「メニュー」のように固定し、開閉状態は aria-expanded（または aria-pressed）で伝える方が一貫して分かりやすくなります。

HTML

<button type="button" aria-label="メニュー" aria-expanded="false" aria-controls="globalNav">
	<svg aria-hidden="true" width="24" height="24">…</svg>
</button>
<nav id="globalNav">…</nav>

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

aria-label が効かない場合

要素が非表示（display: none; や visibility: hidden;）だと、支援技術によっては無視されることがあります。

そもそも ARIA に対応していないブラウザや支援技術は少ないですが、古い環境では期待通りに動作しない可能性もゼロではありません。対象ユーザーの環境を考慮しつつテストを行いましょう。

非インタラクティブ要素に aria-label だけを付けても文脈上読み上げられない場合があります。必要に応じて適切な role を与える、またはフォーカス可能な親要素（ボタンやリンクなど）側にラベルを付与してください。

タイトル属性との衝突

アクセシブルネームの計算では、一般に aria-label が title より優先されます。 ただし、支援技術やブラウザの実装差により表示順・読み上げ方が異なる場合があるため、役割の重複や二重説明には注意し、必要に応じて実機テストを行ってください。

国際化・多言語対応

aria-label で指定する文字列は、翻訳・多言語対応が必要なサイトの場合に注意が必要です。システムによっては、テキストがハードコーディングされていると翻訳を見落としやすいので、テンプレートや辞書ファイルと連携して管理するなどの工夫をしましょう。

実務で役立つユースケース

ランドマーク要素を区別する

<nav> や <form> など、同じランドマークが複数ある場合は aria-label で区別名を付けるとユーザーが移動しやすくなります。

HTML

<nav aria-label="グローバル">…</nav>
<nav aria-label="フッターメニュー">…</nav>
<form aria-label="サイト内検索">…</form>

なお、ランドマークの近くに可視の見出しがある場合は、その見出しの id を参照して aria-labelledby を使うと、可視テキストをそのまま名前として再利用できます。

HTML

<h2 id="globalNavHeading">グローバルナビゲーション</h2>
<nav aria-labelledby="globalNavHeading">…</nav>

可視の見出しが近くにある場合は aria-labelledby、見出しを置けない（置かない）場合は aria-label を使う、という方針で統一すると迷いにくくなります。

入力欄と aria-label の使い分け

入力欄には原則として <label> 要素を使い、関連付けます。

placeholder 属性はラベルの代わりにはならないので注意してください。

なお、見出しやラベルの可視テキストが既にある場合は、その要素の id を使って aria-labelledby で参照するのがベターです（可視テキストをそのまま名前として再利用できます）。

HTML

<label for="kw">検索</label>
<input id="kw" type="search" placeholder="キーワード">

名前付けの優先順位

要素のアクセシブルネームは概ね次の優先順位で決まります：

たとえば、同じ要素に aria-labelledby と aria-label を同時に指定した場合は、aria-labelledby が優先されます（aria-label は無視されます）。

複数が競合した場合は上位が優先されます。たとえば title と aria-label が両方ある場合、aria-label が使われます。

多言語サイトでの aria-label

aria-label の値は、対象要素が属する言語コンテキスト（lang 属性）に合わせて記述してください。

例えば英語ページでは英語、フランス語ページではフランス語で指定するのが望ましいです。

ページ全体の言語（html lang）と異なる表記を要素単位で用いる場合は、その要素に lang を付け、aria-label の言語も揃えます。

HTML

<button type="button" lang="en" aria-label="Open menu">
	<svg aria-hidden="true" width="24" height="24">…</svg>
</button>