Jerarquía de encabezados para lectores de pantalla
Estructure los encabezados para que los usuarios de lectores de pantalla puedan navegar eficazmente
Jerarquía de encabezados para lectores de pantalla es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
Cómo navegan los lectores de pantalla por los encabezados
Las personas usuarias de lectores de pantalla navegan principalmente por los encabezados:
- Presionan H para saltar al siguiente encabezado
- Presionan 1-6 para saltar a niveles de encabezado específicos
- Abren una lista de todos los encabezados (como un índice)
- Una jerarquía correcta de encabezados es esencial para que esta navegación funcione
Lista de encabezados del lector de pantalla
NVDA y JAWS pueden mostrar una lista de todos los encabezados de una página:
<!-- A well-structured page with this heading order: -->
<h1>HTML5 Complete Guide</h1>
<h2>Document Structure</h2>
<h3>The DOCTYPE</h3>
<h3>The html head body</h3>
<h2>Semantic Elements</h2>
<h3>Article</h3>
<h3>Section</h3>
<!-- Becomes a navigable list for screen reader users -->
<!-- Similar to a table of contents in a book -->Jerarquía incorrecta de encabezados
Errores comunes en la jerarquía de encabezados:
<!-- BAD: skipping h2, going straight from h1 to h3 -->
<h1>My Article</h1>
<h3>Introduction</h3> <!-- Skips h2! -->
<h4>Background</h4>
<!-- BAD: using headings for visual size -->
<h4 class="huge-title">This looks big</h4> <!-- h4 in logical order? -->
<!-- BAD: using bold text instead of headings for sections -->
<p><strong>Introduction</strong></p> <!-- Not a heading at all -->Jerarquía correcta en la práctica
Una estructura correcta de encabezados para una página de documentación:
<h1>HTML Forms Documentation</h1>
<h2>Overview</h2>
<h2>Form Elements</h2>
<h3>input</h3>
<h4>text type</h4>
<h4>email type</h4>
<h3>select</h3>
<h3>textarea</h3>
<h2>Validation</h2>
<h3>Built-in Validation</h3>
<h3>Custom Validation</h3>Un solo h1 por página
Práctica recomendada: exactamente un <h1> por página:
<h1>JavaScript Array Methods</h1>
<!-- This is the page's main topic -->
<!-- Should match or closely relate to the <title> element -->
<!-- Appears as the main heading users see first -->
<!-- Search engines give it the highest SEO weight -->Los niveles de encabezado reflejan la jerarquía del contenido
Los niveles de encabezado expresan la estructura lógica del contenido:
- Use
<h2>para las secciones principales de la página - Use
<h3>para las subsecciones dentro de las secciones h2 - Use
<h4>para las subsubsecciones - En la práctica, rara vez se necesita más de h4
No use encabezados para el estilo visual
Nunca elija un nivel de encabezado por su tamaño visual predeterminado:
/* BAD approach: h4 because it looks right: */
<h4 style="font-size: 2rem;">Section Title</h4>
/* CORRECT approach: right level, resized with CSS: */
<h2>Section Title</h2>
/* Then: h2 { font-size: 2rem; } */
/* Or: aria-label on section if heading would disrupt structure:
— rare, usually better to fix the heading level */WCAG 2.4.6 Encabezados y etiquetas
La WCAG 2.4.6 (nivel AA) exige lo siguiente:
Los encabezados y las etiquetas describen el tema o el propósito.
- Los encabezados deben describir con precisión el contenido de la sección
- Los encabezados genéricos como «Sección» o «Detalles» no cumplen este criterio
- Las etiquetas de los campos de formulario deben describir el propósito del campo
Uso de encabezados en componentes
Al crear componentes reutilizables, los niveles de encabezado deben ser flexibles:
<!-- BAD: hardcoded heading level in a card component -->
<div class="card">
<h3>Card Title</h3> <!-- What if card appears in h2 or h4 context? -->
</div>
<!-- GOOD: document context determines level -->
<!-- Component receives level as a parameter in JS frameworks -->
<!-- Or use aria-level on a generic element -->
<div role="heading" aria-level="3">Dynamic Level Heading</div>El esquema del documento
Consulte el esquema de encabezados de la página en las herramientas de desarrollo del navegador o en estas herramientas:
- Chrome → panel Accesibilidad → vista Nombre/rol
- Firefox → pestaña Accesibilidad
- Extensión HeadingsMap para Chrome: muestra el esquema visual
- Herramienta de accesibilidad WAVE: sección de encabezados
Alineación de encabezados y SEO
La jerarquía de encabezados se ajusta a las buenas prácticas de SEO:
- Los motores de búsqueda analizan la jerarquía de encabezados para comprender la estructura del contenido
- H1 = tema principal (coincide con el título); H2 = subtemas principales; H3 = detalles
- Incluir palabras clave de forma natural en los encabezados mejora las señales de relevancia de la página
- Una estructura correcta de encabezados proporciona simultáneamente una mejor accesibilidad y un mejor SEO
Enlaces para omitir la navegación y encabezados
Combine los enlaces para omitir la navegación con la navegación mediante encabezados:
<!-- Skip link bypasses nav to main content: -->
<a href="#main-content" class="skip-link">Skip to main content</a>
<!-- Main content heading enables heading navigation: -->
<main id="main-content">
<h1>Page Title</h1>
</main>
<!-- Screen reader users: skip link for fast access;
heading navigation for page exploration -->Comprobación rápida
¿Cómo suelen desplazarse los usuarios de lectores de pantalla entre los encabezados?
Repaso: jerarquía de encabezados
Aspectos esenciales de la accesibilidad de los encabezados:
- Un
<h1>por página: el tema principal - Use los niveles de encabezado en orden: nunca omita niveles
- Los encabezados describen el contenido, no el tamaño visual
- Los usuarios de lectores de pantalla navegan con la tecla H y la lista de encabezados
- Compruebe el esquema con HeadingsMap o WAVE
Aprende HTML con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 40
- Lecciones
- 159
Preguntas frecuentes
¿La lección «Jerarquía de encabezados para lectores de pantalla» es gratis?
Sí — el texto completo de «Jerarquía de encabezados para lectores de pantalla» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Jerarquía de encabezados para lectores de pantalla»?
Estructure los encabezados para que los usuarios de lectores de pantalla puedan navegar eficazmente Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Jerarquía de encabezados para lectores de pantalla»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Por qué importa la accesibilidad: niveles WCAG
- Jerarquía de encabezados para lectores de pantalla
- Texto alternativo de imágenes: cuándo y cómo
- Navegación con teclado y orden del foco