Caution
お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。
aria-label / aria-labelledby / aria-describedby
『aria-label』『aria-labelledby』『aria-describedby』はWAI-ARIAの属性で、スクリーンリーダーなどの支援技術に対して要素の名前（ラベル）や説明を関連付けるために使用します。
構文
<!-- aria-label: 直接テキストで名前を指定 --> <button aria-label="メニューを閉じる">×</button> <!-- aria-labelledby: 別要素のIDで名前を指定 --> <h2 id="section-title">お問い合わせフォーム</h2> <form aria-labelledby="section-title">...</form> <!-- aria-describedby: 補足説明を別要素のIDで指定 --> <input type="password" aria-describedby="pw-hint"> <p id="pw-hint">8文字以上で英数字を含めてください。</p>
属性一覧
| 属性 | 概要 |
|---|---|
| aria-label | 要素の名前（アクセシブルな名前）を文字列で直接指定します。視覚的なラベルがない場合に使用します。 |
| aria-labelledby | ページ内の別要素のIDを指定し、その要素のテキストを名前として使用します。複数のIDをスペース区切りで指定できます。 |
| aria-describedby | 補足説明として参照する要素のIDを指定します。名前（ラベル）ではなく、追加情報の関連付けに使います。 |
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<!-- aria-label: アイコンボタンに名前を付ける -->
<button aria-label="検索">🔍</button>
<!-- aria-labelledby: 見出しをフォームのラベルとして使う -->
<h2 id="login-title">ログイン</h2>
<form aria-labelledby="login-title">
<label for="username">ユーザー名</label>
<input type="text" id="username" name="username"
aria-describedby="username-hint">
<p id="username-hint">半角英数字で入力してください。</p>
<label for="password">パスワード</label>
<input type="password" id="password" name="password">
<button type="submit">ログイン</button>
</form>
</body>
</html>
実行結果
スクリーンリーダーは🔍のボタンを「検索、ボタン」と読み上げます。フォームは「ログイン、フォーム」と案内され、ユーザー名フィールドにフォーカスすると「ユーザー名、テキスト入力、半角英数字で入力してください。」のように補足説明も読み上げます。
<!-- スクリーンリーダーの読み上げイメージ -->
🔍ボタン → 「検索、ボタン」
フォーム → 「ログイン、フォーム」
入力欄 → 「ユーザー名、テキスト入力」
→ （フォーカス時）「半角英数字で入力してください。」
概要
WAI-ARIA（Web Accessibility Initiative – Accessible Rich Internet Applications）は、視覚的な情報が伝わりにくいユーザーに対して、スクリーンリーダーなどの支援技術を通じてコンテンツの意味を伝えるための仕様です。『aria-label』『aria-labelledby』『aria-describedby』は、要素に「名前」と「説明」を関連付けるための中心的な属性です。
『aria-label』と『aria-labelledby』の使い分けとして、ページ内にすでに見出しや説明テキストが存在する場合は『aria-labelledby』でそのIDを参照するのが推奨です。視覚的なラベルが存在しないアイコンボタンや装飾的な要素には『aria-label』で直接テキストを指定します。『aria-label』と『aria-labelledby』を同じ要素に両方指定した場合、『aria-labelledby』が優先されます。
『aria-describedby』は名前（ラベル）ではなく補足情報の関連付けに使います。入力欄の注意書きやエラーメッセージなど、主要な説明の後に補足として読み上げてほしい内容を指定します。なお、通常の『label』要素で対応できる場合は、HTMLネイティブの機能を優先し、ARIAはあくまで補完的に使用してください。
記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。
シェアする