Criterio 2.5.8 AA de las WCAG. Herramientas gratuitas para su evaluación manual
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.
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.
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):
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.
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.
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.
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.
Inspección de código
Tipo de herramienta: Inspección de código de Chrome
Descripción
Por último, siempre nos queda la inspección de código:
Inspección de código en Chrome
Artículos relacionados
- Libro "Accesibilidad Web. WCAG 2.2 de forma sencilla". Descarga gratuita.
- Vídeo: "Novedades de las WCAG 2.2", presentación de Olga Carreras en el webinar "¿Quieres conocer las últimas novedades en materia de accesibilidad digital?"
- AuditTool WCAG 2.2. Herramienta para auditorías de accesibilidad de acuerdo a las WCAG 2.2
- Validadores y herramientas para consultorías de accesibilidad y usabilidad
- Validador del Observatorio de Accesibilidad Web - Rastreador OAW. Validaciones y fiabilidad (Parte II)