Separa la forma visible de la zona interactiva
Para un icono pequeño, como el botón de pausa, haz que el contenedor interactivo se extienda más allá del símbolo dibujado. Separa lo suficiente las acciones vecinas para que un dedo no active ambas por accidente. En un juego con canvas, dibuja el objeto y calcula su zona interactiva a partir de los mismos datos de diseño; duplicar coordenadas en distintos fragmentos de código puede hacer que dejen de coincidir.
El criterio de conformidad 2.5.8 de WCAG 2.2 establece un mínimo de 24 × 24 píxeles CSS, con excepciones definidas, como las de espaciado y controles equivalentes. Trátalo como un requisito de accesibilidad, no como un límite de diseño: un objetivo móvil o una acción principal puede necesitar más espacio. No dependas solo del color o de un borde sutil para indicar dónde se detecta el toque.
Comprueba las zonas interactivas en tamaños reales de pantalla
Prueba los toques cerca de cada borde y esquina, entre controles contiguos y mientras cambia la escala de la superficie de juego. Comprueba que el control visible, la zona interactiva del DOM y las coordenadas del mundo del juego correspondan a la misma acción. Para objetos pequeños en movimiento, puedes ampliar la zona de impacto más allá del dibujo, manteniendo una separación significativa respecto a los peligros.
Prueba con el tacto distintos tamaños de ventana gráfica. Un ratón puede apuntar a lugares a los que un dedo no llega con precisión. Convierte las posiciones del puntero al sistema de coordenadas de la superficie y vuelve a comprobarlas tras cambiar el tamaño. La explicación del W3C describe el criterio y sus excepciones.
Preguntas sobre tamaño del objetivo táctil del juego
¿Debe medir cada objetivo del juego al menos 24 píxeles?
El criterio 2.5.8 de WCAG 2.2 exige para las entradas con puntero un objetivo de al menos 24 × 24 píxeles CSS, con excepciones. Evalúa el criterio y usa zonas de interacción más grandes cuando lo requiera el contexto del juego.
¿Puede la zona interactiva ser más grande que el dibujo?
Sí. Ampliar el área interactiva alrededor de un icono pequeño puede facilitar su activación, siempre que los controles cercanos sigan teniendo resultados claros y previsibles.
Más información
¿Has visto algo desactualizado? Notificar una corrección