解説書 達成基準 2.5.8:ターゲットのサイズ (最低限) (レベル AA)
要約
- 目標
- コントロールを作動しやすくする。
- 何をすればよいか
- ターゲットが最低限のサイズを満たしている、又はターゲットの周囲に十分な間隔があることを確認する。
- なぜそれが重要か
- 身体障害のある人の中には、互いに近接している小さなボタン群をクリックできない人もいる。
意図
この達成基準の目的は、隣接するターゲットを誤って作動させることなく、ターゲットを容易に作動できるようにするのを保証することである。巧緻性に限界がある利用者、及び細かい運動が困難な利用者は、別のターゲットが近すぎると、小さなターゲットを正確に作動させることが困難になる。十分なサイズ、又はターゲット間に十分な間隔を設けることで、間違ったコントロールが誤って作動する可能性が低くなる。
この要件で扱われる障害には、手の震え、痙縮、四肢麻痺などがある。障害のある人の中には、コンピュータのマウス又はトラックパッドの代わりに特殊な入力デバイスを使用している人もいる。通常、これらのタイプの入力デバイスは、主流のポインティングデバイスほどの精度を提供しない。この要件を満たすことで、タッチスクリーンインタフェースもより容易に使用できることも保証される。
注記
この達成基準では、最小サイズを定義し、これを満たせない場合の最小間隔を定義する。ターゲットが非常に小さく、作動が難しくとも、隣接するターゲットが近すぎなければ、この達成基準の要件を満たすことは可能である。ただし、より大きなターゲットサイズを使用することで、多くの人がより簡単にターゲットを使用できるようになる。ベストプラクティスとして、間隔に関係なく、少なくとも達成基準の最小サイズ要件を満たすことが推奨される。重要なリンク/コントロールについては、より厳密な 2.5.5 ターゲットのサイズ (高度) を目指すことを検討されたい。
例外
要件は、ターゲットのサイズが少なくとも 24 x 24 CSS ピクセルであることである。例外が五つある:
- 間隔: 複数の小さなターゲット (24 × 24 CSS ピクセル未満のもの) が配置されており、それぞれの境界ボックスの中心に直径 24 CSS ピクセルの円があるとした場合に、その円が別のターゲットと重なる、又は別の小さなターゲットの円と重なることがない。
- 同等: ターゲットが 24 × 24 CSS ピクセルに相当するサイズを持たないが、その基本的な機能を達成できる別のコントロールが、この達成基準の要件を満たす場合は、「同等」の例外に基づいてそのターゲットを除外できる。
- インライン: 達成基準は、文中のインラインのターゲット、又は、ターゲットのサイズがターゲット以外のテキストの行の高さによって制約されている場合には適用されない。この例外が認められるのは、ビューポートサイズに基づいてテキストをリフローすると、リンクが互いに対してどこに配置されるかをコンテンツ制作者が予測することが不可能になるためである。複数のリンクがより小さなテキストサイズのテキストブロックに埋め込まれている場合、隣接するテキスト行の小さなリンクが間隔の例外を満たす (直径 24 CSS ピクセルの円が他のリンク又は別の小さなターゲットの円と交差しない) ことを保証するには、大きな行の高さが必要になる。これは、多くの設計の状況において望ましくない可能性がある。
- ユーザエージェントのコントロール: ブラウザには、
<input type="date">の日付カレンダーのように、いくつかのコントロールのデフォルトのレンダリングがある。コンテンツ制作者がユーザエージェントのデフォルトを変更していない限り、ユーザエージェントのコントロール
のターゲットのサイズは除外される。 - 必要不可欠: ターゲットのサイズ及び間隔が、伝達される情報にとって必須である場合、
必要不可欠
の例外が適用される。例えば、デジタル地図では、ピンの位置は地図上に表示される場所の位置に対応する。多数のピンが近接している場合、ピンと隣接するピンとの間隔は、多くの場合 24 CSS ピクセル未満になる。地図上の正しい位置にピンを表示することが必要不可欠であるため、必要不可欠の例外が適用される。同様の例としては、ターゲットが必然的に密集する対話型データ視覚化がある。別の例としては、自治体が紙のフォームを複製するためにオンラインフォームを法的に義務付けている場合があり、これによりターゲットのサイズに制限が課される可能性がある。そのような自治体では、小さなターゲットを複製するための法的要件が必要不可欠であるとみなすことができる。必要不可欠の例外が適用される場合、コンテンツ制作者は、実用的な範囲で代替手段を通じて同等の機能を提供することが強く推奨される。
サイズ要件
ターゲットを「少なくとも 24 × 24 CSS ピクセル」にするためには、正方形が完全にターゲットの内部に収まるように (ターゲットの領域外に広がらないように) 水平軸及び垂直軸に向きを揃えて、24 × 24 CSS ピクセルの実線の正方形を描画できなければならない。
ターゲット自体が歪んでいても、24 × 24 ピクセルの正方形はページと向きを揃える必要がある。
ターゲットが内部に 24 × 24 ピクセルの正方形を描画するのに十分な大きさでない場合、そのターゲットはサイズが小さいとみなされ、達成基準のサイズ要件に合格しない。しかし、隣接するターゲットがなく、周囲に十分な間隔がある場合、間隔の例外 (下記) により達成基準に合格する場合がある。
この要件は、ページのズーム率とは無関係である。利用者がズームインしても、要素の CSS ピクセルサイズは変わらない。これは、利用者がページをズームインした場合に、ターゲットに十分な間隔及び十分なサイズがあると主張しても、コンテンツ制作者がこの要件を満たすことはできないことを意味する。
この要件は、利用者のインタラクション又はコンテンツのスクリプト化された動作の結果として表示されるコンテンツによって隠されているターゲットには適用されない。例えば:
- コンボボックスを操作すると、候補のドロップダウンリストが表示される
- ボタンをアクティブにするとモーダルダイアログが表示される
- ページの読み込み後にコンテンツにクッキーバナーが表示される
- 利用者が一定時間操作をしなかった後に、コンテンツに「アンケートに参加する」ダイアログが表示される
ただし、この要件は、他のコンテンツの上に表示される新しいコンテンツ内のターゲットに適用される。
達成基準は主に、隣接するターゲットの誤作動を防ぐためにターゲットサイズを提供することでタッチの利用者を支援するが、マウス又はペンの利用者にも役立つ。これは、細かい運動制御の低下又は入力の不正確さによる、震え又は正確さの低下による誤作動の可能性を減らす。
間隔
ターゲットの最小サイズが満たされていない場合、少なくとも間隔を空けることでユーザ体験を改善できる。ターゲットが別のターゲットに直接に隣接していない場合、隣接するターゲットを誤作動する可能性は低くなる。一般に、タッチスクリーンデバイス及びユーザエージェントは、どのリンク又はコントロールが利用者のタッチ操作に最も近いかを特定するための内部ヒューリスティックがある。これは、ターゲット間の十分な間隔が、ターゲットのサイズ自体を大きくするのと同じくらい効果的に機能できることを意味する。
ターゲットが 24 × 24 CSS ピクセルより小さい場合、小さなターゲットである。この場合、ターゲットの境界ボックスを中心として、小さなターゲットの上に直径 24 CSS ピクセルの円を描画することで、少なくとも十分な間隔があるかどうかを確認する。矩形のターゲットの場合、境界ボックスはターゲット自体と一致する。つまり、円はターゲットの中心に配置される。ターゲットが矩形でない場合、例えば、ターゲットが切り取られている、角が丸い、又はより複雑なクリック可能な SVG 形状である場合、まず境界ボックスを決定し、次にボックスの中心を見つける必要がある。凹多角形の場合、境界ボックスの中心がターゲット自体の外側にある可能性があることに注意する。ここで、円を境界ボックスの中心に配置する。
全ての隣接する小さなターゲットに対してこのプロセスを繰り返す。小さなターゲットに十分な間隔があるかどうかを判断するため (この達成基準の間隔の例外を合格するため) には、ターゲットの直径 24 CSS ピクセルの円が、別のターゲット又は隣接する他の小さなターゲットの円と重ならないことを確認する。
次の例は、六つのアイコンベースのボタンが水平方向に並んだ三つのバージョンを示している。一番上の行では、各ターゲットのサイズは 24 × 24 CSS ピクセルであり、この達成基準を満たしている。2 行目では、同じターゲットは 20 × 20 CSS ピクセルしかないが、それらターゲットの間には 4 CSS ピクセルの間隔がある。ターゲットのサイズが 24 x 24 CSS ピクセル未満であるため、これらは達成基準の間隔の例外に対して評価する必要があり、そして合格する。最後の行では、ターゲットは再び 20 × 20 CSS ピクセルであるが、それらターゲットの間に間隔は存在しない。これらのターゲット上に直径 24 CSS ピクセルの円を描画すると、円が重なるため、これらのターゲットは間隔の例外に失敗する。
次の二つの図は、高さが 16 CSS ピクセルしかないボタンのセットを示している。最初のセットでは、ボタンの上下にターゲットがないため、合格する。2 番目の図では、さらにボタンがあり、それらボタンが積み重ねられているため、失敗する。
次の二つの図は、この要件を適切に満たすためにメニュー項目を調整する方法を示している。最初の図では、About us
メニューがアクティブになっており、各メニュー項目のターゲット (テキスト及びパディング) の高さが 24 CSS ピクセルであることが示されている。2 番目の図では、同じメニューが展開されているが、メニュー項目の高さは 18 CSS ピクセルしかない。
次の例では、一つの大きなターゲット (その画像に関連する新しいページにリンクする画像) 及び、非常に小さなもう一つのターゲット (おそらくモーダルで、画像自身の拡大プレビューを開くための、虫めがねアイコンの付いたコントロール) がある。一番上の行では、小さなターゲットが大きなターゲットと重なっている (より正確に言えば、切り取られている)。小さなターゲット自体のサイズは 24 × 24 CSS ピクセルであるため、合格する。2 行目では、もう一つのターゲットがより小さい場合 (この場合は 16 × 16 CSS ピクセル)、小さなターゲット上に描画した直径 24 CSS ピクセルの円が大きいターゲッ自体と重なるため、基準に失敗する。
次の例では、同じ二つのターゲット (大きなターゲット及び小さなターゲット) がある。今回は、小さなターゲットが大きなターゲットに接触／隣接する。小さなターゲットが 24 × 24 CSS ピクセルよりも小さい場合、小さなターゲット上に描画した直径 24 CSS ピクセルの円は大きなターゲット自体と重なり、要件に失敗する。小さなターゲットは、その小さなターゲットの円が大きなターゲットと重ならなくなるまで、大きなターゲットからさらに離さなければならない。
注記
異なる障害のある利用者は、コントロールのサイズに対するニーズも異なる。可視のターゲットのサイズを増やすことなく、アクティブなターゲット領域を増やすオプションを提供すると有益な可能性がある。もう一つのオプションは、レイアウトの密度を制御し、それによってターゲットのサイズもしくは間隔、又はその両方を変更するメカニズムを提供することである。これは幅広い利用者にとって有益な可能性がある。例えば、視野損失のある利用者は、より小さなサイズのコントロールを備えた、より圧縮されたレイアウトを好む場合がある一方で、他の形態のロービジョンの利用者は、大きなコントロールを好む場合がある。
利点
十分なサイズのターゲット (又は少なくとも十分なターゲットの間隔) を持つことは、小さなコントロールを自信を持ってターゲットにする又は操作することが困難な全ての利用者を助けることができる。メリットを受ける利用者には次が含まれるが、これらに限定されない:
- タッチスクリーンが主な操作方法であるモバイルデバイスを使用する人々。
- マウス、スタイラスペン、又はタッチ入力を使用する、手の震えなどの運動障害のある人。
- 公共交通機関など、揺れにさらされる環境でデバイスを使用する人々。
- 細かい運動が困難なマウスの利用者。
- 片手でデバイスにアクセスする人々。
- 指が大きい人々、又は指もしくは関節の一部だけでデバイスを操作している人々。
事例
- 画面上に三つのボタンがあり、各ボタンのターゲットのサイズは 24 × 24 CSS ピクセルである。ターゲットのサイズ自体が 24 × 24 CSS ピクセルであるため、追加の間隔は必要なく、達成基準に合格する。
- ボタンの行で、各ボタンの水平方向の幅が 24 CSS ピクセルを超え、高さが 20 CSS ピクセルしかなく、ボタンの行の上下に 4 CSS ピクセルの垂直方向のマージンがある。ボタンの行の上下に十分な間隔があるため、達成基準に合格する。
- テキストの段落内のリンクには、さまざまなターゲットの寸法がある。テキストの段落内のリンクは 24 x 24 CSS ピクセルの要件を満たす必要がないため、達成基準に合格する。
関連リソース
リソースは、情報提供のみを目的としており、推奨を意味するものではない。
テクニック
この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断するテクニック、又は複数のテクニックの組み合わせを表している。しかしながら、必ずしもこれらのテクニックを用いる必要はない。その他のテクニックについての詳細は、WCAG 達成基準のテクニックを理解するの「その他のテクニック」を参照のこと。
十分なテクニック
重要な用語
障害のある利用者の要件を満たすために、主流のユーザエージェントが提供する機能を超えた機能を提供するような、ユーザエージェントとして動作する、又は主流のユーザエージェントと共に動作するハードウェア及び／又はソフトウェア。
注記
支援技術が提供する機能としては、代替の提示 (例: 合成音声や拡大表示したコンテンツ)、代替入力手法 (例: 音声認識)、付加的なナビゲーション又は位置確認のメカニズム、及びコンテンツ変換 (例: テーブルをよりアクセシブルにするもの) などを挙げることができる。
注記
支援技術は、API を利用、監視することで、主流のユーザエージェントとデータやメッセージのやりとりをすることが多い。
注記
主流のユーザエージェントと支援技術との区別は、絶対的なものではない。多くの主流のユーザエージェントは、障害のある個人を支援する機能を提供している。基本的な差異は、主流のユーザエージェントが障害のある人もない人も含めて、広く多様な利用者を対象にしているのに対し、支援技術は、特定の障害のある利用者という、より狭く限られた人たちを対象にしているということである。支援技術により提供される支援は、対象とする利用者に特化した、よりニーズに適したものである。主流のユーザエージェントは、プログラムオブジェクトからのウェブコンテンツの抽出、マークアップの識別可能な構造への解釈といった、重要な機能を支援技術に対して提供する場合がある。
コンテンツの構造、提示及びインタラクションを定義するコード又はマークアップも含めて、ユーザエージェントによって利用者に伝達される情報及び感覚的な体験。
約 0.0213 度の視野角。
CSS ピクセルは、CSS におけるすべての長さ及び測定のための規範的な測定単位である。この単位は密度非依存で、ディスプレイに存在する実際のハードウェアピクセルとは異なる。ユーザエージェント及びオペレーティングシステムは CSS ピクセルが、ディスプレイの物理的な寸法と予想される視距離 (コンテンツ制作者は決定できない要因) を考慮した CSS Values and Units Module Level 3 reference pixel [[css3-values]] にできるだけ沿うように設定されていることを確認すべきである。
もし取り除いてしまうと、コンテンツの情報又は機能を根本的に変えてしまい、かつ、適合する他の方法では情報及び機能を実現できない。
ある図形の全ての点が入る、水平軸と平行に配置された最小包囲矩形。文又はテキストブロックの一部として、複数行に折り返されるコンポーネント (ハイパーテキストのリンクなど) の場合、境界ボックスは、そのコンポーネントが単一行でどのような外観になるかに基づく。
マウス、ペン、タッチ接触のように、画面上の特定の座標 (又は複数の座標群) をターゲットにできるデバイスからの入力。
注記
See the Pointer Events の「pointer」の定義 [[pointerevents]]。
利用者が知覚できる形式でコンテンツをレンダリングすること。
ユーザインタフェース コンポーネントのインタラクティブな領域のような、ポインタアクションを受け入れるディスプレイの領域
注記
二つ以上のターゲットが重なっている場合、重なっているターゲットが同じアクションを実行する、又は同じページを開く場合を除いて、重なっている領域をターゲットサイズの計算に含めるべきではない。
ウェブコンテンツを取得して利用者に提示するあらゆるソフトウェア。
単一の URI から HTTP で得た埋め込まれていないリソースに加え、レンダリングに使われる、又はユーザエージェントがこのリソースと一緒にレンダリングすることを意図しているその他のあらゆるリソースを合わせたもの。
注記
どのような「その他のリソース」も主たるリソースと一緒にレンダリングされるであろうが、これらのリソースが同時にレンダリングされるとは限らない。
注記
このガイドラインの適合範囲に含まれる対象となるウェブページとみなされるためには、リソースが「埋め込まれていない」リソースでなければならない。