解説書 達成基準 2.4.13:フォーカスの外観 (レベル AAA)
要約
- 目標
- キーボードフォーカスを見つけやすくする。
- 何をすればよいか
- 十分な大きさ及びコントラストのフォーカスインジケータを使用する。
- なぜそれが重要か
- 高齢者を含め、多くの人は見た目の小さな変化に気づかない。
意図
この達成基準の意図は、キーボードフォーカスインジケータが明確に表示され、識別できるようにすることである。フォーカスの外観は、2.4.7 フォーカスの可視化及び 1.4.11 非テキストのコントラストと密接に関連している。フォーカスの可視化では、コンポーネントにキーボードフォーカスがある間に、可視のフォーカスインジケータを必要とする。フォーカスの外観は、可視性の最小レベルを定義する。非テキストのコントラストでは、各状態のコンポーネントが背景に対して十分なコントラストを持つことを要求するが、フォーカスの外観では、フォーカスインジケータ自体に十分なコントラストを必要とする。
キーボード又はキーボードインタフェースを利用するデバイス (スイッチ、音声入力など) を使用する、運動障害のある目の見える人にとって、フォーカスの現在地を知ることは非常に重要である。可視フォーカスは、キーボードに依存する可能性があるロービジョンの利用者のニーズも満たさなければならない。
キーボードフォーカスインジケータはさまざまな形態をとることができる。この達成基準は、フォーカスを当てたユーザインタフェース コンポーネントの周囲に実線のアウトラインを使用することを勧めるが、同等以上の大きさの他の種類のインジケータを使用することを許している。
この解説書では、最小領域の要件、色のコントラスト要件について詳しく説明し、最後にいくつかのユーザエージェントの例外を挙げる。
最小面積
達成基準の一番目の項目では、フォーカスインジケータの最小面積を規定する:
これは、フォーカスインジケータの最小面積を規定するだけである。フォーカスインジケータが文字通り 2 CSS ピクセルの太さのアウトラインである必要はなく、インジケータがそれと同等以上の大きさであればよいだけである。
ただし、サイズ要件を満たす最も簡単な方法は、太さ 2 CSS ピクセルの実線の外周であるフォーカスインジケータを使用することである。
注記
A CSS ピクセルは、開発者が "width: 200px" のような CSS 宣言で使用するものである。これはデバイスに依存しないものであり、物理的なピクセル密度に応じて変化するデバイスピクセルと混同しないように注意すること。
この文書の残りの部分では、CSS ピクセルを“px”と表記する。
実線のアウトラインを使用する
この要件を満たす最も容易かつ一般的な方法は、コンポーネントの周囲に実線のアウトラインを使用することである。アウトラインは 2px 以上の太さでなければならない。次の図は、最小限の太さのフォーカスインジケータを示している。ここでは、サンプルボタンの周囲のページ背景を構成する白い 2 ピクセル幅の帯状の部分が、黒に変更されている。
矩形以外のコンポーネントの場合、「外周」の定義では、コンテンツ制作者は次のどちらの種類のアウトラインを使ってもよい:
- 図形を囲む実線、又は
- 図形の最小境界ボックスを囲む実線
例えば、星形のボタンでは、星の形に沿ったフォーカスインジケータを用いてよく、又は星の境界ボックスに沿ったフォーカスインジケータを用いてもよい。次の例では、同じ 3 つの星がすでに選択されており、フォーカスは 3 番目の星に存在する。最初の例では、フォーカスしている星の形に合わせたフォーカスインジケータを用いている。2 番目は矩形のインジケータを用いている。
上記の例のように、インジケータをフォーカスコンポーネントから少しずらすことは、達成基準の最小面積の要件を満たすために必要ではないが、インジケータをより見やすくするのに役立つ。CSS では一般的に、outline 及び outline-offset プロパティを使用して実現される。
「外周」の定義を満たす最小の 2 CSS ピクセルの太さのインジケータは、例えば CSS のborder プロパティを使うことで、コンポーネントの外辺に沿ってコンポーネントの内側に現れる実線である。(コンポーネントの外辺に直接沿うのではなく) コンポーネントのさらに内側に挿入されるインジケータは、最小サイズの要件を満たすためには 2 CSS ピクセルより太くする必要がある。
フォーカスインジケータがコンポーネントの縁から外側に離れているか、内側に入り込んでいるか、接しているかによって、異なる非テキストのコントラストの要件が適用される可能性があることに注意する。下記の非テキストのコントラストとの関係を参照
その他のインジケータの形状
この達成基準は、フォーカスインジケータが実線のアウトラインであることを要求していない。最小面積の要件を満たす限り、他の形状を使用してもよい。
コントロールのフォーカスインジケータの最小面積は、コントロールがフォーカスされていない状態において、そのコントロール (又はその最小境界ボックス) の 2 CSS ピクセルの太さの外周の面積である。例えば、コントロールが幅 90 ピクセル、高さ 30 ピクセルの矩形の場合、2 CSS ピクセルの太さの外周の面積は、次の面積の差になる:
- 92px × 32px の矩形 (全ての辺で 1px 大きい)、及び
- 88px × 28px の矩形 (全ての辺で 1px 小さい)
これにより、最小面積は (92px * 32px) - (88px * 28px) = 480px2 になる。
一般的な形状の 2 CSS ピクセルの太さの外周を表す一般式は次のとおりである:
- 幅 w 及び高さ h の矩形
- 4h + 4w
- 半径 r の円
- 4𝜋r
- 幅 w、高さ h、及び境界半径 r の角丸の矩形
- 4h + 4w - (16 - 4𝜋)r
注記
フォーカスインジケータが十分に大きいかどうかを判断するために複雑な計算を使用する必要がある場合、おそらく、代わりにより大きなインジケータを使用すべきであるという合図である。項目にフォーカスが当たったときに目に見える変化が大きいほど、見やすくなる。
次の 2 つの例では、幅 90px、高さ 30pxのボタンを使用しており、最小面積の要件は 480px2 である:
注記
フォーカスされたコントロールの幅と高さの両方に応じて拡大縮小するフォーカスインジケーターのテクニックを使用するのが望ましい。もしそうでなければ、ページのさまざまなバリエーション (レスポンシブデザインなど) でコントロールのサイズが変更される場合、インジケータは一部のバリエーションでは領域要件を満たすが、他のバリエーションでは満たさない可能性がある。例えば、上記の図で、もしボタンの幅が広くなるにつれて二つのハイライトの矩形の幅が拡大縮小されなかったら、より長いボタンラベルに対応するためにボタンの幅をさらに広げる必要がある場合に、最小面積の要件を満たさなくなるだろう。
面積の要件を達成するもう一つの方法は、コンポーネント全体の外観を変更することである。例えば、色を変更して、新しい色が元の色に対して少なくとも 3:1 のコントラスト比を持つようにする方法がある。これは、近接して配置されたボタンのセットで効果的である。次の例は、五つの星の評価を使用してこれを示す。中央の星は、フォーカスを示すために濃い色で塗りつぶされている。ただし、コンポーネントが互いに近くになく、簡単に比較できない場合、このようなフォーカスインジケーターを検出することははるかに困難になる。拡大鏡を使用する利用者にとって、比較的近いコンポーネントであっても比較するのが難しい場合があるため、これはベストプラクティスとは見なされない。
インラインリンク
インラインリンクが複数行に分割される場合、フォーカスインジケータの作成方法によっては、ブラウザによって異なる結果が生成されることがある。CSS outline は、複数行に分割されるリンクの各部分を別々に囲む。これは、フォーカス表示のための最も一般的な CSS 技術であり、各部分が切れ目なく囲まれるため、最小境界ボックスの定義を満たす結果が得られる。CSS border は、リンクの各部分にまたがった外周を分割し、これはリンクの各行には囲まれていないボーダーをもたらす。最小境界ボックスの定義では、リンクのフォーカスはあたかもリンクがすべて 1 行にあるかのように評価できるとされているため、太さ 2px のボーダーも最小面積の要件を満たすと見なされる。したがって、コントラストの要件が満たされている場合、これらの方法はそれぞれ十分なフォーカスインジケータを生成できる。
outline プロパティはリンクの各部分を完全に実線で囲んでいるので、外周の定義を満たしている。
border はリンクの別々の部分を囲んでいないが、最小境界ボックスの定義は、あたかも 1 行であるかのように評価できるため、外周として適切である。
コントラストの変化
達成基準のインジケータ要件の 2 番目の部分では、インジケータの領域について次のように述べている:
- フォーカスされている状態とフォーカスされていない状態との間で、同一ピクセルに少なくとも 3:1 のコントラスト比がある。
この要件は、異なる状態における同一ピクセル間のコントラストの変化を測定する。これは、同時にある一つの状態において、隣接する異なるピクセル間のコントラストを測定する、テキストのコントラスト及び非テキストのコントラストの達成基準とは異なる。
3:1 は許容される最低限のコントラスト比の変化であるが、状態間のコントラストの変化が大きいほど、利用者はフォーカスインジケータに気付きやすくなる。コンテンツ制作者には、コントラスト比の変化をできるだけ大きくすることを勧める。
次の図は、コントラストを最低限にしたフォーカスインジケータを示している。ここでは、ページの背景を構成する白のピクセルの一部が、元の白と 3:1 のコントラスト比を持つミドルグレーに変更されている。コンテンツ制作者には、フォーカスの外観を最低値よりも目立つように設定することを勧める。例えば、図 2 及び 図 3の濃い青の線は、より目立つようになっている。
コンポーネントが変化してフォーカスインジケータが含まれるようになる場合、その変化は色のコントラストの変化として測定できる。例えば、黄色のアウトラインが青い背景のボタンに追加された場合、色の変化は青から黄色になる。この変化は、フォーカスインジケータがコンポーネントの周囲の背景にあっても、コンポーネント内部の背景にあっても測定できる。
フォーカスを受け取るコントロールの背景 (塗りつぶしの色) が、元の背景とのコントラストが 3:1 未満の色に変化する場合、コントラストの変化は合格しない。
背景の変化が十分である場合、それは基準を満たす方法である。
部分的にコントラストを変化させるインジケータ
フォーカスインジケータ全体が 3:1 のコントラスト変化を持つ必要はない。コントラストの変化の要件を満たすのがインジケータの一部だけであっても、その部分が最小面積の要件を満たしさえすれば、十分である。
フォーカスインジケータが最小面積の要件を満たすかどうかを計算する場合、コントラストの変化の要件を満たすインジケータの部分のみを計算に含めるべきである。
グラデーション
フォーカスインジケータにグラデーションがある場合、原則は、変化した部分のコントラストを測定し、コントラストの変化の比率が 3:1 未満のグラデーションの部分を無視することである。
コントラストの変化が 3:1 未満の部分を除外する場合、インジケータの残りの部分の面積を計算し、インジケータが最小面積の要件を満たしているかどうかを判断できる。
注記
この文書の例のいくつかは、要素のスクリーンキャプチャ画像である。これらの画像は解像度が低下しているため、実際のピクセルの色はオリジナルと一致しない場合がある。そのため、これらの画像は説明の目的で使用することを意図しており、十分なコントラストがあるかどうかをピクセルごとに検査するべきではない。
デザインによっては、ページ全体 (もしくは一部) をベタ塗りでない背景画像が覆っているページ又は、パララックススクロール効果を利用しているページがあり、ページをスクロール及び／又はビューポートのサイズを変更する場合、色の組み合わせがほぼ無限に近くなる。
変化する背景色のコントラストが組み合わせごとにテストが必要なほど近い場合、特定のスクロールの組み合わせではロービジョンの人々のユーザーニーズを満たさない可能性が高く、特定の組み合わせで失敗する可能性が高くなる。このような場合は、2 色のフォーカスインジケータ、又は背景画像もしくは背景グラデーションのバリエーションに十分なコントラストがあることを保証するためのボーダー付きのベタ塗りボックスのような、フォーカスを示す他のメカニズムを使用するのが簡単な解決策である。
短冊が入れ替わるような視覚的なパターンを使って、フォーカスインジケータの変化のように見せかけることも可能である。しかし、これは可視のインジケータとはみなされない。
非テキストのコントラストとの関係
フォーカスインジケータは、ユーザインタフェース コンポーネントの状態を特定するために必要な視覚情報である。つまり、2.4.13 フォーカスの外観に加え、1.4.11 非テキストのコントラストが適用される。
2.4.7 フォーカスの可視化と組み合わせると、1.4.11 非テキストのコントラストの要求は、コンポーネントにフォーカスが当たったときに、コンポーネントの視覚的なフォーカスインジケータは、隣接する色に対して十分なコントラストを持たなければならない、ただし、コンポーネントの見た目がユーザエージェントによって提示されていてコンテンツ制作者が変更していない場合は除く、となる。
フォーカスの外観と非テキストのコントラスト要件の違いは、次のとおり:
- フォーカスの外観は、フォーカスインジケータが、フォーカスされた状態とフォーカスされていない状態の間でコントラストが変化することを要求する。
- 非テキストのコントラストでは、フォーカスインジケータは、そのインジケータ (フォーカス状態) と隣接する非インジケータ色との間に隣接コントラストを持つことが必要である。
さらに、非テキストのコントラストではサイズ要件が設けられておらず、例外が認められる場合のルールも若干異なる。
詳細と例については解説書 1.4.11 非テキストのコントラストのフォーカスの可視化との関係性の節を参照。
コンポーネントのキーボードフォーカス
この達成基準の前文は、「キーボードのフォーカスインジケータが視覚的に表示される場合…」である。キーボードフォーカスは、キーボードを使用する人にとってインタラクションのポイントである。キーボードで操作可能なインタフェースのある環境では、様々なコンポーネントを操作するために、キーボードフォーカスをインタフェース内で移動させることができる。操作しているどのコンポーネントにもフォーカスがある。
WCAG は、ユーザインタフェース コンポーネントを「コンテンツの一部分で、特定の機能を実現するための単一のコントロールとして利用者が知覚するもの。」と定義している。利用者によってコントロールの捉え方が異なる場合があるため、何が単一のコントロールと特定の機能の両方を構成するかを解釈するときに、多少の差異が生じる可能性がある。これは、視覚的に表示されるものが、その裏側でプログラムによって作成される方法とは異なる場合に、特に当てはまる。設計のベースとなるネイティブ HTML コンポーネントがない場合、コンポーネントとそのフォーカスインジケータの描かれ方には、大きなバリエーションがある可能性がある。さらに、メニューにおけるメニュー項目など、いくつかのコンポーネントは、フォーカスを取得できるサブコンポーネントを持っている。
それにもかかわらず、この達成基準では、フォーカスインジケータそのものを、操作されるコンポーネントを構成するものの基準として使用することで、様々なテスターから一貫した結果が得られた。複合的なコンポーネントの場合、典型的なフォーカスインジケータは次の三つである:
- コンポーネント全体を囲むフォーカスインジケータ
- コンポーネントとサブコンポーネントの両方を囲むフォーカスインジケータ
- サブコンポーネントのみを囲むフォーカスインジケータ
これらのそれぞれについて、よく知られている複合的なコンポーネントとしてタブリストを用いて説明する。
コンポーネント全体を囲むフォーカスインジケータ
タブリスト全体にだけフォーカスインジケータが表示されている場合、利用者はタブリストを一つのユーザコンポーネントとして考えるように誘導される。その中のタブ項目は、選択状態と非選択状態が視覚的に区別される (そして選択状態の視覚的インジケータは、1.4.11 非テキストのコントラストで示された基準を満たなければならない)。
別のサブコンポーネントにフォーカスがあるときに、選択されたサブコンポーネントを持つ必要がない場合、全体の周囲にだけフォーカスインジケータを持つことが可能である。タブパネルの内容をアクティブなタブと同期させるタブリストの場合、一度に選択できるタブ項目は一つだけであり、どのタブが選択されていてもアクティブとみなされるため、別のフォーカスインジケータは冗長である。
結果: グループフォーカスインジケータは、この達成基準の要件を満たさなければならない。
ラジオボタングループ 及び星評価ウィジェットは、それぞれコンポーネント全体のフォーカスインジケータだけを使用しており、この達成基準の主要な要件を満たす異なる複合的なコンポーネントの実用的な例を提供する。星評価の例では、利用者は星を 1/2 ずつ増やすことができる。各 1/2 星のためのフォーカスインジケータは不要であるだけでなく、インタラクションを混乱させることなく達成することも実際には難しいだろう。
コンポーネントとサブコンポーネントの両方を囲むフォーカスインジケータ
タブパネルのコンテンツが選択されたタブと同期していないタブリストの場合、タブ項目のサブコンポーネントにフォーカスインジケータが必要となる。これは、フォーカスを持つタブ項目が選択された項目と異なる場合があるためである。
利用者はタブリストにナビゲートできる。この実装では、タブリスト全体だけでなく、タブ項目 (慣習的に、現在選択されている項目) の周囲にもフォーカス矩形がある。全体を囲むフォーカスは、キーボードの利用者に、これが独自のインタラクションを持つ複合的なコンポーネントであることを知らせるのに役立つ。利用者は、選択されていないタブ項目と選択されたタブ項目の間でフォーカスを移動でき——タブそれぞれ自体が順にフォーカスインジケーターを持ち——、その後、一つのタブ項目をアクティブにすると、そのタブ項目が選択状態になると同時にフォーカスが当たり、タブパネルがそれに対応する形に更新される。
このシナリオでは、グループフォーカスインジケータ又はサブコンポーネントインジケータのいずれかが、この達成基準の要件を満たさなければならない。過度に規範的にならないように、この達成基準では、コンテンツ制作者が最も適切なものを選択できるようにしている。一般に、サブコンポーネントフォーカスが必要な場合、グループインジケータの代わりにサブコンポーネントフォーカスを評価すべきである。
結果: タブ項目のフォーカスインジケータは、この達成基準の要件を満たしている。タブリストのフォーカスインジケータは、要件を満たす必要はない。
色を選択するスライダーは、主にサブコンポーネントのフォーカスを表示する別の複合的なコンポーネントの実例を提供する。この場合、つまみのスライダーサブコンポーネントには、十分な領域の計算に合格するのに十分なサイズ及びコントラストのフォーカスインジケータがある。スライダーコンポーネント全体の周囲にもかすかなフォーカスがあるが、この達成基準に合格するために評価する必要はない。
サブコンポーネントだけを囲むフォーカスインジケータ
同じ非同期タブリストは、全体にフォーカスを表示せず、タブ項目だけにフォーカスを表示するものとして実装することもできる。動作は前の例と同じであるが、タブリストの周りにフォーカスインジケータが配置されることはない。このインタラクションは受け入れられるが、少ない情報で利用者に多くの理解を求めるため、ベストプラクティスではない。例えば、タブリスト並びにタブ項目 (及びタブパネル) の一部の視覚的な手がかりが明確でない場合がある。また、キーボードの利用者は、期待されるキーボードインタラクションを最初は理解できないかもしれない。
結果: タブ項目のフォーカスインジケータは、タブ項目が選択されている場合と選択されていない場合の両方においてフォーカスを評価し、この達成基準の要件を満たさなければならない。
サブコンポーネントだけのタブフォーカスの機能的な例は、この達成基準のフォーカス面積の説明に合致するのに十分な大きさ (少なくとも最短辺の 4 倍以上) 及び十分なコントラストのインジケータがある。
フォーカスを持つものがユーザインタフェース コンポーネントではない場合
一部のページには、ワードプロセッサ、コードエディタのウェブ実装など、非常に大きな編集領域を含むものがある。ユーザインタフェース コンポーネントである textarea 要素とは異なり、これらの大きな編集領域は一般的に、ユーザインタフェース コンポーネントの定義を満たさない。つまり、「利用者が特定の機能の単一のコントロールとして認識する」ことはない。そのような編集領域の周りにフォーカスインジケータを表示することは、一部の人にとっては有益かもしれないが、領域が単一のコントロールとして認識されない場合は、この達成基準の対象にはならない。ウェブページは、2.4.7 フォーカスの可視化の要件を満たすために、そのような編集領域に挿入位置 (キャレットインジケータ) を提供する必要がある。
操作できない要素の中には、フォーカスを取得できるものもある (スキップリンクのターゲットである見出し要素など)。ただし、この達成基準の前文はユーザインタフェース コンポーネントについて言及しており、この達成基準が適用されるのは、フォーカスを持つ要素がキーボードで操作可能なときだけである。
例外
フォーカスの外観を評価する必要がない状況が二つある:
- フォーカスインジケータをコンテンツ制作者が調整できない
- コンテンツ制作者がユーザエージェントのデフォルトの効果を変更していない
1 番目の例外: フォーカスインジケータをコンテンツ制作者が調整できない
フォーカスインジケータがユーザエージェントによって決定され、かつコンテンツ制作者が調整できない場合
コンポーネント又は技術によっては、コンテンツ制作者がフォーカスインジケータを調整できない場合がある。HTML の select 要素 (単一選択と複数選択の両方) は、選択状態及びフォーカスの視覚的な処理をコンテンツ制作者が調整できない場合にあたる。この場合、達成基準は適用されない。
select 要素の表示はコンテンツ制作者が変更できないため、フォーカスインジケータの品質に関係なく合格となる
2 番目の例外: デフォルトのインジケータ及び背景は変更されていない
コンテンツ制作者がフォーカスインジケータ及びそのインジケータの背景色を変更していない場合
フォーカスインジケータ及びフォーカスインジケーターの背後にある背景がコンテンツ制作者によって変更されていない場合、この達成基準は適用されない。
この例外の意図は、ユーザエージェント (ブラウザ) が提供するデフォルトのインジケータに頼れるようにすることで、コンテンツ制作者の負担を軽減することである。もし全てのユーザエージェントが適切なフォーカスインジケータを提供したならば、コンテンツ制作者は他のアクセシビリティの考慮事項に集中できるだろう。残念ながら、ブラウザのデフォルトのフォーカスインジケータはコンポーネント、ブラウザ、デバイス、オペレーティングシステムによって異なり、一部のブラウザのデフォルトのフォーカスインジケータは見にくい場合がある (1px の点線のアウトラインなど)。このため、ほとんどのコンテンツ制作者は、これらの欠点を克服し、ブラウザに関係なくより均一なユーザエクスペリエンスを実現するために、ブラウザのデフォルトを上書きする。
一部のブラウザーメーカーは、デフォルトのフォーカスインジケータをより見やすくする改善をしている。この達成基準の主要な箇条書きを満たすデフォルトを採用するブラウザーが増えるにつれて、コンテンツ制作者はカスタマイズすることなく、改善されたフォーカスインジケータを得ることができるようになるだろう。
フォーカスインジケータの背景の変更
コンテンツ制作者が、画像もしくはグラデーションの背景の上にコンポーネントを配置するなど、インジケータの直接に隣接するピクセル (一般に背景と呼ばれる) を変更する、又はページのデフォルトの白い背景色を変更 (例えば、青い背景とブラウザの青いデフォルトのインジケータを組み合わせて使用) すると、ブラウザのデフォルトのフォーカスインジケータがより見えにくくなる可能性がある。このため、コンテンツ制作者がデフォルトのフォーカスインジケータの直接に隣接するピクセルを変更する場合、ユーザエージェントの例外は適用されず、コンテンツ制作者は、この達成基準のサイズ及びコントラストの要件を満たしていることを確認する必要がある。
注記
body 要素の background-color 属性を変更することは、ほとんどの実装でインジケータの直接に隣接するピクセルを変更する方法の一つである。しかし、白 (#FFFFFF) の値を指定しても、コントラスト比の定義の 3 番目の注記で認められているように、デフォルトの ("未指定の") 色は白であると仮定されるため、この例外は無効にならない。
同様に、ブラウザがデフォルトでコンポーネント内にインジケータを提供する場合、コンテンツ制作者はコンポーネントの色 (そのようなシナリオではフォーカスインジケータの背景色) を変更することで可視性が低下する可能性がある。例えば、ボタンのデフォルトのインジケータが色付きの内側のボーダーを使用している場合、コンテンツ制作者がそのボタン又はそのフォーカスされていないボーダーの色をよく似た輝度の色にすることで、フォーカスの外観に悪影響を与える可能性がある。このため、このユーザエージェントの例外は、コンテンツ制作者がデフォルトのフォーカスインジケータを変更せず、その背景も変更しない場合にのみ満たされる。
利点
- この達成基準は、キーボード操作が相互作用するコンポーネントがどれであるかをいかなる時も視覚的に判断できるようにすることで、ページの操作をキーボードに依存する人を手助けする。
- 注意力、短期記憶、又は実行プロセスの制限のある人は、フォーカスがどこにあるかを発見できることで利益を受ける。
事例
- リンクがフォーカスを受け取ると、そのリンクの周囲に、リンクに隣接する背景とコントラストのあるアウトラインが表示される。
- ボタンがフォーカスを受け取ると、そのボタン内 (テキストの周囲) に、ボタンの背景とコントラストのあるアウトラインが表示される。
- テキストフィールドがフォーカスを受け取ると、そのフィールドの周囲にアウトラインが表示され、その入力欄にフォーカスがあることを示す。
- ラジオボタンがフォーカスを受け取ると、そのコントロールの周囲にアウトラインが表示され、その入力欄にフォーカスがあることを示す。
関連リソース
リソースは、情報提供のみを目的としており、推奨を意味するものではない。
- A guide to designing accessible focus indicators by Sara Soueidan
- Focus appearance - testing version 3
- Focus visible testing (Feb 2022)
- Avoid Default Browser Focus Styles by Adrian Roselli
テクニック
この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断するテクニック、又は複数のテクニックの組み合わせを表している。しかしながら、必ずしもこれらのテクニックを用いる必要はない。その他のテクニックについての詳細は、WCAG 達成基準のテクニックを理解するの「その他のテクニック」を参照のこと。
十分なテクニック
失敗
次に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。
- Using a CSS border for inline text which can wrap (Potential future technique)
重要な用語
障害のある利用者の要件を満たすために、主流のユーザエージェントが提供する機能を超えた機能を提供するような、ユーザエージェントとして動作する、又は主流のユーザエージェントと共に動作するハードウェア及び／又はソフトウェア。
注記
支援技術が提供する機能としては、代替の提示 (例: 合成音声や拡大表示したコンテンツ)、代替入力手法 (例: 音声認識)、付加的なナビゲーション又は位置確認のメカニズム、及びコンテンツ変換 (例: テーブルをよりアクセシブルにするもの) などを挙げることができる。
注記
支援技術は、API を利用、監視することで、主流のユーザエージェントとデータやメッセージのやりとりをすることが多い。
注記
主流のユーザエージェントと支援技術との区別は、絶対的なものではない。多くの主流のユーザエージェントは、障害のある個人を支援する機能を提供している。基本的な差異は、主流のユーザエージェントが障害のある人もない人も含めて、広く多様な利用者を対象にしているのに対し、支援技術は、特定の障害のある利用者という、より狭く限られた人たちを対象にしているということである。支援技術により提供される支援は、対象とする利用者に特化した、よりニーズに適したものである。主流のユーザエージェントは、プログラムオブジェクトからのウェブコンテンツの抽出、マークアップの識別可能な構造への解釈といった、重要な機能を支援技術に対して提供する場合がある。
与えられた規格、ガイドライン、又は仕様のすべての要件を満たすこと。
コンテンツの構造、提示、及びインタラクションを定義するコード又はマークアップも含めて、user agentユーザエージェントによって利用者に伝達される情報及び感覚的な体験。
約 0.0213 度の視野角。
CSS ピクセルは、CSS におけるすべての長さ及び測定のための規範的な測定単位である。この単位は密度非依存で、ディスプレイに存在する実際のハードウェアピクセルとは異なる。ユーザエージェント及びオペレーティングシステムは CSS ピクセルが、ディスプレイの物理的な寸法と予想される視距離 (コンテンツ制作者は決定できない要因) を考慮した CSS Values and Units Module Level 3 reference pixel [css3-values] にできるだけ沿うように設定されていることを確認すべきである。
ユーザインタフェース コンポーネントがフォーカス状態にあることを視覚的に示すために変更されるピクセル群 is in a focused state
結果を得るためのプロセス又は手法。
注記
メカニズムは、宣言する適合レベルのすべての達成基準を満たしている必要がある。
ある図形の全ての点が入る、水平軸と平行に配置された最小包囲矩形。文又はテキストブロックの一部として、複数行に折り返されるコンポーネント (ハイパーテキストのリンクなど) の場合、境界ボックスは、そのコンポーネントが単一行でどのような外観になるかに基づく。
共有するピクセルを含まない図形の境界を形成する実線、又は最小境界ボックスの、いずれか短い方。
利用者が知覚できる形式でコンテンツをレンダリングすること。
ある活動を完了させるために必要な利用者の一連の動作。
利用者のアクション又は自動プロセスに応答して変化し得るユーザインタフェースコンポーネントの特性を表現する動的プロパティ。
状態はコンポーネントの本質に影響を与えないが、コンポーネント又はインタラクションの変化の候補に関連付けられているデータを表す。例えば、フォーカス、ホバー、選択、プレス、チェック、訪問済・未訪問、展開・折りたたみが挙げられる。
ユーザエージェントがどのようにレンダリング、再生、又は実行するかを符号化するメカニズム。
注記
このガイドラインで用いられている「ウェブ技術」及び (単独で用いられている) 「技術」という用語は、どちらもウェブコンテンツ技術を指す。
注記
ウェブコンテンツ技術には、マークアップ言語、データ形式、及びプログラム言語などがあり、これらをコンテンツ制作者が単独で、又は組み合わせて用いることによって、静的なウェブページや同期したメディアによる提示、さらには動的なウェブアプリケーションに至るまでの様々なエンドユーザ体験を作ることができる。
ウェブコンテンツを取得して利用者に提示するあらゆるソフトウェア。
コンテンツの一部分で、特定の機能を実現するための単一のコントロールとして利用者が知覚するもの。
注記
複数のユーザインタフェース コンポーネントが、単一のプログラム要素で実装されることもある。ここでいう「コンポーネント」は、プログラムの手法と結びついたものではなく、利用者が別々のコントロールとして知覚するものを指す。
注記
ユーザインタフェース コンポーネントには、フォーム要素、リンクだけでなく、スクリプトで生成されるコンポーネントが含まれる。
注記
ここでの「コンポーネント」又は「ユーザインタフェース コンポーネント」は、「ユーザインターフェース要素」とも呼ばれる。
単一の URI から HTTP で得た埋め込まれていないリソースに加え、レンダリングに使われる、又はユーザエージェントがこのリソースと一緒にレンダリングすることを意図しているその他のあらゆるリソースを合わせたもの。
注記
どのような「その他のリソース」も主たるリソースと一緒にレンダリングされるであろうが、これらのリソースが同時にレンダリングされるとは限らない。
注記
このガイドラインの適合範囲に含まれる対象となるウェブページとみなされるためには、リソースが「埋め込まれていない」リソースでなければならない。