達成基準 2.1.1、達成基準 2.4.7、及び達成基準 3.2.1 の失敗例 - フォーカスを受け取ったときに、フォーカスを取り除くために、スクリプトを使用している

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

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

適用 (対象)

スクリプトをサポートしているすべてのコンテンツに適用

ユーザエージェント及び支援技術のサポートの注記

これは、次の達成基準に関する達成方法である:

解説

通常はキーボードでアクセスした場合フォーカスを受け取るコンテンツが、スクリプトによってフォーカスを失うことがある。これは、デザイナーがシステムのフォーカスインジケータを見えなくしようとするときに時々起きる。しかしながら、システムのフォーカスインジケータは、キーボード利用者のアクセシビリティにおける重要な一部分である。また、これを実行することによってフォーカスが完全に取り除かれると、コンテンツにはマウスのようなポインティングデバイスでしかアクセスできなくなる。

事例

例 1

<input type="submit" onFocus="this.blur();"> 

例 2

<a onFocus="this.blur()" href="Page.html"><img src="myImage.gif"></a> 

例 3

<a href="link.html" onfocus="if(this.blur)this.blur();">Link Phrase</a> 

検証

手順

  1. キーボードを使用して、すべてのインタラクティブな要素にキーボードでアクセスできることを確認する。
  2. それぞれの要素がフォーカスされたとき、利用者がフォーカスを移動するまでフォーカスがそこに残っていることを確認する。

期待される結果

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