適用 (対象)
全般
これは達成基準 4.1.2: 名前 (name)・役割 (role)・値 (value) (失敗) に関する達成方法である。
解説
これは、複数のテキストフィールドから成るフォームの入力項目で、その一部又は全部に名前 (name) がないことによる達成基準 4.1.2 の失敗例について述べている。多くの場合、複数のテキストフィールドから成るフォームの入力項目の全体に対してラベルが一つあり、そのラベルが最初のテキストフィールドに対してプログラム的に関連付けられているか、又はどのテキストフィールドに対してもプログラム的に関連付けられていない必要がある。
名前 (name) は、必ずしも視覚的に表示しなければならないわけではないが、支援技術に対しては明示されている必要がある。
事例
例 1
米国の電話番号は、3 桁の市外局番、3 桁の市内局番、それに続く 4 桁の番号で構成されている。通常はこれが、例えば (206) 555-1212 のように、(市外局番) 市内局番-番号というフォーマットで示される。多くの場合、電話番号の記入を求めるフォームは三つのテキストフィールドに分かれているが、次の例ではラベルが一つしかない。
Phone number: (<input type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">
この不適合となる事例は、アクセシビリティ API に三つのテキストフィールドそれぞれに対する名前 (name) がない場合に生じる。支援技術を使っている利用者は、三つの不明確なテキストフィールドを提示されることになる。また、三つのテキストフィールドから成る米国の電話番号の場合、一部の支援技術は、一つ目のフィールドを「(」、二つ目のフィールドを「)」、三つ目のフィールドを「-」とラベル付けすることがあり、これも決して利用者の役に立つものではない。
例 2
同じく米国の電話番号で、この事例では、ラベルがプログラム的にどの部分にも関連付けられていない。
Phone number: (<input type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">
支援技術を使っている利用者は、三つの不明確なテキストフィールドを提示されることになる。
例 3
同じく米国の電話番号で、この例では、ラベルが一つめのテキストフィールドにプログラム的に関連付けられている。
<label for="area">Phone number:</label> (<input id="area" type="text" size="3">) <input type="text" size="3">-<input type="text" size="4">
支援技術を使っている利用者は、一つめのテキストフィールドが電話番号全体のためのテキストフィールドであると理解し、二つめと三つめは不明確なテキストフィールドとして認識することになる。
参考リソース
参考リソースは、あくまでも情報提供のみが目的であり、推薦などを意味するものではない。
- Microsoft Active Accessibility 2.0 SDK. Includes Inspect32.exe and other MSAA tools.
- Gnome Accessibility Toolkit documentation
- Microsoft Internet Explorer Developer Toolbar. Allows examination of script-generated DOM in Microsoft Internet Explorer.
- Firebug. Allows examination of script-generated DOM in Firefox.
「Microsoft Internet Explorer Developer Toolbar」はページが削除されているが、代わりに開発者ツールを使用できる。詳細については、Internet Explorer 開発者ツールを理解するを参照のこと。
Firefox のアドオン「Firebug」は開発が終了している。代わりに開発ツールを使用できる。開発ツール | MDN も参照のこと。
Google Chrome の場合、類似のツールが利用できる。詳細については、Chrome DevTools | Tools for Web Developers | Google Developers を参照のこと。
Edge の場合も、類似のツールが利用できる。詳細については、Microsoft Edge Developer Tools - Microsoft Edge Development | Microsoft Docs を参照のこと。
検証
手順
マルチパートフォームフィールドにある各サブフィールドについて:
- フィールドにプログラムによる解釈される名前 (name) があることを確認する。
期待される結果
- #1 の結果がどのサブフィールドでも偽になる場合、この失敗例の条件は適用され、コンテンツは達成基準の失敗となる。