HTML

The aria-labelledby attribute in HTML references another element as “use this element as a label,” ensuring screen readers and other assistive technologies recognize the correct label.

aria-labelledby 属性

はじめに

近年の Web 制作では、アクセシビリティ（Accessibility）への配慮がますます重要視されるようになりました。誰でも快適にウェブを利用できるようにすることは、Web デザイナーや開発者にとって欠かせない要素です。そこで登場するのが、WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）の仕組みです。HTML だけでは十分に伝わらない要素の意味を、支援技術（スクリーンリーダーなど）に正しく伝えるための手段として、ARIA 属性が用意されています。

aria-labelledby とは？

ARIA 属性の基本的な目的

WAI-ARIA の属性は、HTML 要素が持つセマンティクス（意味や役割）を、支援技術やブラウザに向けて補足的に伝えるために使用されます。role や aria-* 属性を適切に設定することで、スクリーンリーダーなどを利用するユーザーにも、要素の用途や状態などが正しく理解されやすくなります。

aria-labelledby の概要

aria-labelledby は、その要素のラベル（名称・タイトルなど）に相当するものがどこにあるかを示す属性です。HTML における label 要素や、aria-label 属性が持つ機能と似ていますが、aria-labelledby は「自分が参照する別の要素」をラベルとして使用する点が特徴的です。

たとえば、ある要素（ボタンやセクション、ダイアログなど）に対して、「ラベルとして機能する要素の ID」を指定することで、スクリーンリーダーなどはそのラベル文字列を読み上げることができます。

aria-labelledby と似た属性との比較

aria-label との違い

aria-label
要素自身に直接テキストを指定してラベルとして扱わせる仕組みです。
例：<button aria-label="送信ボタン"></button>
aria-labelledby
要素外部にあるテキスト要素などを参照し、その内容をラベルとして扱わせる仕組みです。
例：<button aria-labelledby="submit-label"></button> として、別の要素に id="submit-label" を指定し、そのテキストを読み上げるようにする。

aria-label は簡単に書ける反面、コンテンツ内に表示されないラベルとなるため、ユーザーが視覚的に確認しづらい場合があります。いっぽう aria-labelledby を使用する場合は、既にページ内で視覚表示されているテキストを利用でき、画面を見ているユーザーとスクリーンリーダーを使っているユーザーとの情報がより整合する点でメリットがあります。

HTML の label 要素との違い

input 要素や select 要素に対しては、通常は label 要素を使用することでラベルを関連付けます。for 属性と id を対応付けるやり方ですね。たとえば、

HTML

<label for="username">ユーザー名</label>
<input id="username" type="text" name="username">

このように書けば、スクリーンリーダーは input にフォーカスが当たったとき「ユーザー名」と読み上げます。ただし、場合によっては label を使いづらいシーンもあり、そういうときに aria-labelledby が威力を発揮します。

また、label 要素は通常フォーム要素に限られるのに対して、aria-labelledby は任意の要素に適用可能という利点もあります。

基本的な使い方と具体例

基本形

HTML

<div id="dialog1" role="dialog" aria-labelledby="dialog1-title">
	<h2 id="dialog1-title">利用規約の確認</h2>
	<p>ここに利用規約の本文が入ります...</p>
</div>

role="dialog" : この要素がダイアログであることを支援技術に伝えます。

aria-labelledby="dialog1-title" : このダイアログは、id="dialog1-title" を持つ要素をラベルとして読み上げるよう指示しています。

h2 要素に id="dialog1-title" を付与することで、テキスト「利用規約の確認」がダイアログのラベルとして認識されます。

これにより、スクリーンリーダーがダイアログへフォーカスを移した際、「ダイアログ、利用規約の確認」といった形で読み上げられます。

ボタンの例

HTML

<p id="download-button-label">ダウンロードする</p>
<button aria-labelledby="download-button-label" aria-describedby="download-desc">
	<span>ダウンロード</span>
</button>
<p id="download-desc">このボタンを押すとファイルのダウンロードが開始されます</p>

button 要素本来のボタンラベルは span タグ内のテキスト「ダウンロード」ですが、より正確なラベルとして id="download-button-label" が示す「ダウンロードする」という文言を参照します。

さらに aria-describedby を使うことで、より詳しい説明を提供するテキストも同時に読み上げられるようにしています。

こうすることで、視覚的には「ダウンロードボタン」の文字がボタン本体にも描画されていますが、支援技術に対しては、よりリッチな文言や補足説明をまとめて読み上げさせる設定が可能となります。

より高度な活用例

複数の要素をまとめてラベルにする

aria-labelledby の値に複数の ID を半角スペース区切りで並べることができます。これにより、複数の要素を合成して一つのラベルとしてスクリーンリーダーに伝えることができます。

HTML

<section id="profile" aria-labelledby="profile-name profile-position">
	<h2 id="profile-name">山田太郎</h2>
	<h3 id="profile-position">フロントエンドエンジニア</h3>
	<p>WebアプリケーションやUI設計を中心に担当しています。</p>
</section>

aria-labelledby="profile-name profile-position" : #profile セクションのラベル（名前）として、「山田太郎」と「フロントエンドエンジニア」の2つのテキストを結合して認識させます。

スクリーンリーダーは「セクション、山田太郎、フロントエンドエンジニア」と読み上げるため、利用者は「どんなコンテンツか」が簡潔に把握しやすくなります。

ランドマークとの併用

ARIA にはページ構造を明確にするためのランドマークロール（role="banner", role="navigation", role="main" など）も存在します。これらと aria-labelledby を併用すると、さらに構造がクリアになります。たとえば、

HTML

<header id="site-header" role="banner" aria-labelledby="site-title site-subtitle">
	<h1 id="site-title">サイト名</h1>
	<p id="site-subtitle">ここは素敵なコンテンツを紹介するサイトです</p>
</header>

role="banner" : この要素がページヘッダー（バナー）であることを伝えます。

aria-labelledby="site-title site-subtitle" : ヘッダーのラベルとしてサイトタイトルとサブタイトルの両方を使用します。

これにより、スクリーンリーダー利用者はヘッダー要素にジャンプした際、ページが何のサイトなのかをすぐに理解できます。

注意点・よくあるミス

aria-labelledby は参照先の要素が必須

aria-labelledby 属性に指定する ID は、実際に文書内でユニークかつ存在している必要があります。存在しない ID を参照すると、意図したラベルとして認識されず、かえって混乱を招く可能性があります。

コンテンツの重複

aria-labelledby の参照先要素内に同じ文言が重複している場合、スクリーンリーダーがそのテキストを何度も読み上げることがあります。過剰なラベルや説明文がないかチェックしましょう。

非表示の要素を参照している場合

スクリーンリーダーの読み上げ順序や動作は、要素の表示・非表示状態や、CSS での clip あるいは display: none; の扱いなどとも影響し合います。誤って display: none; などで完全に隠している要素をラベルとして参照すると、支援技術によってはラベルが読まれない場合もあります。アクセシビリティ支援を想定している場合は、完全に画面から消える形ではなく、スクリーンリーダーが利用可能なステルス的手法（visibility: hidden; width: 0; height: 0; overflow: hidden; など特定のテクニック）を用いて可視化を制御するケースがあります。ただし、実装によっては混乱しやすいので、なるべく可視テキストをラベルに使うのが好ましいです。

ラベルテキストがわかりにくい

どんなに ARIA の構文が正しくても、ラベルとなるテキストがユーザーにとって分かりにくい表現の場合、アクセシビリティの本来の目的を果たせません。ラベルの選定が重要であり、常にユーザー視点で「この要素は何をするためのものなのか」を明確に示す表現を心がけましょう。

aria-labelledby が有効なケースまとめ

HTML ラベルが使えない要素の場合
フォーム要素以外でもラベルを提供したい場合、aria-labelledby は強力な手段になります。
複数の要素を一つのラベルにまとめたい場合
タイトルやサブタイトルを組み合わせて内容を明確にするなど。
ビジュアル上にラベルテキストが既に存在する場合
画面上には文字があるが、そのままではスクリーンリーダーが正しく関連付けてくれないときに、aria-labelledby で明示的に繋げる。
動的コンポーネント（ダイアログやモーダル）
ダイアログの見出しテキストをラベルとして紐づけるのに有用。

まとめ

aria-labelledby は、画面上に存在する別の要素をラベルとして関連付けるための重要な ARIA 属性です。ユーザーに見えているテキストをスクリーンリーダーにも同じように知らせることができるため、アクセシビリティを向上させる上で非常に有用です。aria-label や HTML の label 要素との違いを正しく把握し、ケースに応じて組み合わせることで、より包括的で使いやすいインターフェイスを実現できます。

初心者へのアドバイス

まずはフォーム要素やボタンなど、ユーザーインタラクションがある部分から使い始めると効果を感じやすいでしょう。

シンプルな例を一つ作り、スクリーンリーダー（PC なら NVDA や JAWS、Mac なら VoiceOver など）で実際に読み上げを確認しながら学ぶと実感が得られます。

中級者以上へのアドバイス

大規模なサイトやアプリケーションでセクション構造を明確に示す際、aria-labelledby とランドマークを組み合わせることで、バリアフリーかつ論理的なナビゲーションを整備しやすくなります。

ラベルや説明、役割などが複雑に絡むコンポーネント（例：UI ライブラリやフレームワークを使ったモーダルなど）において、どのテキストをどのように読み上げさせるかがキモになります。開発段階で綿密に確認し、ユーザーの利用シナリオを想定したテストを行いましょう。

最後に

aria-labelledby を正しく使いこなすことで、支援技術を必要とするユーザーに正確かつ使いやすいインターフェイスを提供できます。アクセシビリティは特別な機能を付け足すものではなく、誰にとっても使いやすいデザインを目指す上で欠かせない基本的な要素です。ぜひ積極的に取り入れて、より多くの人が利用できる素晴らしいウェブ体験を提供していきましょう。