Criterio 2.5.8 AA de las WCAG. Herramientas gratuitas para su evaluación manual

Criterio 2.5.8 de las WCAG 2.2 sobre el tamaño mínimo de 24 por 24 píxeles de los elementos de interacción

El criterio 2.5.8 AA "Tamaño del área de interacción (mínimo)" es un criterio de conformidad de las WCAG 2.2 que establece que el tamaño mínimo del área de interacción debe ser de al menos 24 por 24 píxeles CSS.

¿Cómo podemos validar manualmente este criterio? En este artículo reseño diversas herramientas gratuitas que nos pueden ayudar. Recuerda siempre verificar el resultado para evitar falsos positivos o negativos.

Muchas gracias a los autores por compartirlas desinteresadamente. Si queréis recomendar otras similares, podéis hacerlo en los comentarios.

Índice

Circles Bookmarklet de Emiliano Montani
Target size Bookmarklet de Steve Faulkner
24×24 Pixel Cursor Bookmarklet de Adrian Roselli
Validadores autómaticos (Stark, AXE, Lighthouse,...)
Inspección de código

Circles Bookmarklet de Emiliano Montani

Tipo de herramienta: Bookmarklet

Autor: Emiliano Montani

Enlace a la herramienta: Circles Bookmarklet

Descripción

La herramienta muestra un círculo de 24 píxeles de diámetro dibujado desde el centro de los elementos de interacción.

Captura de un pie de página con listados de enlaces. Cada enlace tiene un círculo rojo desde su centro de 24 por 24 píxeles. El círculo está entre dos rectas paralelas, una tangente en la parte superior y otra tangente en la parte inferior. Esas rectas no son líneas continuas, sino que están formadas por pequeñas rayas que se repiten de manera alternada en blanco y negro

La herramienta muestra el círculo solo en los elementos interactivos menores de 24 píxeles, teniendo en cuenta su área clicable.

Se agrega una línea punteada en blanco y negro en la parte superior e inferior de los círculos, que resulta muy útil para detectar la proximidad de los elementos y detectar si colisionan. Además, como el punteado es blanco y negro, ofrece suficiente contraste sobre cualquier fondo.

Tengo que decir que se ha convertido en mi favorita.

Montani incluye también una versión de la herramienta para evaluar el criterio 2.5.5 de nivel AAA. En este caso, la herramienta indica cuántos elementos de interacción menores de 44 x 44 píxeles ha encontrado y establece el círculo en color amarillo (hay que advertir que menos perceptible que el rojo):

Mensaje de alerta indicando que se han encontrado 214 elementos menores de 44 píxeles

Varios iconos de una página web con un círculo amarillo alrededor

Montani también tiene otro bookmarklet muy útil: Focus 2.4.7 - (Foco visible)

Muchas de las páginas web que analizo no tienen el foco de teclado visible, porque se ha deshabilitado con el estilo outline:0 o outline:none. Además de ser un error de accesibilidad, como auditora, me ralentiza mucho revisar el acceso por teclado.

El bookmarklet Focus 2.4.7 - (Foco visible) añade un foco visible a todos los elementos que reciben el foco de teclado. Eso te ahorra tener que deshabilitar estos estilos en la inspección de código para poder auditar qué elementos están o no recibiendo el foco.

Por supuesto, no solo es útil para los auditores, también puede ser utilizado por las personas que acceden solo con el teclado.

Existen otros bookmarklet similares a Focus 2.4.7 - (Foco visible) como: Force :focus outline bookmarklet de Patrick H. Lauke.

Target size Bookmarklet de Steve Faulkner

Tipo de herramienta: Bookmarklet

Autor: Steve Faulkner

Enlace a la herramienta: target size Bookmarklet

Descripción

Esta herramienta identifica los elementos interactivos, calcula el centro del elemento y dibuja desde dicho centro un círculo de 24 por 24 píxeles. Hasta aquí, igual que la de Montani.

Sin embargo, a diferencia de la herramienta anterior, se muestran los círculos en todos los elementos de interacción, diferenciando los que tienen un área de interacción mayor o menor de 24 píxeles por el color.

Captura de un pie de página con listados de enlaces. Cada enlace tiene un círculo desde su centro de 24 por 24 píxeles. Algunos enlaces tienen un círculo azul y otros un círculo verde.

Personalmente, me resulta incómoda de usar.

Las desventajas que le veo a la herramienta de Steve Faulkner son:

tengo que memorizar el código de color,
no tengo las líneas punteadas que me ayudan a comprobar si colisionan,
el color de los círculos no suele tener contraste con el fondo,
los círculos verdes tienen un borde sólido, pero esto no resuelve los problemas de contraste entre los dos tipos de círculos, por lo que, en la práctica, la información se acaba transmitiendo solo por el color.

Con la herramienta de Montani encuentro los problemas con mayor rapidez y facilidad. La Steve Faulkner me resulta más complicada de interpretar y menos perceptible, lo cual será una barrera importante para muchas personas.

Por último, comentar que cuando se activa la herramienta de Faulkner se muestra un mensaje indicando cuántas superposiciones hay. También les agrega el atributo aria-description="overlaps" para encontrarlas en la inspección de código.

Mensaje de alerta indicando que se han encontrado 6 superposiciones

24×24 Pixel Cursor Bookmarklet de Adrian Roselli

Tipo de herramienta: Bookmarklet

Autor: Adrian Roselli

Enlace a la herramienta: 24×24 Pixel Cursor Bookmarklet

Descripción

La herramienta de Adrian Roselli es diferente a las de Emiliano Montani y Steve Faulkner. En este caso, el puntero de ratón se convierte en un círculo que puedes situar encima de los elementos.

En mi caso, la uso para realizar alguna comprobación rápida y puntual.

Tres tipos de puntero de ratón circulares de 24 por 24 píxeles.

Tiene diferentes variantes: con forma de círculo y con forma de cuadrado.

También dispone de una página de prueba con diferentes elementos de ejemplo para validar.

Curtis Wilcox tiene variantes del cursor circular de este Bookmarklet, puedes probarlas y comprobar cuál te resulta más visible con diferentes fondos: 24px Circle Cursor Bookmarklet variants.

Por último, Adrian Roselli tiene una versión para el criterio 2.5.5 AAA que, como he indicado, exige un tamaño mínimo de 44 por 44 píxeles: CodePen Home 44×44 Pixel Cursor Bookmarklet. Es igual que la Jared Smith (44x44 Pixel Cursor Bookmarklet) pero la Roselli se desactiva con ESC.

Stark

Hay diversos validadores autómaticos que revisan también el criterio 2.5.8, como las extensiones Stark, AXE y Lighthouse, pero recuerda siempre verificar los resultados.