· 開発

aria-labelとaria-labelledbyを両方付けたら、どちらが読まれる？

アクセシブルネームは決まった順序で計算されます。aria-labelledby、aria-label、label、placeholderの優先順位とよくある誤りをW3C文書で確認します。

開発アクセシビリティ

画面には「検索」と書かれているのに、スクリーンリーダーは「サイト内を探す、ボタン」と読み上げます。マークアップに aria-label="サイト内を探す" があるからです。ブラウザの不具合ではなく、アクセシブルネーム（accessible name）を計算した結果です。

名前は決まった順序で決まる

W3CのAccessible Name and Description Computation（AccName）1.2は、4.3.2節で名前の計算手順を定めています。細かな分岐は要素やロールによって異なりますが、開発時によく出会う順序は次のとおりです。

  1. aria-labelledby が参照する要素のテキスト
  2. 空ではない aria-label
  3. <label> や alt など、HTML本来の命名手段
  4. ボタンやリンクなど、内容から名前を得るロールの子テキスト
  5. title などのツールチップ属性

前の段階で名前が得られると、後ろの候補が自動で追加されるわけではありません。<label for> と関連付けた入力欄に aria-label を付けると、見えている <label> の文字がアクセシブルネームから外れることがあります。HTML-AAMのテキスト入力規則では、placeholder は title よりも後です。placeholderをラベルの代わりにできない理由の一つです。

aria-labelledbyは参照順に連結する

aria-labelledby には複数のIDを空白で並べられます。各参照から計算したテキストは、その順に連結されます。AccNameの例を短くすると次のようになります。

<a id="file1" href="/files/a.pdf">a.pdf</a>
<span role="button" tabindex="0" id="del1"
      aria-label="削除" aria-labelledby="del1 file1"></span>

ボタンは最初に自分自身を参照します。その走査中は同じ aria-labelledby をもう一度たどらず、aria-label から「削除」を得ます。続いてファイル名が加わり、名前は「削除 a.pdf」になります。

見落としやすい規則が二つあります。hidden や display: none で隠した要素でも、aria-labelledby が直接参照していれば名前のテキストに使われることがあります。また、参照は際限なく再帰しません。AがBを、BがCを参照していても、Aの名前を計算するときにBの aria-labelledby はたどられません。

どちらを使うか

WAI-ARIA 1.2は、ラベルのテキストがDOMにある場合、aria-labelledby を使い、aria-label は使わないことを勧めています（SHOULD / SHOULD NOT）。フォームコントロールでは、ARIAより先に <label for> などHTML本来の方法を検討します。ARIA Authoring Practices Guide（APG）も、見えるテキストとHTML固有の仕組みを優先するよう説明しています。<label> はクリックすると対応するコントロールを操作できますが、aria-labelledby が参照した通常の要素にその動作は加わりません。

aria-label は、見えるラベルを置きにくいアイコンだけのボタンに向いています。

<button type="button" aria-label="閉じる">
  <svg aria-hidden="true">…</svg>
</button>

見える文字と名前が違うとき

WCAG 2.2の達成基準2.5.3「ラベルを含む名前（Label in Name）」（レベルA）は、テキストラベルのあるユーザーインターフェースコンポーネントのアクセシブルネームに、画面上のテキストを含めることを求めます。音声入力の利用者は見えている言葉を発声して操作するためです。先ほどの「検索」ボタンの名前が「サイト内を探す」だけなら、この基準を満たしません。不要な aria-label を外し、見えている文字を名前にするのが簡単な修正です。解説文書は、見えるラベルを名前の先頭に置くことをベストプラクティスとしています。

aria-label はどの要素にも付けられるわけではありません。HTML-AAMは、別のロールを持たない <div> と <span> を generic ロールに対応付けます。WAI-ARIA 1.2は generic を名前を持てないロールに分類しているため、こうした要素の aria-label は仕様上認められません。

多言語サイトでは翻訳にも注意が必要です。WAI-ARIA 1.2は aria-label を翻訳対象の属性とし、HTML標準も他の仕様が翻訳対象と定めた属性を認識する例として aria-label を挙げています。ただし抽出ツールの対応範囲は一様ではないため、ローカライズ処理がARIA属性値を収集することを確認するか、文字列を翻訳リソースに明示的に含めます。

Chrome DevToolsでは、AccessibilityペインのComputed Propertiesで計算済みの名前を確認できます。ただしAPGは、仕様で禁止または未定義のパターンが一部のブラウザで動いても結果は一貫しない可能性があるため、支援技術でも確認するよう勧めています。

この記事は2026年10月7日に確認した文書に基づきます。AccName 1.2とHTML-AAMはWorking Draftなので、手順名や細部が変わる可能性があります。aria-labelledby が aria-label より優先されるという原則は、W3C勧告のWAI-ARIA 1.2にも記載されています。

参考文書：AccName 1.2、WAI-ARIA 1.2、HTML-AAM、達成基準2.5.3の解説、APG: Providing Accessible Names、HTML Standard: translate、Chrome DevToolsのアクセシビリティリファレンス

ブログへ