TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
La jerarquía de encabezados (<h1> a <h6>) debe descender lógicamente paso a paso (ej. h2 seguido de h3). Saltar niveles (ej. de h2 a h4) rompe el índice generado por los lectores de pantalla y confunde la estructura mental de la persona usuaria.
El abuso visual de la semántica estructural
Los desarrolladores y diseñadores frecuentemente eligen una etiqueta <h4> en lugar de un <h3> simplemente porque "el tamaño de letra del h4 encaja mejor en el diseño". Esta práctica acopla peligrosamente la presentación visual con la estructura de datos, violando la WCAG 1.3.1.
El patrón erróneo: Código Accesible Deficiente
El lector de pantalla anunciará un nivel 4, y la persona usuaria se preguntará: "¿Dónde quedó la sección 3? ¿Me perdí de algo?".
<!-- MAL: Salto injustificado en la jerarquía -->
<h2>Nuestros Servicios</h2>
<p>Texto introductorio...</p>
<h4>Consultoría Técnica</h4> <!-- ¡Falta el h3! -->La Solución Accesible: Código Recomendado
Mantener la estructura semántica intacta (incrementando solo un nivel a la vez) y usar clases CSS para alterar el tamaño visual si es necesario.
<!-- BIEN: Estructura lógica con estilos delegados a CSS -->
<style>
.text-sm-title { font-size: 1.2rem; } /* Apariencia de h4 */
</style>
<h2>Nuestros Servicios</h2>
<p>Texto introductorio...</p>
<h3 class="text-sm-title">Consultoría Técnica</h3>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
Con NVDA, presionar D para saltar entre landmarks (puntos de referencia). Verificar que las regiones semánticas sean detectadas correctamente y que sus nombres sean descriptivos. En JAWS, usar R para navegar entre regiones. En VoiceOver (macOS), abrir el Rotor (VO+U) y verificar la lista de "Puntos de referencia".
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.
