H69Poner un encabezado al principio de cada sección de la página

Aplicabilidad

HTML

Descripción

El objetivo de esta técnica es utilizar encabezados de sección para transmitir la estructura del contenido. El marcado de encabezados puede usarse:

• para indicar el comienzo del contenido principal;
• para marcar los encabezados de sección dentro del área de contenido principal;
• para delimitar las distintas secciones de navegación, como la navegación superior o principal, la navegación izquierda o secundaria y la navegación del pie de página;
• para marcar las imágenes de texto que se utilizan como encabezados;
• para permitir a los usuarios navegar por la página por secciones o saltar bloques de información repetidos.

Los encabezados están diseñados para transmitir una jerarquía lógica. Saltarse niveles en la secuencia de encabezados puede dar la impresión de que la estructura del documento no se ha pensado bien o de que se han elegido determinados encabezados por su presentación visual y no por su significado. Se anima a los autores a anidar los encabezados de forma jerárquica. Cuando los encabezados se anidan jerárquicamente, la información más importante recibe el nivel lógico más alto y las subsecciones reciben los niveles lógicos siguientes (es decir, un h2 es una subsección de un h1). Proporcionar este tipo de estructura ayudará a los usuarios a comprender con más facilidad la organización general del contenido.

Dado que los encabezados indican el comienzo de secciones importantes del contenido, los usuarios de tecnología de asistencia pueden saltar directamente al encabezado adecuado y empezar a leer el contenido. Esto acelera notablemente la interacción para los usuarios que, de otro modo, accederían al contenido lentamente. Los encabezados crean bloques de información que las personas con discapacidad pueden encontrar fácilmente, como una persona ciega que usa un lector de pantalla, una persona con discapacidad cognitiva que usa una tecnología de asistencia que delimita grupos de información, o alguien con una discapacidad de comunicación o que no sabe leer y usa un lector de pantalla como ayuda para la lectura.

Ejemplos

<h1>Search Technical Periodicals</h1>
 <h2>Search</h2>
 <form action="/search" role="search">
  <label for="searchInput">Enter search topic:</label>
  <input id="searchInput" type="text">
  <input type="submit" value="Search">
 </form>
 <section>
   <h2>Available Periodicals</h2>
   <ul>
     <li><a href="https://example.com/pcoder">Professional Coder</a></li>
     <li><a href="https://example.com/algo">Algorithms</a></li>
     <li><a href="https://example.com/jse">Journal of Software Engineering</a></li>
   </ul>
 </section>
 <section>
   <h2>Search Results</h2>
   ... search results are returned in this section ...
 </section>

<main>
  <h1>Why Monday Monkey Lives For The Weekend</h1>
  ... text, images, and other material making up the main content ...
</main>
<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">More About Monday Monkey, Ltd.</h2>
  <ul>
    <li><a href="/about">About us</a></li>
    <li><a href="/contact">Contact us</a></li>
    ...
  </ul>
</nav>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Cooking techniques</title>  
  </head>   
  <body>
    <main>
      <h1>Cooking techniques</h1>     
      <p>... some text here ...</p>
      <h2>Cooking with oil</h2> 
      <p>... text of the section ...</p>
      <h2>Cooking with butter</h2>       
      <p>... text of the section ...</p>
    </main>
  </body> 
</html>

Pruebas

Técnicas relacionadas

• H42: Usar h1-h6 para identificar los encabezados
• H97: Agrupar enlaces relacionados con el elemento nav
• F2: Fallo del criterio de conformidad 1.3.1 debido a usar cambios en la presentación del texto para transmitir información sin usar el marcado o el texto apropiados

Recursos

• HTML - los elementos h1, h2, h3, h4, h5 y h6.
• MDN <h1> - <h6>: The HTML Section Heading elements (los elementos de encabezado de sección de HTML).
• Nomensa: How to structure headings for web accessibility (web.archive.org) (cómo estructurar los encabezados para la accesibilidad web).
• WebAIM: Semantic Structure: Regions, Headings, and Lists (estructura semántica: regiones, encabezados y listas).