El Inspector de Accesibilidad ejecuta verificaciones automatizadas WCAG 2.1 Nivel AA en cualquier página web y produce un informe categorizado de problemas de accesibilidad. Detecta proporciones insuficientes de contraste de color, texto alt de imagen faltante, roles y atributos ARIA inadecuados, etiquetas de formulario faltantes, problemas de navegación por teclado y regiones de referencia faltantes — con resaltado de elementos con un clic para cada problema encontrado.
La accesibilidad web no es opcional — es un requisito legal en muchas jurisdicciones y esencial para el 15% de la población global que vive con discapacidades. Sin embargo, los problemas de accesibilidad son invisibles durante el desarrollo y las pruebas normales. Un botón puede verse bien pero ser completamente inaccesible para los lectores de pantalla porque es un div estilizado sin un atributo role. El texto puede ser legible para ti pero no cumplir con los requisitos de contraste para usuarios con baja visión. El Inspector de Accesibilidad revela estos problemas invisibles automáticamente. Verifica docenas de criterios WCAG 2.1 Nivel AA incluyendo proporciones de contraste de color (mínimo 4.5:1 para texto normal, 3:1 para texto grande), texto alt faltante en imágenes, etiquetas faltantes en entradas de formulario, roles y atributos ARIA inadecuados, regiones de referencia del documento faltantes (nav, main, footer) e indicadores de enfoque de teclado. Cada problema incluye el elemento afectado, el criterio WCAG específico violado y una recomendación sobre cómo solucionarlo. Haz clic en cualquier problema para resaltar el elemento en la página.
Ejecuta verificaciones automatizadas contra los criterios de éxito WCAG 2.1 Nivel AA incluyendo categorías de perceptibilidad, operabilidad, comprensibilidad y robustez. Cada verificación muestra el criterio específico (p. ej., 1.4.3 Contraste, 1.1.1 Contenido No Textual) y el estado aprobado/fallido.
Calcula la proporción de contraste entre los colores de texto y fondo para cada elemento de texto en la página. Señala elementos por debajo de 4.5:1 para texto normal o 3:1 para texto grande (18px+ o 14px+ en negrita). Muestra la proporción real y la mínima requerida.
Escanea cada elemento img, svg y con role de imagen. Señala atributos alt faltantes, alt vacío en imágenes no decorativas y texto alt demasiado genérico ("imagen", "foto"). Sugiere si cada imagen necesita alt descriptivo, alt vacío (decorativo) o role="presentation".
Verifica el uso inadecuado de roles ARIA (roles en elementos incorrectos), atributos ARIA requeridos faltantes (p. ej., aria-label en botones de ícono), IDs duplicados referenciados por aria-labelledby y regiones de referencia faltantes (sin main, sin nav). Recomienda alternativas de HTML semántico.
Asegura que cada entrada de formulario (text, email, password, checkbox, select) tenga una etiqueta asociada — ya sea a través de un elemento label con for/id coincidente, aria-label o aria-labelledby. Las entradas sin etiquetar son inaccesibles para los lectores de pantalla.
Los problemas se categorizan como Errores (deben corregirse — barreras de acceso), Advertencias (deberían corregirse — barreras potenciales) y Aprobados (accesibilidad confirmada). El conteo de errores se muestra de forma prominente. Haz clic en cualquier problema para resaltar el elemento afectado en la página.
Antes de lanzar una nueva página o función, ejecuta el Inspector de Accesibilidad para detectar problemas temprano. El texto alt faltante, campos de formulario sin etiqueta y violaciones de contraste son fáciles de corregir durante el desarrollo pero costosos de descubrir en producción.
Muchas jurisdicciones requieren cumplimiento con WCAG 2.1 Nivel AA (ADA en EE.UU., EAA en la UE). Ejecuta el inspector en tus páginas públicas para identificar brechas de cumplimiento antes de que se conviertan en riesgos legales.
Incluye la verificación de accesibilidad como parte de tu proceso de QA. Después del QA visual y las pruebas funcionales, ejecuta el Inspector de Accesibilidad para verificar que la implementación no introduce regresiones de accesibilidad.
Ejecuta el inspector en tu sitio actual durante una reunión de equipo para mostrar problemas reales de accesibilidad. El resaltado visual y las explicaciones claras ayudan a los desarrolladores a entender cómo se ve el marcado accesible y por qué importa.
Audita páginas que incluyen widgets de terceros, contenido incrustado o HTML generado por usuarios. Estas fuentes a menudo introducen problemas de accesibilidad (texto alt faltante, violaciones de contraste) de los cuales sigues siendo responsable como propietario de la página.
Abre el dock flotante de DevSuite Pro y haz clic en el ícono del Inspector de Accesibilidad. La herramienta escanea el DOM de la página en busca de problemas de accesibilidad.
Aparece un informe categorizado con Errores (rojo), Advertencias (amarillo) y Aprobados (verde). Cada sección lista problemas específicos con elementos afectados y referencias a criterios WCAG.
Haz clic en cualquier problema para resaltar el elemento afectado en la página con un borde de color y desplazarte a él. La conexión entre el informe y el elemento DOM es inmediata.
Cada problema incluye una recomendación específica: "Agrega texto alt describiendo el contenido de la imagen", "Aumenta el contraste del color de fuente a al menos 4.5:1", "Agrega un elemento label con for='email'".
Haz cambios en tu código, recarga la página y ejecuta la auditoría nuevamente. El conteo de errores debería disminuir a medida que se resuelvan los problemas. Apunta a cero errores.
Instala DevSuite Pro gratis y desbloquea más de 39 herramientas de desarrollador para tu navegador.
