理解するために感覚的な情報のみに依存するような項目に対して、テキストによる識別を別の方法で提供する

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

この達成方法 (参考) の使用法と、この達成方法が 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.の結果が真である。