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>

<!-- alt属性を持つ画像 -->
<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

説明を直接提供します（新しい属性、サポートは限定的）：

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

よくある間違い

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

<!-- 悪い例: アクセシブルな名前がない -->
<button><svg>...</svg></button>

<!-- 悪い例: 冗長 - 「ボタン ボタン」と読み上げられる -->
<button>ボタン</button>

<!-- 良い例: 説明的な名前 -->
<button aria-label="カートに追加">
  <svg aria-hidden="true">...</svg>
</button>

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

<!-- 悪い例: プレースホルダーは消えてしまう -->
<input type="text" placeholder="メールアドレス" />

<!-- 良い例: 永続的なラベル -->
<label for="email">メールアドレス</label>
<input type="text" id="email" placeholder="you@example.com" />

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

<!-- 悪い例: 非インタラクティブ要素に aria-label -->
<p aria-label="重要">これは段落です</p>

<!-- 良い例: 段落はコンテンツがアクセシブルな名前になる -->
<p>これは段落です</p>

実装のポイント

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

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

  1. aria-labelledby（最高優先）
  2. aria-label
  3. ネイティブHTML（label、alt、ボタンテキストなど）
  4. title 属性（最低優先、アクセシビリティには避ける）

名前をテストする

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

リソース