インタラクティブ要素に名前を付ける

インタラクティブ要素（入力フィールド、ボタン、セレクトボックスなど）には、目的をユーザーに明確に伝える名前が必須です。名前がない、または不明確な要素は、スクリーンリーダー利用者や音声アシスタント利用者に大きな不便を与えます。

インタラクティブ要素の一覧

要素	条件
<a>	-
<audio>	controls属性がある場合
<button>	-
<details>	-
<embed>	-
<iframe>	-
<img>	usemap属性がある場合
<input>	type属性が"hidden"でない場合
<keygen>	-
<label>	-
<menu>	type属性がtoolbarの場合
<object>	usemap属性がある場合
<select>	-
<textarea>	-
<video>	controls属性がある場合

インタラクティブ要素に名前を与える方法はいくつかあります。スクリーンリーダーは次の優先順位で名前を取得します。:

1. aria-labelledby - スクリーンリーダーが最優先で読む属性
2. aria-label - aria-labelledbyがない場合に読む属性
3. <label> - ARIA属性がない場合に読むHTMLのラベル
4. placeholder - ラベルがない場合に読むことがあるが、ラベルの代用としては非推奨
5. 요소의 내용 - 上記がすべてない場合（ボタン内のテキストなど）

問題：入力フィールドに名前がなく、用途を把握できない

デザイン上の理由や簡潔さのために入力フィールドのラベルを省略することがありますが、これはアクセシビリティの観点で重大な問題を引き起こします。

誤った例 1

次の入力フィールドは何の情報も提供しないため、すべてのユーザーを混乱させます。スクリーンリーダー利用者はこのフィールドが何であるかまったく分かりません。視覚ユーザーも、何を入力すべきか判断できません。

<input type="text" />

誤った例 2

次の入力フィールドは、見た目にはプレースホルダーで目的を示し、技術的には動作しますが、アクセシビリティの観点では不十分です。

まず、一部の旧式スクリーンリーダーはプレースホルダーを認識しません。ユーザーが入力を始めるとプレースホルダーは消えるため、フィールドの目的を忘れてしまう可能性があります。さらに、プレースホルダーのテキストは一般にコントラストが低く、弱視のユーザーには読みにくいことが多いです。

<input type="text" placeholder="名前を入力してください" />

✅ 改善方法

1. <label>要素を使う

HTMLでは、<label>要素を使って入力フィールドと関連付けるのが最善です。

<label for="user-name">名前</label> <input id="user-name" type="text" />

ラベルの利点は多くあります。

まず、スクリーンリーダー利用者に入力フィールドの目的を明確に伝えます。さらに、ラベルをクリックしても関連付けられた入力フィールドにフォーカスが移るため、タッチインターフェースで特に有用です。入力中でも常に表示されるため、ユーザーはフィールドの目的を忘れにくくなります。あらゆるユーザーに最も明確な体験を提供できる方法です。

2. aria-label属性を使う

デザイン上の制約で視覚的なラベルを表示できない場合は、次のようにaria-label属性を使用できます。

<input type="text" aria-label="名前" placeholder="名前を入力してください" />

aria-labelは視覚的には表示されませんが、スクリーンリーダーでは要素の名前として読み上げられます。デザイン上ラベルを出せないときの次善策としてのみ使用してください。

3. aria-labelledby属性を使う

画面上に既にテキストがあり、それを入力フィールドのラベルとして使いたいときは、aria-labelledbyを使用できます。

<h2 id="address-heading">配送先住所</h2>

<input
  type="text"
  aria-labelledby="address-heading"
  placeholder="例：ソウル市 江南区"
/>

さらに詳しく

その他のインタラクティブ要素にも名前を付ける

入力フィールド以外でも、すべてのインタラクティブ要素には明確な名前が必要です。

ボタン(<button>)

<!-- ✅ 正しい例：明確なテキスト -->
<button>会員登録</button>

<!-- ⚠️ 改善が必要な例：視覚アイコンだけのボタン -->
<button>
  <svg aria-hidden="true">...</svg>
</button>

<!-- ✅ 正しい例：アイコンボタンにアクセシビリティを追加 -->
<button aria-label="閉じる">
  <svg aria-hidden="true">...</svg>
</button>

セレクト要素(<select>)

<!-- ✅ 正しい例：ラベルがあるセレクトボックス -->
<label for="country">国を選択</label>
<select id="country">
  <option value="kr">韓国</option>
  <option value="us">米国</option>
</select>

<!-- ❌ 誤った例：ラベルがないセレクトボックス -->
<select>
  <option value="kr">韓国</option>
  <option value="us">米国</option>
</select>

プレースホルダーの正しい使い方

プレースホルダーだけではアクセシビリティを担保できません。プレースホルダーはラベルの代替ではなく補助であることを忘れないでください。入力形式に関するヒントを与える目的で使うのが適切です。

❌ 誤った例：プレースホルダーのみを使用

<input type="email" placeholder="メールアドレス" />

✅ 正しい例：ラベルとプレースホルダーを併用

<label for="email">メールアドレス</label>
<input id="email" type="email" placeholder="example@email.com" />