TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
El título de una tabla de datos nunca debe ser una celda <td colspan="5"> inyectada al principio. Para cumplir con la WCAG 1.3.1, debes utilizar la etiqueta semántica <caption> como el primer hijo de la tabla. Esto permite que el lector de pantalla enuncie el nombre de la tabla antes de entrar en su matriz.
La corrupción de la matriz de datos
Las tablas son el componente cognitivamente más denso para navegar mediante el teclado. Cuando una persona usuaria de lector de pantalla presiona la tecla "T" (atajo para saltar entre tablas), el sistema busca el <caption> para anunciarlo. Si el desarrollador "dibujó" el título fusionando celdas, la persona usuaria entrará a ciegas a la matriz, sin saber si está leyendo el presupuesto nacional o el calendario escolar.
El patrón erróneo: Código Accesible Deficiente
Un hack visual de maquetación que quiebra la estructura de columnas esperada por el software.
<!-- MAL: Título simulado mediante celda fusionada -->
<table>
<tr>
<td colspan="3" class="tabla-titulo">Presupuesto Nacional 2026</td>
</tr>
<tr>
<th>Entidad</th>
<th>Asignación</th>
</tr>
</table>La Solución Accesible: Código Recomendado
La etiqueta <caption> debe ser forzosamente la primera declaración después de la apertura de <table>.
<!-- BIEN: Relación semántica inquebrantable -->
<table>
<caption>Presupuesto Nacional Asignado para la Vigencia 2026</caption>
<thead>
<tr>
<th scope="col">Entidad</th>
<th scope="col">Asignación</th>
</tr>
</thead>
</table>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA, presionar T para saltar entre tablas. Una vez dentro de la tabla, usar Ctrl+Alt+Flechas para navegar celda por celda. Verificar que al moverse horizontalmente, el lector anuncie primero el encabezado de columna correspondiente y luego el dato de la celda.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, seleccionar el elemento afectado en el panel Elements, luego abrir la pestaña Accessibility. Verificar que las propiedades Role, Name y State reflejen correctamente la intención del componente según el criterio WCAG 1.3.1.
Herramientas Automatizadas
Ejecutar Axe DevTools: las reglas relacionadas con estructura (ej: list, listitem, landmark-*) son altamente confiables para detectar violaciones del Criterio 1.3.1. Complementar con el validador HTML del W3C para errores de modelo de contenido.
