目に見える形状をヒット領域から分離する
一時停止ボタンなどの小さなアイコンの場合、クリック可能なコンテナがペイントされたシンボルを超えて拡張されるようにします。指が両方を曖昧にアクティブにしないように、隣接するアクションを十分に離してください。キャンバス ゲームでは、オブジェクトを描画し、同じレイアウト データからそのヒット領域を計算します。別々のコード パスで座標を複製すると、ドリフトが発生します。
WCAG 2.2 達成基準 2.5.8 では、間隔や同等のコントロールなどの定義された例外を除き、最小値として 24 x 24 CSS ピクセルを使用します。設計上の上限ではなく、アクセシビリティ要件として評価してください。移動するターゲットや主要なアクションには、より多くの領域が必要になる場合があります。タッチが登録されている場所を示すために、色や微妙な境界線だけに依存しないでください。
実際の画面サイズでヒットテストを確認する
各辺や角の近く、隣り合う操作領域の間、ゲーム画面の拡大縮小時にタップを試します。画面に見えるコントロール、DOM上のヒット領域、ゲーム内の座標が同じ操作を指していることを確認します。小さく動くオブジェクトでは、危険物との間隔を十分に保ちながら、絵より広いヒット領域を設ける方法もあります。
タッチでさまざまなビューポート サイズをテストします。マウスは指が着地できない場所に着地することができます。ポインターの位置をサーフェスの座標系に変換し、サイズ変更後に確認します。 W3C の説明には、基準と例外が記載されています。
ゲームタッチターゲットサイズについての質問
すべてのゲーム内ターゲットを24ピクセル以上にする必要がありますか？
WCAG 2.2の達成基準2.5.8では、ポインター入力のターゲットに24×24 CSSピクセル以上を求めていますが、例外も定められています。基準に照らして評価し、ゲームの状況に応じてより大きなヒット領域を選びましょう。
ヒット領域を絵より大きくできますか？
はい。小さなアイコンの周囲に余白を含むヒット領域を設けると操作しやすくなります。ただし、隣接するコントロールを区別でき、操作結果が予測できるようにしてください。
関連情報
古い情報を見つけましたか？ 訂正を連絡