CIRCLES - Bookmarklet para evaluar el criterio WCAG 2.5.8 (Tamaño de Objetivo).

Comentarios:

El bookmarklet solo se muestra en los elementos menores a 24px (teniendo en cuenta su área cliqueable).

Arrastrá este botón a tu barra de marcadores. Luego, al visitar un sitio web, hacé clic en el marcador para visualizar un círculo de 24px alrededor de todos los elementos interactivos menores a 24px (tomando en cuenta el área cliqueable). De esta forma se puede evaluar si estos círculos se superponen unos con otros. El círculo tiene borde rojo y puede no contrastar en algunos colores de fondo.

Actualización:

• Se agrega una línea punteada blanco y negro por la parte superior e inferior de los círculos para mejorar la detección visual de la alineación y proximidad de los objetivos.
• Se incluye un cartel de alerta para notificar la cantidad de controles superpuestos. Esto puede variar dependiendo del zoom de la pantalla o la versión. Se debe revisar en varios tamaños de pantalla.
• Se agrega una función para evaluar enlaces y botones con imágenes dentro tomando en cuenta el tamaño de la imagen como área cliqueable.

Nota: En algunas pantallas, el bookmarklet podría incluir elementos ocultos o no fijos debido a la maquetación del sitio. Por otro lado, este bookmarklet no es 100% accesible para usuarios con baja visión, debido a que no se proporcionan alternativas sensoriales.

También podés hacer clic derecho y seleccionar "Guardar este enlace como marcador" si estás en móvil o no podés arrastrarlo.

Más información: 2.5.8 Target Size Minimum.

Criterio 2.5.5 Target Size (Enhanced)

Este es un extra para revisar los elementos menores de 44px por 44px si se desea. En este caso, no analiza colisiones, simplemente marca todos los elementos menores.

Más información: 2.5.5 Target Size (Enhanced) (Level AAA)

Contacto para Comentarios y Errores:

Si tienes comentarios, recomendaciones o encuentras algún error, por favor, no dudes en contactarme a través de: emilianomontani@gmail.com

El código se puede modificar y mejorar. Si hacés alguna mejora, me alegraré de probarla.

¡Espero que esta herramienta te sea útil en tu trabajo diario! Muchas gracias por tu colaboración :)