aria-label / aria-labelledby / aria-describedby

対応:		WAI-ARIA 1.1（2017）

『aria-label』『aria-labelledby』『aria-describedby』はWAI-ARIAの属性で、スクリーンリーダーなどの支援技術に対して要素の名前（ラベル）や説明を関連付けるために使用します。WAI-ARIA（Web Accessibility Initiative - Accessible Rich Internet Applications）はウェブコンテンツのアクセシビリティを向上させるための仕様です。

構文

<!-- 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を指定します。名前（ラベル）ではなく、追加情報の関連付けに使います。

サンプルコード

sample_aria_label.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
</head>
<body style="margin: 20px;">

  <!-- aria-label: アイコンボタンに名前を付ける -->
  <button aria-label="検索">🔍</button>
  <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>

  <!-- aria-label: 複数のナビゲーションを区別する -->
  <nav aria-label="メインナビゲーション">
    <ul>
      <li><a href="/">トップ</a></li>
      <li><a href="/about">会社概要</a></li>
    </ul>
  </nav>

  <nav aria-label="フッターナビゲーション">
    <ul>
      <li><a href="/privacy">プライバシーポリシー</a></li>
      <li><a href="/terms">利用規約</a></li>
    </ul>
  </nav>

  <!-- aria-labelledby: 複数IDを組み合わせてラベルを合成する -->
  <span id="qty-label">数量</span>
  <span id="item-name">（鉄のフライパン）</span>
  <input type="number" aria-labelledby="qty-label item-name" min="1">
  <!-- スクリーンリーダーは「数量（鉄のフライパン）」と読み上げる -->

</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はあくまで補完的に使用してください。

WAI-ARIAの実践パターン

『aria-label』系の属性は、次のパターンで使うことがほとんどです。

パターン	使う属性	使用例
アイコンボタン（テキストなし）	aria-label	検索ボタン（虫眼鏡アイコン）に「検索」という名前を付ける
同じ種類の複数ナビゲーション	aria-label	ヘッダーナビとフッターナビを「メインナビ」「フッターナビ」で区別する
見出しをラベルとして使う	aria-labelledby	フォームの上にある見出しをそのままフォームの名前として利用する
入力欄の注意書き・ヒント	aria-describedby	パスワードフィールドの「8文字以上」という説明と関連付ける
エラーメッセージ	aria-describedby	バリデーションエラーのメッセージを入力欄に関連付ける

<!-- エラーメッセージのアクセシブルな実装 -->
<div>
  <label for="email">メールアドレス</label>
  <input type="email" id="email" name="email"
         aria-describedby="email-error"
         aria-invalid="true">
  <!-- role="alert" で動的に追加されたエラーも読み上げられる -->
  <p id="email-error" role="alert">
    有効なメールアドレスを入力してください。
  </p>
</div>

<!-- 閉じるボタンに説明を付ける -->
<dialog aria-labelledby="dialog-title">
  <h2 id="dialog-title">ファイルの削除</h2>
  <p>このファイルを削除してもよいですか？</p>
  <button aria-label="ダイアログを閉じる">×</button>
  <button>削除する</button>
  <button>キャンセル</button>
</dialog>

記事の間違いや著作権の侵害等ございましたらお手数ですがこちらまでご連絡頂ければ幸いです。

トップページへ

HTML辞典