El Blog de Accede Me

Los encabezados son la columna vertebral del contenido de una página. Un visitante debe ser capaz de escanear la página web usando los encabezados para tener una buena impresión de su contenido.

Los niveles de los encabezados tienen significado, especialmente para los usuarios de lectores de pantalla y buscadores de imágenes. Esto quiere decir que haya un único encabezado de primer nivel por página, con los demás encabezados que representan el contenido de la página, de forma similar al índice de un libro: fácilmente escaneable y semántico.

Escribe encabezados bien estructurados, porque lo que es bueno para tus lectores, es bueno también para tu SEO.

Los encabezados son elementos HTML. El encabezado principal, h1, es nivel 1. Los otros niveles son h2 hasta h6.

El Estándar de Vida HTML se establece en los encabezados. Se puede usar un encabezado cuando se espera un contenido de encabezado. El contenido del encabezado define la cabecera de una sección.

El Estándar de Vida HTML, Los elementos h1, h2, h3, h4, h5, y h6.

En resumen: usa un encabezado cuando el contenido o la estructura de la página lo requiera.

Resumen de las mejores prácticas

Usa unicamente un h1 por página que describa sobre que va la práctica. Ese h1 empieza preferiblemente encima del contenido principal. Usa encabezados para describir el contenido de debajo. No uses un encabezado HTML simplemente para hacer parecer más grande al texto o destacarlo.

Usa los niveles de los encabezados como el índice de un libro: jerárquico. No elija un título por su tamaño, sino por su nivel en el contexto del contenido. No salte un nivel de encabezamiento de arriba hacia abajo.

Jerárquico significa organizado desde el más importante al menos importante. El h1 es el encabezado más importante, mientras que el h6 es el menos importante.

En la práctica, para contenido web, usarás el h1 para el título de la página, dar a las secciones importantes un h2, y, si fuera necesario, añade un h3 o incluso hasta un h4 para dividir el contenido en la sección h2.

Sólo tiene que empezar con el h1 si eso tiene sentido para su estructura de contenido y diseño. Por ejemplo:

h2= menú principal
h1= título de una noticia
h2= subtítulo en el contenido de la noticia
h3= subtítulo del h2
h4= subtítulo del h3
h2= subtítulo en el contenido de la noticia
h2= Noticias relacionadas (la sección aparte)
h2= Contacta con nosotros (en el pie de página)
h3= Dirección (la información sobre la dirección)
h3= Síguenos (links de redes sociales)

¿Qué dicen las Directrices de Accesibilidad al Contenido en la Web (WCAG) sobre los encabezamientos? En realidad, no son muy específicos sobre este tema.

Algunos de los criterios de éxito de las WCAG 2 AA se refieren directamente a los títulos o a la estructura de los mismos, por ejemplo:

Criterio de éxito: 2.4.6 Títulos y etiquetas. Proporciona maneras para ayudar a la navegación de los usuarios , encuentra contenido y determina donde están. Los títulos y las etiquetas describen el tema o el propósito.

Criterio de éxito: 3.2.3 Nivel de Navegación Consistente. Los mecanismos de navegación que están repetidos en múltiples páginas webs dentro de un conjunto de páginas web se producen en el mismo orden relativo cada vez que se repiten, a menos que el usuario inicie un cambio.

Criterio de éxito: 1.3.1 Información y Relaciones. Información, estructura y relaciones que se transmiten a través de la presentación pueden determinarse de forma programada o estar disponibles en el texto. En otras palabras: si parece un encabezado, debería ser un encabezado en el HTML (y no por ejemplo texto en negrita).

En resumen: usa encabezados para describir contenido y úsalos de forma coherente y semántica. Esto ayudará a todos los usuarios a encontrar mejor el contenido que están buscando.

Únicamente el nivel AAA de las WCAG 2 exige que los títulos estén estructurados. El criterio de éxito 2.4.10 dice: Los títulos de las secciones se utilizan para organizar el contenido.

El estándar mundial de la web es doble A (AA), pero eso no significa que no pueda utilizar criterios de éxito que sean triple A (AAA) si es útil para sus usuarios.

Una estructura de títulos bien organizada ayuda a todos, especialmente a los usuarios de lectores de pantalla, a entender y navegar por una página web.

Ah, sí, esa vieja y acalorada discusión. ¿Puedo utilizar varios h1 en una página web? Respuesta corta: No. El h1 es sólo para el título de la página.

El uso de múltiples h1 se propuso con la introducción del esquema del documento HTML en HTML5. Cada sección del esquema podía contener un H1. Pero aquí está el problema: el esquema del documento nunca fue adaptado por los navegadores o la tecnología de asistencia. Por lo tanto, el soporte para múltiples h1s fue eliminado en HTML5.1

Si quieres conocer la historia completa, lee “Computer says NO to HTML5 document outline y A decade of heading backwards” de Steven Falkner y “There Is No Document Outline Algorithm” de Adrian Roselli.

Desafortunadamente, un ejemplo de múltiples h1s y el esquema de HTML es todavía una parte de las normas WHATWG HTML Living, aunque hay una discusión abierta en GitHub.

Concluyendo: Múltiples h1 en secciones para crear un esquema del documento no lo soportan los navegadores y por lo tanto es obsoleto.

Utilizar un h1 que describa el contenido de la página web. Estructurar el resto del contenido con subtítulos significativos. Esto sirve mejor a la accesibilidad y al SEO.

En teoría, los encabezados de diferentes niveles pueden ser combinados usando el elemento HTML hgroup. El elemento HTML hgroup representa un título de varios niveles para una sección de un documento. Agrupa un conjunto de elementos < h1 >-< h6 >. Pero, la documentación MDN sobre hgroup contiene dos advertencias claras:

< hgroup > no se debe usar porque ninguna tecnología de asistencia lo soporta, y como resultado tiene un efecto perjudicial en la asistencia para los encabezados colocados dentro de él.

[…] dado que un propósito clave del elemento < hgroup > es afectar a la forma en que se muestran los títulos mediante el algoritmo de contorno definido en la especificación HTML -pero el algoritmo de contorno de HTML no está implementado en ningún navegador- entonces la semántica de < hgroup > es en la práctica sólo teórica.

Entonces mejor no usar < hgroup >, dificulta la tecnología de asistencia, y no es compatible con los navegadores.

Todos navegamos por los títulos (y los enlaces) porque destacan. Las personas inicialmente no leen una página web, ojean y escanean el contenido en busca de lo que quieren leer. Sólo si encuentran lo que buscan, empiezan a leer.

Haz que ese viaje de exploración sea lo más fácil posible. Para ello, cree una estructura de menús clara y coherente para el sitio web y una estructura de títulos clara en la propia página web.

Navegación con lector de pantalla.

Las personas ciegas o con problemas de visión utilizan un lector de pantalla para leer y navegar por un sitio web

Con el lector de pantalla puedes saltar de un título a otro, utilizando un atajo de teclado, y así explorar la página web por títulos. Y puedes llamar a una lista de encabezados y desplazarte por ella, para elegir el contenido que quieres leer. Esta es una forma súper rápida de llegar a donde quieres leer cuando no puedes ver el contenido.

La navegación por los encabezados es muy común. En la Encuesta de Usuarios de Lectores de Pantalla de 2021 realizada por WebAIM se muestra que el 67,7% utiliza los títulos para encontrar información. El 85,7% de los encuestados considera que los niveles de encabezamiento son muy o algo útiles.

Escribe tus encabezados y su estructura con la información en la mente. Proporciona información sobre el contenido en la página con tus encabezados, también para los que no pueden ver el contenido de la página.

Un buen texto de encabezamiento representa el contenido que hay debajo. 

Haga que el texto de los encabezamientos sea descriptivo y que se entiendan por sí solos, aparte del contexto. Para la gente que lee la lista de encabezados. Deje que el texto del encabezamiento cuente una historia sobre el contenido de su página.

Foto de cabecera creado por lcd2020 –freepik.es