達成基準 3.3.2 の失敗例 - 電話番号のフィールド一式を視覚的にフォーマットしているが、テキストラベルを含んでいない

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

この達成方法 (参考) の使用法と、この達成方法が WCAG 2.1 達成基準 (規定) とどのように関係するのかに関する重要な情報については、WCAG 達成基準の達成方法を理解するを参照のこと。適用 (対象) のセクションは、その達成方法の範囲について説明しており、特定の技術に関する達成方法の存在は、その技術があらゆる状況で WCAG 2.1 を満たすコンテンツを作成するために使用できることを意味するものではない。

適用 (対象)

あらゆるウェブコンテンツ技術

これは達成基準 3.3.2: ラベル又は説明 (失敗例) に関する達成方法である。

解説

この文書では、視覚障害、又は認知障害のある利用者が、電話番号入力欄であることを認識し、フィールドにどのような情報を入力すればよいかを理解できない失敗例について述べている。電話番号は多くの場合、固定の、特有の書式で示されるため、コンテンツ制作者は電話番号入力欄であることを示すにはフィールドに視覚的な書式を設定すれば十分であると考えているかもしれない。しかし、全てのフィールドがプログラムによる解釈が可能な名前 (name) を持っている場合においても、テキストラベルでフィールドの一式を電話番号として特定するようにしなければならない。

事例

事例 1

アメリカ合衆国では、電話番号は 3 桁の市外局番と 3 桁の市内局番、及び 4 桁の番号に区切られている。あるウェブページ上で電話番号の三つの部分に対して固定長のテキスト入力フィールドを作成し、最初のフィールドをカッコで囲い、ダッシュ「-」で 2 番目と 3 番目のフィールドを区切っている。この書式から、利用者はフィールドを電話番号として認識するが、そのウェブページではそれが電話番号であることを示すテキストラベルがつけられていない。それぞれのフィールドのラベルはその直前にあるテキストであることが多いので、三つのフィールドのラベルはそれぞれ「(」、「)」と「-」ということになってしまう。

検証

手順

  1. 一つの電話番号を表すウェブページ上の電話番号フィールド一式に対して、電話番号フィールド一式が近くに配置された目に見えるテキストラベルでラベル付けされていることを確認する。
  2. 一つの電話番号を表すウェブページ上の電話番号フィールド一式に対して、フィールドへの入力方法の説明がある。

期待される結果

  • 1. と 2. の両方の結果が偽である場合、この失敗例の条件は適用され、コンテンツは達成基準の失敗となる。