理解させる必要のあるアイテムを感覚的にだけ伝えるのではなく、テキストによる識別情報もあわせて提供する

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

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

適用 (対象)

利用者に対して、コンテンツの説明を描画して提示する全てのウェブコンテンツ技術

これは達成基準 1.3.3: 感覚的な特徴 (十分な達成方法) に関する達成方法である。

解説

この達成方法の目的は、ウェブページ内のアイテムが、形、大きさ、音又は位置だけでなく、知覚に依存しない方法によってもコンテンツで言及されるようにすることである。例えば、アイテムについて言及する文では、アイテムの機能又はそのアイテムのラベルについても説明する。

事例

事例 1

フォームには、そのフォームを送信して一連の過程の次の手順に進むための円形のボタンがある。そのボタンにはテキストで「次へ」とラベルが付けられている。説明には、「フォームを送信するには、 次へ と記された円形のボタンを押して下さい」と示されている。これは、そのボタンを特定するための形とテキスト情報の両方を含んでいる。

事例 2

オンライントレーニングを提供するウェブページの説明には、「希望のオンラインコースへ進むには、右側の『クラス一覧』という見出しがついたリンクのリストを使用して下さい。」と書いてある。この説明は、適切なリンクのリストを見つけることを補助するために位置だけでなくテキストの手がかりも提供している。

事例 3

以下のレイアウトではボタンを右下隅に配置して位置によってそれを示している。テキストラベルの指示は、位置が意味をなさない線形化バージョンにアクセスする利用者にも、どのボタンを使用するかを明確にしている。

              <table>
                <tbody>
                <tr>
                <td colspan="2">Push the lower right [Preview] button.</td>
                <td>
                <span style="background: ButtonFace; color: ButtonText; border: 
                medium outset ButtonShadow; 
                width: 5em; display: block; font-weight: bold; text-align: center;">
                Print</span>
                </td>
                </tr>
                <tr>
                <td>
                <span style="background: ButtonFace; color: ButtonText; border: 
                medium outset ButtonShadow; 
                width: 5em; display: block; font-weight: bold; text-align: center;">
                Cancel</span>
                </td>
                <td>
                <span style="background: ButtonFace; color: ButtonText; border: 
                medium outset ButtonShadow; 
                width: 5em; display: block; font-weight: bold; text-align: center;">
                OK</span>
                </td>
                <td>
                <span style="background: ButtonFace; color: ButtonText; border: 
                medium outset ButtonShadow; 
                width: 5em; display: block; font-weight: bold; text-align: center;">
                Preview</span>
                </td>
                </tr>
                </tbody>
                </table>
              
              
            

検証

手順

ウェブページ内において、オブジェクトの形、大きさ、又は位置に言及するすべての参照を探し出す。そのような各項目において:

  1. その参照が、形、大きさ、又は相対的な位置についての情報がない場合でも項目を見つけて特定するための追加情報が含まれていることを確認する。

期待される結果

  • 1.の結果が真である。