Los encabezados no deben estar vacíos

Los usuarios de lectores de pantalla navegan frecuentemente por las páginas web saltando entre encabezados para obtener una visión general del contenido, de manera similar a como los usuarios videntes escanean visualmente una página. Cuando un elemento de encabezado está vacío o su contenido está oculto a las tecnologías de asistencia, el lector de pantalla anuncia algo como “encabezado nivel 2” sin nada después. Esto es desorientador y puede hacer que los usuarios piensen que falta contenido o que la página está rota.

Esta regla está marcada como una mejor práctica de Deque y afecta principalmente a usuarios ciegos o sordociegos que dependen de lectores de pantalla, aunque también impacta a usuarios con discapacidades de movilidad que usan navegación basada en encabezados. Los encabezados bien estructurados y significativos son fundamentales para una página accesible: comunican el esquema del documento y ayudan a todos los usuarios a encontrar la información que necesitan rápidamente.

Un encabezado puede estar efectivamente “vacío” de varias maneras:

• El elemento no contiene texto en absoluto (<h2></h2>)
• El elemento contiene solo espacios en blanco o elementos no textuales sin nombre accesible
• El texto está oculto a las tecnologías de asistencia usando aria-hidden="true" o CSS como display: none

Cómo solucionarlo

1. Añade texto significativo a cada elemento de encabezado. Los encabezados deben ser breves, claros y descriptivos de la sección que introducen.
2. Elimina las etiquetas de encabezado de elementos que no son realmente encabezados. No uses <h1> hasta <h6> solo para estilo visual: usa CSS en su lugar.
3. No ocultes el texto del encabezado a los lectores de pantalla usando aria-hidden="true" o display: none. Si un encabezado no debe ser visible en pantalla pero es necesario para accesibilidad, usa una técnica CSS visualmente oculta en su lugar.
4. Mantén una jerarquía lógica de encabezados. Los encabezados deben estar ordenados por nivel (<h1>, luego <h2>, luego <h3>, etc.) para transmitir con precisión la estructura de la página.

Como verificación rápida, lee solo los encabezados de tu página. Si no te dan una idea clara del contenido y estructura de la página, reescríbelos.

Ejemplos

Encabezado vacío (incorrecto)

<h2></h2>
<p>This section has no heading text.</p>

El <h2> es anunciado por un lector de pantalla, pero no hay contenido que leer.

Encabezado con solo espacios en blanco (incorrecto)

<h3>   </h3>

Solo espacios en blanco no proporcionan un nombre accesible, así que esto se trata como vacío.

Encabezado oculto a las tecnologías de asistencia (incorrecto)

<h2 aria-hidden="true">About Our Team</h2>

El atributo aria-hidden="true" oculta el encabezado completamente de los lectores de pantalla, aunque los usuarios videntes pueden verlo. Esto crea un vacío en la estructura de la página para los usuarios de tecnologías de asistencia.

Encabezado oculto con CSS (incorrecto)

<h2 style="display: none;">Contact Us</h2>

Usar display: none elimina el encabezado tanto del diseño visual como del árbol de accesibilidad, haciéndolo inaccesible para todos.

Encabezado con texto visible (correcto)

<h2>About Our Team</h2>
<p>We are a small company dedicated to accessible design.</p>

El encabezado describe claramente la sección que sigue.

Encabezado visualmente oculto solo para lectores de pantalla (correcto)

Cuando se necesita un encabezado para la estructura del documento pero no debe aparecer visualmente, usa una clase visualmente oculta en lugar de display: none o aria-hidden:

<style>
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
</style>

<h2 class="visually-hidden">Main Navigation</h2>
<nav>
  <a href="/home">Home</a>
  <a href="/about">About</a>
</nav>

Esto mantiene el encabezado accesible para lectores de pantalla mientras lo oculta visualmente.

Encabezado con una imagen que tiene texto alt (correcto)

<h1>
  <img src="logo.png" alt="Acme Corporation">
</h1>

El nombre accesible del encabezado proviene del atributo alt de la imagen, así que el encabezado no se considera vacío.

Learn more:

Deque Reference

Deque University - How To Fix

→

W3C Reference

WCAG 2.1 - Providing descriptive headings

→

W3C Reference

WCAG 2.1 - Using role=heading to identify headings

→