HTML

The aria-describedby attribute is an HTML accessibility attribute that associates a specific element with a supplementary description by referencing the id of another element, allowing screen readers to read the description aloud.

aria-describedby 属性

はじめに

aria-describedby 属性は、アクセシビリティを向上させるために使用される HTML の ARIA (Accessible Rich Internet Applications) 属性の一つです。視覚的な説明を補足するためにスクリーンリーダーなどの支援技術と連携し、ユーザーに追加情報を提供する役割を果たします。

aria-describedby の基本

aria-describedby とは？

aria-describedby 属性は、特定の要素が説明のために参照する別の要素の id を指定することで、支援技術にその情報を伝えるための仕組みです。通常、視覚的に補足的な説明を提供する要素 (例: p, span, div など) をスクリーンリーダーで読み上げさせるために使用します。

HTML

<input type="text" id="username" aria-describedby="username-desc">
<p id="username-desc">ユーザー名を半角英数字で入力してください。</p>

ユーザー名を半角英数字で入力してください。

上記の例では、aria-describedby を持つ input 要素 (id="username") に関連付けられた p 要素 (id="username-desc") の内容が、スクリーンリーダーで読み上げられます。

aria-describedby と aria-labelledby の違い

aria-describedby
補足的な説明 (詳細情報やガイド) を提供するために使用
aria-labelledby
要素のラベル (主要な名称) を指定するために使用

例えば、次のように aria-labelledby と aria-describedby を併用することも可能です。

HTML

<label id="email-label">メールアドレス</label>
<input type="email" id="email" aria-labelledby="email-label" aria-describedby="email-desc">
<p id="email-desc">有効なメールアドレスを入力してください。</p>

有効なメールアドレスを入力してください。

この場合、スクリーンリーダーは以下の順で読み上げます。

  1. aria-labelledby に指定された email-label のテキスト (「メールアドレス」)
  2. aria-describedby に指定された email-desc のテキスト (「有効なメールアドレスを入力してください。」)

aria-describedby の応用

フォームのエラーメッセージへの活用

ユーザーが無効な入力を行った際、適切なエラーメッセージを伝えるために aria-describedby を利用できます。

HTML

<label for="password">パスワード</label>
<input type="password" id="password" aria-describedby="password-error">
<p id="password-error" style="color: red; display: none;">パスワードは8文字以上で入力してください。</p>
<script>
	document.getElementById('password').addEventListener('input', function() {
		let error = document.getElementById('password-error');
		if (this.value.length < 8) {
			error.style.display = 'block';
		} else {
			error.style.display = 'none';
		}
	});
</script>

視覚的ヒントと併用

マウスオーバー時やフォーカス時にツールチップを表示しつつ、スクリーンリーダーにも説明を提供することができます。

HTML

<button id="info-btn" aria-describedby="tooltip">?</button>
<span id="tooltip" style="display: none;">このボタンを押すと設定メニューが開きます。</span>
<script>
	document.getElementById('info-btn').addEventListener('mouseover', function() {
		document.getElementById('tooltip').style.display = 'inline';
	});
	document.getElementById('info-btn').addEventListener('mouseout', function() {
		document.getElementById('tooltip').style.display = 'none';
	});
</script>

aria-describedby のベストプラクティス

aria-describedby を適切に活用するためのポイント

明確な説明を提供する
文章は簡潔かつ具体的に書く。
動的な更新に注意する
JavaScript で表示・非表示を制御する場合は、スクリーンリーダーに適切に反映されるようにする。
視覚的なラベルと整合性を持たせる
aria-describedby による説明が、UI の他の部分と矛盾しないようにする。

避けるべき誤った使い方

冗長な説明を入れすぎる
長すぎるとユーザーが理解しづらくなる。
適切な ID を設定しない
aria-describedby の値として存在しない ID を指定すると、スクリーンリーダーが適切に読み上げられない。
視覚的に隠している要素の取り扱いに注意
display: none; の要素はスクリーンリーダーに認識されない可能性があるため、aria-hidden="true" を使うか visibility: hidden; にするなどの工夫が必要。

まとめ

aria-describedby は、Web アクセシビリティを向上させるための強力なツールであり、フォームの補足説明、エラーメッセージの提供、ツールチップの説明など、様々な用途で活用できます。

適切に活用することで、視覚障害を持つユーザーやスクリーンリーダーを使用するユーザーにとって、より使いやすい Web サイトを構築できます。開発時には、テストツール (例: VoiceOver, NVDA, JAWS) を用いて正しく動作するか確認しながら実装することが重要です。