Comprobaciones automatizadas de accesibilidad: qué detectan y qué no

Publicar un cambio de plantilla el viernes y esperar que la accesibilidad "se arregle sola" es cómo llegan a producción enlaces vacíos y lang faltante. Las comprobaciones automatizadas no sustituyen una auditoría experta, pero sí detectan en minutos un conjunto predecible de errores de marcado — si sabes qué miden y qué ignoran.

El Comprobador de accesibilidad en Scrawl obtiene una URL, parsea el HTML crudo (hasta 1,5 MB) y ejecuta reglas fijas: alt en imágenes, nombres de enlaces y botones, etiquetas de formulario, estructura de cabeceras, lang y <title> del documento, id duplicados y un conjunto pequeño de mal uso de ARIA. No se ejecuta JavaScript. Los resultados se agrupan por comprobación con severidades error, aviso e info — sin puntuación porcentual ni certificado WCAG.

!Flujo en tres pasos desde fetch seguro hasta incidencias por severidad

Por qué merece la pena una primera pasada estática

Las pruebas manuales de accesibilidad son lentas. Probar cada estado de cada componente antes de cada despliegue no escala. Los linters estáticos cambian profundidad por velocidad: señalan patrones que rompen el acceso básico — controles sin nombre, idioma del documento ausente, imágenes sin alt — antes de abrir VoiceOver o NVDA.

Eso importa por tres motivos prácticos:

1. Contexto de uso — Campos sin etiqueta y enlaces solo icono sin nombre accesible impiden completar tareas con lector de pantalla o control por voz. Corregir esos patrones en el HTML es una base antes de pruebas más profundas.
2. Semántica — Motores de búsqueda y tecnologías asistivas usan el HTML. Un <title> vacío o un id duplicado que rompe label[for] perjudica a personas y a scripts.
3. QA de plantillas — Cambios de CMS y cabeceras repiten los mismos errores en todo el sitio. Una URL en staging con un linter detecta fallos de clase antes del corte.

Trata los resultados como lista de control previa, no como meta final.

Qué significa cada comprobación

Texto alternativo en imágenes

Detecta: img sin atributo alt; input type="image" sin alt útil. Omite decorativas con alt="", role="presentation" o aria-hidden="true".

Corrección:

<img src="/equipo.jpg" alt="Equipo de soporte en la oficina de Manchester">
<img src="/divisor.svg" alt="" role="presentation">

Para inventario imagen a imagen, usa el Comprobador de alt de imágenes.

Enlaces y botones sin nombre accesible

Detecta: a[href] sin texto visible ni aria-label, aria-labelledby válido, title ni img con alt. Botones vacíos.

Corrección:

<a href="/carrito" class="icon-cart" aria-label="Carrito, 3 artículos"></a>

Etiquetas de formulario

Detecta: input, select y textarea sin asociación de etiqueta. Solo title genera aviso.

Consulta MDN: etiquetar formularios para patrones de asociación.

Cabeceras

Detecta: Sin h1, varios h1 (info), niveles saltados, cabeceras vacías.

Para esquema visual, usa el Visualizador de cabeceras. Para texto de cabeceras en muchas URLs, el Extractor H1/H2.

`lang` y `<title>`

Detecta: lang ausente o vacío en <html>, valores mal formados (aviso), <title> vacío.

IDs duplicados

Detecta: El mismo id en más de un elemento. Rompe label[for] y referencias ARIA.

ARIA (reglas acotadas)

Detecta: role inválido, aria-hidden="true" en elementos enfocables, referencias a ids inexistentes, role=button|link sin foco, roles redundantes (info).

Prefiere elementos nativos; revisa WAI-ARIA APG cuando uses widgets personalizados.

Qué omiten las herramientas automatizadas

| Área | Motivo |

|------|--------|

| Contraste | Requiere estilos calculados |

| Teclado | Orden de tabulación, modales y trampas de foco |

| Contenido dinámico | Etiquetas solo en cliente |

| Calidad del alt | Se detecta ausencia, no si el texto es útil |

La guía W3C de evaluación recomienda combinar pruebas automáticas, manuales y con usuarios.

Lista manual breve después del linter

1. Solo teclado — ¿Llegas a cada control con foco visible?
2. Zoom al 200% — ¿El contenido se reordena sin scroll horizontal?
3. Lector de pantalla — Un flujo crítico en VoiceOver o NVDA.
4. Formularios con error — ¿Los mensajes se anuncian y asocian al campo?

Combina herramientas

• Este linter — Una URL, muchas comprobaciones.
• Comprobador de alt — Inventario de imágenes.
• Visualizador de cabeceras — Esquema H1–H6.
• Extractor de enlaces — Inventario completo; el linter solo señala enlaces sin nombre.

Cuándo encargar una auditoría completa

Contratos públicos, flujos legales sensibles o widgets complejos en JavaScript justifican revisión experta aunque el HTML pase el linter.

Pega una URL de staging o producción en el Comprobador de accesibilidad. Corrige errores, prioriza avisos, exporta CSV si necesitas evidencia y reserva tiempo para teclado y lector de pantalla en los flujos que importan.