Analizando las WCAG 2.5.5 para obtener mejores tamaños de objetivos

¿Alguna vez ha experimentado la frustración de intentar tocar un botón en un dispositivo móvil y no hacer nada porque el tamaño del objetivo simplemente no es lo suficientemente grande y no capta la presión? Tal vez tengas dedos más grandes, como yo, o tal vez se deba a una destreza limitada. Esto se debe al tristemente cada vez menor área objetivo de elementos con los que nosotros, los usuarios, tenemos que interactuar.

Hablemos del tamaño del objetivo y de cómo hacerlo lo suficientemente grande para que los usuarios interactúen fácilmente con un elemento . Esto es especialmente importante si un usuario accede a un contenido en un pequeño dispositivo portátil con pantalla táctil, donde el espacio es mucho más limitado.

Criterio de éxito revisado

Mencioné (sin juego de palabras) el Criterio de éxito en un artículo anterior que cubre el criterio WCAG 2.1, Etiqueta en nombre. En resumen, los criterios WCAG son la base a partir de la cual determinamos si nuestro trabajo es “accesible”.

Si se pregunta si existe un criterio para el tamaño objetivo, la respuesta es sí. Es WCAG 2.5.5. Tomando directamente de las pautas. Pasar WCAG 2.5.5 con una calificación AAA requiere que “el tamaño del objetivo para las entradas del puntero sea de al menos 44 por 44 píxeles CSS, excepto cuando:

• Equivalente: el objetivo está disponible a través de un enlace o control equivalente en la misma página que tiene al menos 44 × 44 píxeles CSS;
• En línea: el objetivo está en una oración o bloque de texto;
• Control del agente de usuario: el tamaño del objetivo lo determina el agente de usuario y el autor no lo modifica;
• Esencial: una presentación particular del objetivo es esencial para la información que se transmite”.

¿Qué podría salir mal?

¿Es solo una talla no? Pan comido. Es posible que nada salga mal.

¿O puede?

Los tamaños de objetivos pequeños pueden causar obstáculos de accesibilidad para muchas personas. ¿Alguna vez has viajado en un vehículo por una carretera con baches y al intentar interactuar con una aplicación de tu móvil no puedes pulsar sobre un elemento? Ese es un obstáculo de accesibilidad. Aquellos con discapacidades motoras o cognitivas lo tendrán mucho más difícil porque les resultará mucho más difícil si el tamaño del objetivo es demasiado pequeño y no cumple con los requisitos de las WCAG.

No quiero meterme con Twitter aquí, pero es el primer ejemplo notable que encontré mientras buscaba ejemplos de objetivos pequeños.

Imagine los obstáculos que alguien con trastornos neuromusculares, como esclerosis múltiple, parálisis cerebral, artritis, temblores o enfermedad de Alzheimer o cualquier otra discapacidad motora tendría que superar para activar un objetivo en cualquiera de esos casos.

¿Otro ejemplo favorito que veo con bastante frecuencia? Anuncios. ¿Alguna vez te ha costado hacer clic en el minúsculo botón “X” para cerrarlos?

Al no tener habilidades motoras ni discapacidades cognitivas personalmente, me encuentro dando vueltas y tardando varias veces en alcanzar algunas áreas objetivo. El hecho de que alguien que necesite utilizar algo como un bolígrafo o un lápiz óptico en un tamaño de objetivo que no sea un mínimo de 44 × 44 píxeles puede ser una tarea difícil. Estos objetivos no deberían necesitar múltiples intentos para activarse cuando el tamaño del objetivo no cumple con las pautas recomendadas.

Consideraciones sobre el tamaño objetivo

WCAG 2.5.5 entra en detalles específicos para ayudarnos a tener en cuenta estas cosas definiendo los cuatro tipos de controles que acabamos de ver: equivalente , en línea , agente de usuario y esencial .

Analizaremos diferentes consideraciones para determinar los tamaños objetivo y las colocaremos junto a las pautas WCAG para ayudarnos a tomar decisiones de diseño buenas y accesibles.

Considere la diferencia entre "hacer clic" y "tocar"

Este criterio de éxito garantiza que los tamaños de los objetivos sean lo suficientemente grandes como para que los usuarios puedan activarlos fácilmente, incluso si el usuario accede a estos objetivos en dispositivos portátiles. Normalmente asociamos las pantallas pequeñas con “toques” en lugar de “clics” cuando se trata de activar objetivos. Y eso es algo que debemos considerar en nuestro tamaño objetivo.

Los ratones y dispositivos de entrada similares utilizan un puntero en la pantalla, que se considera de precisión "fina" porque permite al usuario acceder a un elemento de la pantalla con precisión exacta. En teoría, la precisión fina facilita el acceso a objetivos de menor tamaño. El problema es que ese tipo de dispositivo de entrada puede ser difícil para algunos usuarios, ya sea para agarrar el dispositivo o alguna otra habilidad cognitiva o motora. Por lo tanto, incluso con una gran precisión, tener un objetivo claro sigue siendo una ventaja.

El tacto, por otro lado, puede ser problemático ya que es un mecanismo de entrada con una precisión muy “tosca”. Los usuarios pueden carecer de un nivel de control preciso cuando utilizan un mouse o un lápiz, por ejemplo. Un dedo, que es más grande que el puntero del mouse, generalmente obstruye la vista del usuario de la ubicación exacta en la pantalla que se está activando o tocando. De ahí la precisión “tosca”.

Este problema se agrava en el diseño responsivo, que debe adaptarse a numerosos tipos de entradas finas y gruesas. Ambos tipos de entrada deben ser compatibles para un sitio al que se pueda acceder mediante una computadora de escritorio o portátil con un mouse, así como un dispositivo móvil o tableta con pantalla táctil.

Eso hace que el tamaño real que utilizamos para un objetivo sea un detalle bastante importante. Dependiendo de quién esté usando un control, qué hace ese control, con qué frecuencia se usa y dónde está ubicado, deberíamos considerar el uso de objetivos más grandes y claros para evitar cosas como acciones no deseadas.

Pero dicho todo esto, en realidad tenemos una consulta de medios CSS que puede detectar un dispositivo de puntero para que podamos orientar ciertos estilos a interacciones de entrada finas o gruesas, y está bien soportada. Aquí hay un ejemplo sacado de la especificación:

/* Make radio buttons and check boxes larger if we have an inaccurate primary pointing device */@media (pointer: coarse) {  input[type="checkbox"], input[type="radio"] {    min-width: 30px;    min-height: 40px;    background: transparent;  }}

Pero espera. Si bien esto es excelente y todo eso, Patrick H. Lauke ofrece una advertencia sobre esta consulta de medios de interacción y su potencial para hacer suposiciones incorrectas.

Considere que diferentes plataformas tienen diferentes requisitos.

Cuando las WCAG especifican valores exactos, vale la pena prestar atención. Tenga en cuenta que se recomienda que el tamaño de los objetivos sea de al menos 44×44 píxeles, lo cual se menciona no menos de 18 veces en el explicador de WCAG 2.5.5.

Sin embargo, es posible que también haya visto requisitos similares con orientaciones diferentes de las "Pautas de interfaz humana" de Apple para iOS y el "Diseño de materiales" de Google en sus requisitos de diseño de plataforma.

Considere el "área que se puede tocar" de un objetivo

Tenga en cuenta que los requisitos de la plataforma de Apple se refieren a un "área que se puede tocar" cuando describen el tamaño objetivo ideal. Eso significa que estamos hablando tanto del espacio como de la apariencia de un objetivo. Por ejemplo, Material Design de Google sugiere al menos un tamaño objetivo de 48×48 dp (píxeles independientes de la densidad) para elementos interactivos. Pero ¿qué pasa si sus requisitos de diseño requieren un ícono de 24×24 dp? Es totalmente legítimo usar el relleno a nuestro favor para crear más espacio interactivo alrededor del ícono, que comprende el tamaño objetivo de 48×48 dp. O, como está documentado en Material Design:

Los objetivos táctiles son las partes de la pantalla que responden a la entrada del usuario. Se extienden más allá de los límites visuales de un elemento. Por ejemplo, un ícono puede parecer de 24×24 dp, pero el relleno que lo rodea comprende el objetivo táctil completo de 48×48 dp.

Considere el comportamiento de diseño responsivo

Así es, debemos considerar cómo las cosas cambian y se mueven en un diseño que debe responder a diferentes tamaños de ventana gráfica. Un ejemplo podrían ser los botones que se apilan en pantallas pequeñas pero que están en línea en pantallas más grandes. Queremos asegurarnos de que la transición tenga en cuenta la ubicación de los elementos circundantes para evitar elementos u objetivos superpuestos.

Hablando de en línea, hay una parte particular de la excepción de las WCAG para objetivos en línea que vale la pena destacar:

En línea: el contenido mostrado a menudo se puede redistribuir según el ancho de pantalla disponible (diseño responsivo). En el contenido redistribuido, los objetivos pueden aparecer en cualquier lugar de una línea y pueden cambiar de posición según el ancho de la pantalla disponible. Dado que los objetivos pueden aparecer en cualquier parte de la línea, el 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. Es por este motivo que los objetivos contenidos en una o más frases quedan excluidos de los requisitos de tamaño del objetivo.

(El énfasis es mío)

Ahora bien, no estamos hablando necesariamente de botones que están uno al lado del otro aquí. Podemos vincular dentro del texto y ese texto podría dividir la ubicación del objetivo, posiblemente en dos líneas.

Considere la relación del objetivo con su entorno.

Acabamos de ver cómo los enlaces en línea dentro de un bloque de texto están exentos de la regla 44×44. Existen excepciones similares dependiendo de la relación del objetivo con los elementos que lo rodean.

Tomemos el ejemplo que proporciona el explicador WCAG, nuevamente, en su descripción de excepciones de objetivos en línea:

Si el objetivo es la oración completa y la oración no está en un bloque de texto, entonces el objetivo debe tener al menos 44 por 44 píxeles CSS.

Esa es buena. Deberíamos considerar si el objetivo es su propio bloque o parte de un bloque de texto más grande. Si el objetivo es su propio bloque, entonces debe cumplir con las reglas, ya sea un botón con una etiqueta corta o una oración completa vinculada. Por otro lado, una oración completa que está vinculada dentro de otro bloque de texto no tiene que cumplir con los requisitos de tamaño objetivo.

Se podría pensar que algo como un ícono vinculado al final de una oración o párrafo debería cumplir con las reglas, pero las WCAG son claras en que estos objetivos están exentos:

Una nota a pie de página o un ícono dentro o al final de una oración se consideran parte de una oración y, por lo tanto, están excluidos del tamaño objetivo mínimo.

Y eso tiene sentido. Imagínese contenido con una altura de línea de, digamos, 32 píxeles y un ícono al final, todo acolchado hasta 44 × 44 píxeles, y lo fácil que sería activar el ícono sin darse cuenta.

Considere si el agente de usuario diseña el objetivo

Si el objetivo no tiene ningún estilo (en el sentido de que no le ha agregado CSS) y en su lugar adopta los estilos predeterminados proporcionados por el navegador, entonces no hay necesidad de enfatizar la regla 44×44. Eso tiene sentido. El agente de usuario es como una interfaz de usuario a nivel de sistema, por lo que cambiarlo superficialmente con nuestros propios estilos anularía todo un sistema, lo que podría generar inconsistencias en esa interfaz de usuario.

Entonces, sí, si estás usando un predeterminado buttono algo similar, y no se le han aplicado otros estilos o tamaños, entonces está listo. Pero muchos de nosotros usamos restablecimientos para normalizar los elementos de la interfaz de usuario en todos los navegadores, así que esté atento a eso en su código base porque afectará los estilos del agente de usuario de su objetivo.

Considere si hay otras formas de activar la funcionalidad.

Todos hemos usado enlaces ancla en la página, ¿verdad? Diablos, CSS-Tricks a menudo tiene una tabla de contenido en la parte superior de un artículo que es simplemente una lista de enlaces de anclaje.

WCAG en realidad utiliza enlaces de anclaje como ejemplo de algo que está fuera de lugar en cuanto a cumplir con los requisitos de tamaño objetivo. ¿Por qué? Porque es tan posible desplazarse manualmente hacia abajo a una ubicación específica en una página como hacer clic en un enlace para saltar allí. Hay dos formas de lograr lo mismo y una de esas formas está integrada directamente en el navegador.

Pero aun así debemos tener cuidado al trabajar con algo como una tabla de contenidos. No lo tengo del todo claro aquí, pero dado que una tabla de contenido es una lista de enlaces, cada enlace puede constituir su propio bloque de texto que no forma parte de un bloque de texto más grande, como un párrafo. Entonces, en este tipo de casos, tal vez sea una buena idea dejar un poco más de espacio entre los elementos de la lista. Hay menos cambios al recortar o tocar accidentalmente dos o más objetivos a la vez.

Terminando

El criterio WCAG 2.5.5 proporciona orientación para aplicar tamaños de objetivos que sean claros, sin obstrucciones y fáciles de activar. Como vimos, hay muchos casos en los que el tamaño de un objetivo puede marcar la diferencia a la hora de completar una acción.

Lo interesante de las directrices sobre el tamaño objetivo es lo que está exento de ellas. Si bien no cubrimos cada exención específica por sí sola, analizamos un conjunto de situaciones que requieren una consideración cuidadosa para dimensionar un objetivo, desde el tipo de dispositivo de entrada que se utiliza hasta la relación del objetivo con los elementos circundantes, y muchas cosas entremedio.

La clave para un tamaño de destino accesible no es necesariamente usar menos estilos en un objetivo (aunque vimos que los estilos predeterminados del agente de usuario están exentos), sino tener el contexto y el estilo correspondientes. Probablemente hay docenas de situaciones más que podríamos haber cubierto aquí y examinado cómo entran en juego los estilos, así que si tienes alguno, ¡compártelo!

Y en lo que respecta al estilo, las especificaciones CSS tienen características específicas, como la consulta de medios de interacción para pointer, para mejorar aún más el tamaño objetivo para las personas. Si se usa bien, podría ser una excelente manera de detectar si un visitante está utilizando un dispositivo de entrada fino o grueso. De esa manera, podemos adaptar las cosas para que su experiencia sea mejor que si tratáramos esas diferencias de la misma manera.

Entonces, sí, los tamaños objetivo son algo fácil de ignorar e ignorar. Pero espero que ahora seas como yo y aprecies genuinamente los objetivos que tienen el tamaño correcto ahora que tienes la información para crear tus propios objetivos del tamaño correcto.