Donar
Donar
El tamaño mínimo de las áreas interactivas debe ser 44 por 44 píxeles CSS.
Excepciones:
El objetivo de este criterio de éxito es asegurarse de que el tamaño de los objetivos sea lo suficientemente grande para que los usuarios puedan activarlos fácilmente, incluso si están accediendo al contenido en un dispositivo portátil con pantalla táctil pequeña, tienen destrezas limitadas o tienen dificultades para activar objetivos pequeños por otras razones. Por ejemplo, los ratones y dispositivos de puntero similares pueden ser difíciles de usar para estos usuarios, y un objetivo más grande les ayudará a activarlo.
El tacto es especialmente problemático, ya que es un mecanismo de entrada con una precisión gruesa. Los usuarios no tienen el mismo nivel de control preciso al usar entradas como un ratón o un lápiz. Un dedo es más grande que el puntero de un ratón y generalmente obstruye la vista del usuario de la ubicación precisa en la pantalla que se está tocando/activando.
El problema puede complicarse aún más con diseños responsivos en pantallas pequeñas como las de dispositivos móviles, que deben adaptarse a diferentes tipos de entradas precisas y gruesas. Ambos tipos de entrada deben ser compatibles para un sitio que se puede acceder tanto en un escritorio/tradicional con un ratón, como en una tableta o un teléfono móvil con pantalla táctil.
Aunque este criterio define un tamaño mínimo de objetivo, como buena práctica se recomienda utilizar tamaños más grandes para reducir la posibilidad de activaciones no intencionadas. Esto es especialmente relevante si se cumple alguna de las siguientes condiciones:
Los objetivos en una pantalla pueden tener diferentes propósitos y usos, y este criterio de Conformidad especifica cómo se deben manejar cada uno de ellos.
Objetivos equivalentes: Si hay más de un objetivo en una pantalla que realiza la misma acción, solo uno de los objetivos necesita cumplir con el tamaño de objetivo de 44 por 44 píxeles CSS.
En línea: El contenido mostrado a menudo puede ser refluído basándose en el ancho de pantalla disponible. Esto se conoce como diseño responsivo y facilita la lectura, ya que no es necesario desplazarse tanto horizontal como verticalmente. En el contenido refluído, los objetivos pueden aparecer en cualquier lugar de una línea y pueden cambiar de posición según el ancho de pantalla disponible. Dado que los objetivos pueden aparecer en cualquier lugar de la línea, su tamaño no puede ser mayor que el texto disponible y el espacio entre las oraciones o párrafos, de lo contrario los objetivos podrían superponerse. Por esta razón, los objetivos que están contenidos dentro de una o más oraciones quedan excluidos de los requisitos de tamaño de objetivo.
Nota: Si el objetivo es toda la oración y la oración no está en un bloque de texto, entonces el objetivo debe tener al menos 44 por 44 píxeles CSS.
Nota: Una nota al pie o un icono dentro o al final de una oración se considera parte de la oración y, por lo tanto, quedan excluidos del tamaño mínimo de objetivo.
Control de Agente de Usuario: Si el tamaño del objetivo no es modificado por el autor a través de CSS u otras propiedades de tamaño, entonces el objetivo no necesita cumplir con el tamaño de objetivo de 44 por 44 píxeles CSS.
Esencial: Si se requiere que el objetivo tenga un tamaño específico y no puede proporcionarse de otra manera, y cambiarlo cambiaría esencialmente la información o funcionalidad del contenido, entonces el objetivo no necesita cumplir con el tamaño de objetivo de 44 por 44 píxeles CSS.
Ejemplo 1: Botones
Tres botones están en pantalla y el área de destino táctil de cada botón es de 44 por 44 píxeles CSS.
Ejemplo 2: Objetivo equivalente
Se proporcionan varios objetivos en la página que realizan la misma función. Uno de los objetivos tiene un tamaño de 44 por 44 píxeles CSS. Los otros objetivos no tienen un tamaño mínimo de 44 por 44 píxeles CSS.
Ejemplo 3: Enlace de ancla
El objetivo es un enlace en la misma página y su tamaño es menor a 44 por 44 píxeles CSS. Los usuarios pueden desplazar la pantalla utilizando las funciones del navegador, por lo que no es necesario cumplir con el tamaño del objetivo.
Ejemplo 4: Enlace de texto en un párrafo
Los enlaces dentro de un párrafo de texto tienen dimensiones de objetivo táctil variables. Los enlaces dentro de párrafos de texto no necesitan cumplir con los requisitos de 44 por 44 píxeles CSS.
Ejemplo 5: Enlace de texto en una oración
Un enlace de texto que está dentro de una oración está excluido y no necesita cumplir con el requisito de 44 por 44 píxeles CSS. Si el enlace de texto es la oración completa, entonces el área táctil del enlace de texto sí necesita cumplir con los 44 por 44 píxeles CSS.
Ejemplo 6: Nota al pie
Un enlace de nota al pie al final de una oración no necesita cumplir con los requisitos de 44 por 44 píxeles CSS. La nota al pie al final de la oración se considera parte de la oración.
Ejemplo 7: Icono de ayuda
Un icono de ayuda dentro o al final de una oración no necesita cumplir con los requisitos de 44 por 44 píxeles CSS. El icono al final de la oración se considera parte de la oración.
Ver referencia Tecnicas y fallos