JH A11y tools

Acciones rápidas de accesibilidad

JH A11y Tools es una extensión técnica diseñada para facilitar las auditorías de accesibilidad web a equipos de QA y desarrollo. Permite validar un pequeño conjunto de criterios clave de las pautas WCAG de forma visual y directa sobre el navegador, manteniendo un entorno de trabajo limpio y profesional. Centraliza en una sola herramienta utilidades que habitualmente requieren múltiples extensiones y configuraciones manuales en DevTools, facilitando la revisión de texto, reflow, nombres accesibles y objetivos táctiles. FUNCIONALIDADES PRINCIPALES AMPLIAR SOLO TEXTO: Tres modos para revisar el comportamiento del diseño al aumentar texto sin depender del zoom global del navegador: - HTML 200%: incrementa el tamaño base del documento desde la raíz (html), útil para observar tipografía y layout a nivel global. - Computed x2: duplica los tamaños de texto calculados en los elementos, facilitando la identificación visual de solapes, recortes o pérdidas de legibilidad. - Computed x2 forzado: aplica el incremento x2 venciendo estilos restrictivos cuando el modo normal no refleja cambios en todos los componentes. ESPACIADO DE TEXTO (WCAG 1.4.12): Aplica ajustes de line-height, letter-spacing y word-spacing para verificar legibilidad y estabilidad del contenido en las condiciones de la pauta. REFLOW Y ZOOM (WCAG 1.4.10): Facilita la validación de escenarios de reflow y la inspección visual de desbordamientos horizontales mediante emulación de resoluciones específicas con el protocolo Debugger, para verificar si el contenido se adapta correctamente sin necesidad de scroll horizontal. EMULACIÓN MÓVIL Y TABLET: Simula viewport y contexto táctil con el protocolo Debugger para permitir revisión manual de adaptabilidad, orientación y patrones de interacción con puntero táctil emulado. NOMBRES ACCESIBLES: Visualiza qué nombre recibe cada elemento para tecnologías de asistencia y clasifica su origen (texto, ARIA, label, etc.). Expone casos de nombre potencialmente débil (por ejemplo, cuando depende solo de placeholder o resulta poco descriptivo), permitiendo detectar discrepancias entre la experiencia visual y la del lector de pantalla para facilitar la revisión semántica. TAMAÑO ELEMENTOS INTERACTIVOS (TARGET SIZE, WCAG 2.2): Ayuda a identificar controles con áreas de interacción insuficientes. Resalta casos de fragmentación y marca elementos exentos para centrar la evaluación en los puntos críticos. CONFIGURACIÓN DEL PANEL: Permite mostrar u ocultar bloques de acciones según el flujo de auditoría de cada equipo y gestionar subopciones anidadas con sincronización padre-hijo para activar combinaciones de forma rápida. IDIOMA DE LA INTERFAZ: El popup puede configurarse en automático, español o inglés para adaptarse al idioma de trabajo sin cambiar el idioma global del navegador. INDICADORES DE ESTADO EN EL POPUP: Muestra el número de acciones activas y mantiene mensajes de estado más claros para facilitar el seguimiento de la sesión de auditoría. RECOMENDACIONES DE USO Esta herramienta optimiza el flujo de trabajo del auditor, pero no sustituye el criterio técnico profesional. - Validación manual: se recomienda revisión complementaria. - Contraste con DevTools: especialmente al inicio, conviene contrastar hallazgos con las DevTools nativas de Chrome. PRIVACIDAD Y SEGURIDAD Herramienta profesional ligera y sin dependencias externas. No recopila datos, no rastrea la actividad del usuario y está optimizada para trabajar de forma segura en entornos de prueba locales y de pre-producción. Toda la lógica de análisis se ejecuta íntegramente en el cliente. NOVEDADES DE LA VERSIÓN 2.11.2 MEJORAS DE CONFIGURACIÓN EN EL POPUP: Se incorpora configuración por bloques con subopciones anidadas y sincronización padre-hijo para controlar mejor qué utilidades están visibles y activas. IDIOMA DEL POPUP: Nuevo ajuste de idioma de interfaz (automático, español o inglés) para facilitar el uso en equipos mixtos. EVOLUCIÓN DE NOMBRES ACCESIBLES: Mejoras en clasificación, conflictos y señales de nombres débiles para reducir ruido y facilitar revisión semántica en casos reales. MAYOR PRECISIÓN EN TARGET SIZE: Ajustes en la detección de áreas fragmentadas y refinamiento visual de estados para reducir falsos positivos. ROBUSTEZ EN VIEWPORT/REFLOW: Mejoras en estabilidad de emulación, sincronización del estado tras eventos del debugger y comportamiento del popup en escenarios de auditoría continua. AJUSTES DE UX Y LEGIBILIDAD: Refinos de interfaz en cabecera/subtítulo, contadores y mensajes para una lectura más clara durante el análisis. NOVEDADES DE LA VERSIÓN 2.6.0 CÁLCULO DE NOMBRE ACCESIBLE MÁS PRECISO: Se ha ajustado el motor para alinearlo mejor con ACCNAME y el comportamiento de Chrome. Se corrigen casos donde antes se tomaba texto interno que no debía computar, mejorando la detección real de controles sin nombre. MEJORA EN ELEMENTOS INTERACTIVOS GENÉRICOS: Ahora se detectan mejor elementos enfocables o clicables sin rol semántico (por ejemplo div con tabindex). Si toman nombre por texto visible, la extensión lo muestra y además avisa explícitamente con una alerta para identificar esta práctica anómala. ESTABILIDAD DE OVERLAYS Y CONTADORES: Se ha separado el cálculo base (totales y color por caso para todos los elementos, incluso fuera de scroll) del detalle avanzado. Con esto, los recuentos y estados visuales son más consistentes mientras se mantiene el análisis fino al inspeccionar cada elemento. NOVEDADES DE LA VERSIÓN 2.5.37 TAMAÑO ELEMENTOS INTERACTIVOS (TARGET SIZE): Incorporación del motor de análisis para evaluar las dimensiones de los objetivos táctiles (WCAG 2.2). Permite visualizar áreas de interacción, detectar elementos fragmentados y marcar automáticamente aquellos que están exentos de la normativa. INCORPORACIÓN DE NOMBRES DÉBILES: Nueva capacidad dentro del motor de nombres accesibles para exponer visualmente etiquetas basadas solo en placeholders o textos redundantes. EMULACIÓN VÍA DEBUGGER: Implementación del protocolo nativo de depuración de Chrome para lograr una mayor precisión en las funciones de Viewport, Reflow y puntero táctil. MÉTODOS DE ESCALADO DE TEXTO: Se añaden los modos Computed x2 y Computed x2 forzado para inspeccionar el comportamiento de fuentes en componentes con CSS restrictivo. DETECCIÓN DE DESBORDAMIENTO (SCROLL HINT): Nueva utilidad para localizar de forma inmediata elementos que rompen el layout y provocan scroll horizontal. RESÚMENES Y CONTADORES EN LA INTERFAZ: Visualización de métricas dinámicas que resumen el estado de la auditoría (errores, pases y elementos exentos) directamente en el panel. NOVEDADES DE LA VERSIÓN 1.5.2 AISLAMIENTO DE AUDITORÍA: Uso de Shadow DOM para que las etiquetas de la extensión no se mezclen con el diseño de la web. Esto permite ver los nombres accesibles con total claridad, sin que los estilos de la página (fuentes o colores) las deformen o las oculten. VERIFICACIÓN DE REFLOW PROFESIONAL: Nueva función para forzar la vista de la web a 1280px de ancho. Esto permite comprobar si el contenido se adapta correctamente sin necesidad de scroll horizontal, cumpliendo con el criterio técnico de diseño responsivo en accesibilidad. DETECCIÓN DE CONTENIDO SILENCIADO: Se ha implementado una lógica para identificar elementos que tienen el atributo aria-hidden="true" o están dentro de contenedores ocultos para AT. La herramienta los marca como "Ocultos para AT", alertando sobre botones o textos que el usuario de lector de pantalla no podrá encontrar. MONITORIZACIÓN INTELIGENTE: El sistema de análisis ahora solo reacciona a cambios reales en la accesibilidad (como nuevas etiquetas o roles). Esto evita que la herramienta consuma recursos innecesarios con animaciones o cambios visuales que no afectan a la navegación asistida. AUTONOMÍA POR PESTAÑA: La extensión ahora recuerda de forma independiente qué herramientas tenías activadas en cada pestaña. Puedes saltar de una web a otra sin perder tus filtros ni tener que reconfigurar la sesión de auditoría en cada página. INDICADOR DE ERRORES AL INSTANTE: Incorporación de un contador numérico sobre el icono de la extensión. Permite saber cuántos elementos carecen de nombre accesible en la página actual de un vistazo rápido, sin necesidad de abrir el panel de control. NOVEDADES DE LA VERSIÓN 1.1.0 MEJORA DE LOS NOMBRES ACCESIBLES: Implementación de filtros por tipo con contadores y sistema de actualización en tiempo real. MAYOR COMPATIBILIDAD: Soporte mejorado para páginas dinámicas y gestión de contenido en capas. CORRECCIONES DE DETECCIÓN: Optimización en la identificación de nombres y nueva funcionalidad de aviso sobre el margen de error en el cálculo. NOVEDADES DE LA VERSIÓN 1.0.17 CÁLCULO DE NOMBRES ACCESIBLES: Refactorización profunda del motor de cálculo para mejorar la precisión y la estructura del código. SOPORTE PARA SVG E IMÁGENES: Inclusión de estos elementos en el análisis para una auditoría más completa. POSICIONAMIENTO DE OVERLAYS: Ajuste de las etiquetas visuales para garantizar una visualización clara sobre el contenido.