TL;DR (Too Long; Didn’t Read... o básicamente: mucho texto, dame el resumen rápido)
Utilizar etiquetas <h1> a <h6> vacías (sin texto) exclusivamente para aprovechar su margen o altura predeterminada genera entradas mudas en el índice de navegación de las tecnologías asistivas, causando confusión.
La indexación semántica interrumpida
Las tecnologías asistivas construyen un mapa jerárquico del sitio utilizando encabezados. Cuando se escanea el documento, un encabezado vacío se lee literalmente como "Encabezado nivel 2, blanco". Esto rompe el flujo y viola la WCAG 1.3.1 (Información y Relaciones).
El patrón erróneo: Código Accesible Deficiente
Aprovechamiento abusivo del CSS nativo (margin/padding) asociado a la etiqueta, ignorando por completo su carga semántica estructural.
<!-- MAL: Encabezado como separador visual -->
<h2>Nuestros Servicios</h2>
<div class="grid">...</div>
<h3></h3> <!-- Separador fantasma para dar espacio -->
<h2>Contacto</h2>La Solución Accesible: Código Recomendado
Eliminar absolutamente todo tag de encabezado que no posea contenido descriptivo, derivando las tareas de presentación y caja espaciadora exclusivamente a las hojas de estilo (CSS).
<!-- BIEN: Delegación al CSS -->
<style>
.mt-40 { margin-top: 40px; }
</style>
<h2>Nuestros Servicios</h2>
<div class="grid mb-40">...</div>
<h2>Contacto</h2>Metodología de Verificación y Testing
Pruebas Manuales con Lectores de Pantalla
En NVDA, presionar H para saltar entre encabezados. Si existe un <h3> vacío, el lector anunciará "Encabezado nivel 3, blanco" o simplemente hará una pausa silenciosa confusa. Verificar que al eliminar el encabezado vacío, la navegación por encabezados fluya naturalmente.
Inspección del Árbol de Accesibilidad
En Chrome DevTools, filtrar los nodos por rol heading. Cualquier encabezado con Name vacío es una violación. Verificar que la jerarquía sea secuencial (h1 → h2 → h3) sin saltos ni vacíos.
Herramientas Automatizadas
Axe DevTools: la regla empty-heading detecta encabezados sin contenido de texto. WAVE también marca encabezados vacíos con un icono de alerta específico. HeadingsMap (extensión del navegador) permite visualizar la estructura de encabezados de toda la página como un índice jerárquico.
