0Pricing
Web Accessibility Academy · Lección

Los encabezados son navegación, no solo texto grande

Cómo los usuarios saltan de un encabezado a otro para explorar una página.

Los encabezados son navegación, no solo texto grande es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 3 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 Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.

Partes de esta lección aún no han sido traducidas y se muestran en inglés.

Headings Are a Menu

To a screen reader user, your headings are a table of contents. They are not just bold text; they are how people move through a page. 🧭

Jump Heading to Heading

One keypress moves a screen reader from one heading to the next. Users skim a page by hopping between headings, not by reading every word.

Pull Up the Whole List

Many screen readers can list every heading at once, like a pop-up outline. Users scan that list to find the section they want.

Jump to a Level

Users can also jump only between same-level headings, like all the h2 sections. Good levels make this shortcut precise and fast.

Fake Headings Vanish

A bold styled div looks like a heading but is invisible to this navigation. Screen reader users simply never find it.

<div class="big-bold">Pricing</div>

Use Real Heading Tags

Only real h1 through h6 tags join the navigation list. Styling text big does nothing; the tag is what carries the meaning.

<h2>Pricing</h2>

Headings Need Words

Each heading is a signpost, so write descriptive text. Reading the headings alone should give a clear map of the page.

Frequency Helps

Long sections with no heading leave users stranded with no shortcut to jump to. Break content up so people can land near what they need.

Do Not Overdo It

Marking every line as a heading floods the navigation list and hides the real structure. Reserve headings for genuine section starts.

Headings Build Trust

A clear heading outline tells users a page is well built. They navigate faster and stay confident they will not miss content.

Sighted Users Win Too

Real headings also feed in-page links, browser outlines, and search engines. Good structure quietly helps everyone, not only screen readers.

Quick Check

How do many screen reader users primarily move through a page?

Recap

You learned that real headings form a navigable outline. Users jump between them, so use true heading tags with descriptive words. ✅

Preguntas frecuentes

¿La lección «Los encabezados son navegación, no solo texto grande» es gratis?

Sí — el texto completo de «Los encabezados son navegación, no solo texto grande» 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 Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Los encabezados son navegación, no solo texto grande»?

Cómo los usuarios saltan de un encabezado a otro para explorar una página. Practicas Web Accessibility 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 Web Accessibility Academy?

No se requiere experiencia previa. Web Accessibility 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 3 de 4.

¿Cuánto tiempo toma la lección «Los encabezados son navegación, no solo texto grande»?

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 Web Accessibility Academy?

Sí. Cada lección de Web Accessibility 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

  1. Un h1 por página: nombre el tema principal
  2. Niveles de anidamiento sin saltos
  3. Los encabezados son navegación, no solo texto grande
  4. Audite la estructura de una página de oído
← Volver a Web Accessibility Academy