達成基準 1.3.5 の失敗例 - 誤った autocomplete 属性値

達成方法に関する重要な情報

これらの達成方法 (参考) の使用法及び、それらが WCAG 2.1 達成基準 (規定) とどのように関係するかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) セクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法があるからといって、WCAG 2.1 を満たすコンテンツを作成する際に、常にその技術が使用可能であるわけではない。

適用 (対象)

この達成方法は、フォーム利用者の情報を集める HTML で作られた入力フィールドに適応される。

これは、達成基準 1.3.5: 入力目的の特定(十分)に関連する達成方法である。

解説

この達成方法の目的は、フォームの利用者に関する情報を要求する入力フィールドにおいて、入力フィールドが正しい autocomplete 属性値を持っていないという失敗条件を特定することにある。

達成基準 1.3.5 で (HTML 5.2 の autocomplete 属性のトークン値の固定リストに基づく) ユーザインタフェース コンポーネントの入力目的 のトークンの固定リストを使用する。これは、トークン値(メタデータ)をプログラム的に関連づけることで、入力ラベルを異なるモダリティで表現する等の機械的な処理を可能にするためである。

この達成基準においてもう一つの重要なのが、トークン値がプライマリエンドユーザーに直接スコープされた入力フィールドに関連付けられる点である。

事例

例 1: 誤った属性

利用者の名前と誕生日を収集するためのオンラインフォームで、誤った autocomplete 属性が使用されている。この例では、一つ目のコントロールの正しい属性値は name であり、二つ目のコントロールでは bday の代わりに birthday が使用されている。

<h2>Your details:</h2>
<label for="name1">Name:</label>
<input type="text" name="field1a" autocomplete="email" id="name1">
<label for="birthday1">Birthday:</label>
<input type="text" name="field1b" autocomplete="birthday" id="birthday1>

関連リソース

リソースは情報提供のみを目的としており、推奨を意味するものではない。

検証

手順

フォーム利用者に関する情報を集める入力フィールドそれぞれに対して:

  1. フォームフィールドに入力の目的と一致しない autocomplete 属性と値の対があることを確認する。
  2. 入力の目的が他の手法でプログラム的に伝達されていないことを確認する。

期待される結果

  • 手順 #1-2 が真である場合、失敗条件が適用され、コンテンツは達成基準を満たさないことになる。