APG Patterns
⌘K
English
⌘K
English
🏷️

アクセシブルな名前と説明の提供

要素にアクセシブルな名前を提供し、適切な場合はアクセシブルな説明を提供することは、制作者の最も重要な責任の一つです。

このプラクティスの詳細は Providing Accessible Names and Descriptions - WAI-ARIA APG を参照してください。 以下は、このサイトの実装例に基づく補足解説です。

概要

すべてのインタラクティブな要素には、支援技術がユーザーに読み上げることができる「アクセシブルな名前」が必要です。また、要素によっては追加のコンテキストを提供する「アクセシブルな説明」があると便利です。このプラクティスでは、これらを正しく提供する方法を説明します。

アクセシブルな名前 vs 説明

概念目的読み上げタイミング
アクセシブルな名前要素を識別する主要なラベルフォーカス時、操作時
アクセシブルな説明追加のコンテキストや指示名前の後（設定による）

アクセシブルな名前を提供する方法

1. ネイティブHTMLラベル

最も堅牢なアプローチはネイティブHTMLを使用することです：

<label for="email">メールアドレス</label>
<input type="email" id="email" />

<button type="submit">メッセージを送信</button>

<a href="/about">私たちについて</a>

<img src="logo.png" alt="会社のロゴ" />

2. aria-label

可視テキストがない要素には aria-label を使用します：

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

<search aria-label="サイト内検索">...</search>

3. aria-labelledby

既存の可視テキストを参照します：

<h2 id="billing-title">請求先住所</h2>
<section aria-labelledby="billing-title">...</section>

アクセシブルな説明を提供する方法

aria-describedby

説明テキストを含む要素にリンクします：

<label for="password">パスワード</label>
<input type="password" id="password" aria-describedby="pwd-hint" />
<p id="pwd-hint">8文字以上で、1つ以上の数字を含める必要があります</p>

aria-description

説明を直接提供します（新しい属性のため、ブラウザと支援技術の組み合わせで挙動差があり得ます。可能なら aria-describedby を優先）：

<button aria-description="新しいウィンドウで開きます">外部リンク</button>

よくある間違い

空の名前または冗長な名前

<button><svg>...</svg></button>
悪い例: アクセシブルな名前がないため、スクリーンリーダーがボタンの目的を読み上げられません。
<img src="hero.jpg" alt="画像" />
悪い例: 冗長 — ロールは自動的に伝えられるため「画像 画像」と読み上げられます。
<img src="hero.jpg" alt="夕焼けに染まる東京タワー" />
良い例: 画像の内容を具体的に説明する名前です。

プレースホルダーをラベルとして使用

<input type="text" placeholder="メールアドレス" />
悪い例: プレースホルダーは入力を開始すると消えてしまい、可視ラベルがなくなります。
<label for="email">メールアドレス</label>
<input type="text" id="email" placeholder="you@example.com" />
良い例: 入力中も表示され続ける永続的なラベルです。

ネイティブセマンティクスの上書き

<p aria-label="重要">これは段落です</p>
悪い例: 非インタラクティブ要素に aria-label — 段落はアクセシブルな名前の計算で aria-label の対象外のため、「重要」は無視され「これは段落です」がそのまま読み上げられます。
<p><strong>重要:</strong> これは段落です</p>
良い例: 強調したい情報はテキストコンテンツとして含め、段落のテキストがそのままアクセシブルなコンテンツになります。

実装のポイント

名前の優先順位（アクセシブルな名前の計算）

複数の命名方法が存在する場合、ブラウザは以下の優先順位を使用します：

  1. aria-labelledby（最優先）
  2. aria-label
  3. ネイティブHTML（label、alt、ボタンテキストなど）
  4. title 属性（本来の目的が名前付けではないため、アクセシブルな名前として質が低くなりがち。できる限り避ける）

名前をテストする

  1. ブラウザの開発者ツールのアクセシビリティインスペクタを使用する
  2. スクリーンリーダーでナビゲートする
  3. 名前が以下を満たしているか確認する：
    • コンテキスト内で一意である
    • 説明的だが簡潔である
    • 適切にローカライズされている

リソース