WCAG 2.2の達成基準「1.3.5 入力目的の特定」は、利用者自身の情報を集める入力欄の目的を、ソフトウェアが判別できるようにするLevel AAの基準です。
HTMLでは、入力欄に適切なautocomplete属性を設定する方法が代表的です。
対象になるのは、名前やメールアドレスなど、定められた入力目的に該当する項目です。
すべてのフォーム項目へ機械的にautocompleteを付ける基準ではありません。
この記事では、対象の見分け方から実装、確認までを順に整理します。
WCAG 2.2全体を先に確認したい場合は、WCAG 2.2の概要と実務での考え方も参照してください。
達成基準1.3.5が求めること
入力目的とは、その欄へ何を入力するのかという意味です。
「テキストを入力する欄」という形式ではなく、「利用者の氏名」「利用者のメールアドレス」「利用者の郵便番号」のような意味を指します。
プログラムによる特定とは、ブラウザや支援技術がHTMLなどのコードから意味を取得し、必要に応じて利用者へ提示できる状態です。
画面に「メールアドレス」と表示するだけでなく、コードにも共通の意味を持たせます。
WCAG 2.2の達成基準1.3.5では、次の両方に当てはまる入力欄の目的をプログラムで特定できるようにします。
- 利用者自身に関する情報を収集する入力欄である
- WCAGの「ユーザインターフェース要素の入力目的」に示された目的に該当する
ここでいう入力欄はinput要素だけを指すものではなく、利用者が値を入力または選択するtextareaやselectなども含む考え方です。
一方、利用者以外の人物に関する情報を入力する欄は、この達成基準の対象外になる場合があります。
label、type、autocompleteの役割
label、type、autocompleteは、どれか一つを選ぶものではありません。
それぞれが別の情報を伝えるため、目的に応じて組み合わせます。
| 指定 | 主な役割 | 例 |
|---|---|---|
label |
利用者に入力内容を伝え、入力欄と説明を関連付ける | 「メールアドレス」 |
type |
入力値の大まかな種類や入力方法を示す | type="email" |
autocomplete |
利用者に関する入力情報の具体的な意味を共通のトークンで示す | autocomplete="email" |
type="email"だけでは、その欄が利用者本人のメールアドレス用なのか、別の人物のメールアドレス用なのかまでは区別できません。
autocomplete="email"を加えることで、利用者本人のメールアドレスという目的を示せます。
labelの関連付けも欠かせませんが、ラベルだけで達成基準1.3.5を満たすとは限りません。
フォーム全体のラベル、エラー通知、入力支援を確認する場合は、WCAG 2.2に沿ったフォームの入力支援とエラー設計も確認してください。
autocomplete属性の基本的な実装
HTMLでは、入力内容と一致するautocompleteのトークンを各フォームコントロールへ指定します。
W3CもH98「HTMLのautocomplete属性を使用する」を十分な達成方法の一つとして挙げています。
氏名、メールアドレス、電話番号の例
<form>
<div>
<label for="full-name">氏名</label>
<input
type="text"
id="full-name"
name="full-name"
autocomplete="name">
</div>
<div>
<label for="email">メールアドレス</label>
<input
type="email"
id="email"
name="email"
autocomplete="email">
</div>
<div>
<label for="tel">電話番号</label>
<input
type="tel"
id="tel"
name="tel"
autocomplete="tel">
</div>
</form>labelのforと入力欄のidを同じ値にして、表示上の説明とフォームコントロールを関連付けています。
そのうえで、autocompleteに定義済みのトークンを設定します。
よく使うautocompleteの値
autocompleteには、独自に作った単語ではなく、仕様で定義された値を使います。
元の入力目的とトークンが一致しているかを確認してください。
| 値 | 入力目的 |
|---|---|
name |
氏名全体 |
given-name |
名 |
family-name |
姓 |
email |
メールアドレス |
tel |
国番号を含む電話番号全体 |
organization |
所属する組織名 |
street-address |
複数行を含む住所 |
postal-code |
郵便番号 |
country |
国または地域のコード |
country-name |
国または地域の名称 |
countryとcountry-nameは意味が異なります。
国名を文字で入力または選択する欄には、country-nameを使います。
住所フォームの例
<form>
<label for="address">住所</label>
<textarea
id="address"
name="address"
autocomplete="street-address"></textarea>
<label for="postal-code">郵便番号</label>
<input
type="text"
id="postal-code"
name="postal-code"
autocomplete="postal-code">
<label for="country-name">国名</label>
<input
type="text"
id="country-name"
name="country-name"
autocomplete="country-name">
</form>請求先と配送先のように同じ種類の情報を複数扱う場合は、billingまたはshippingを組み合わせて区別できます。
たとえば、配送先住所はautocomplete="shipping street-address"と指定します。
よくある失敗と修正方法
| 失敗 | 問題 | 修正 |
|---|---|---|
対象欄にautocompleteがない |
HTMLでこの達成方法を採る場合、入力目的を共通の意味として取得できない | 入力目的に合う定義済みトークンを付ける |
fullnameやmailを使う |
仕様にない値なので目的を正しく解釈できない | nameやemailへ直す |
| ラベルとトークンが一致しない | 表示上の説明とコード上の意味が食い違う | ラベルが示す目的と同じトークンを選ぶ |
国名欄にcountryを使う |
countryは国または地域のコードを表す |
国名欄にはcountry-nameを使う |
| ラベルだけで対応を終える | 表示名は伝わっても、定義済みの入力目的として取得できるとは限らない | ラベルの関連付けと入力目的の指定を別々に確認する |
不正な値を付けたままにすると、正しい値がない場合より誤解を招く可能性があります。
推測でトークンを作らず、WCAG 2.2の入力目的一覧と照合します。
実装後の確認手順
- 利用者自身の情報を収集する入力欄を洗い出す
- 各項目がWCAGの入力目的一覧に含まれるか確認する
- ラベルの意味と
autocompleteの値が一致しているか確認する - 独自の値や綴り間違いがないか確認する
labelのforと入力欄のidが対応しているか確認する- ブラウザの自動入力や支援技術を使い、実際のフォーム操作も確認する
自動入力の表示や動作は、ブラウザ、保存済みデータ、利用者の設定によって変わります。
自動入力されたかどうかだけで適合を判断せず、コード上の値と入力目的の対応も確認します。
支援技術も、環境によって入力目的の提示方法が異なります。
autocompleteを付ければ、すべてのスクリーンリーダーが同じ言葉を必ず読み上げるという意味ではありません。
スクリーンリーダーがフォームのラベルや構造をどのように扱うかは、スクリーンリーダーの仕組みとWeb実装の基本で解説しています。
入力目的を特定する効果
入力目的を共通のトークンで示すと、対応するブラウザや支援技術がその意味を利用できます。
利用環境によっては、自動入力、入力欄へのアイコン追加、利用者に分かりやすい表現への置き換えなどにつながります。
- 同じ個人情報を繰り返し入力する負担を減らせる
- 記憶に頼る場面や入力ミスを減らしやすくなる
- 文字のラベルだけでは目的を理解しにくい利用者へ、別の提示方法を提供できる
達成基準1.3.5への対応は、autocompleteを一括で追加する作業ではありません。
対象となる入力欄を見分け、表示ラベル、入力形式、入力目的を一致させることが実装の軸になります。
当社では、ウェブアクセシビリティを導入しやすくするUUU ウェブアクセシビリティを提供しています。
アクセシビリティ改善を検討している方は、サービスの詳細もご覧ください。