Encabezados y accesibilidad. Aspectos a tener en cuenta.

Los encabezados son uno de los aspectos básicos a considerar a la hora de hacer que un sitio web sea accesible. En muchas ocasiones, al ser un aspecto tan básico, se dedica menos esfuerzo del necesario a reflexionar acerca de  ellos y a implementar una buena estructura de encabezados en la web. 

A continuación, planteamos una aproximación desde el punto de vista de la accesibilidad. 

Criterios WCAG que cubren la gestión de encabezados

En primer lugar, debemos considerar las fuentes de información que tenemos a la hora de considerar si nuestra web es accesible o no en cuanto al uso de encabezados. En este sentido, siempre nos tendremos que remitir a las WCAG (Web Content Accessibility Guidelines) de la WAI (Web Accessibility Iniciative). En este estándar que se toma como referencia en cuanto a accesibilidad web por la normativa vigente, hay varios criterios que hacen referencia al uso de encabezados: 

• 1.3.1 Información y relaciones (nivel A): Este criterio, hace referencia a que la misma información que se transmite de manera visual en la web, debe transmitirse a las tecnologías de asistencia como los lectores de pantalla. En el caso de los encabezados, básicamente, debemos indicarlos con las etiquetas h1-h6 de HTML o utilizando el role=”heading” de ARIA junto a un atributo aria-level que nos indique el nivel del encabezado. Además, debemos verificar que no hay saltos de nivel (no se puede saltar de un h1 a un h3).
• 2.4.6 Encabezados y etiquetas (nivel AA): Es el criterio que cubre específicamente a los encabezados. Este criterio se asegura de que nuestros encabezados sean descriptivos y que se adecúen a una estructura lógica de la información. Para ello, es importante que nos aseguremos de que si consideráramos los encabezados sin el contenido tendrían sentido. Por ejemplo, en el caso de este artículo no son del tipo “Introducción”, “Explicación” o “Conclusiones”, sino que con un listado de los títulos podemos hacernos una idea de la organización de la información en el artículo. 
• 2.4.1 Evitar bloques (nivel A): Uno de los grandes olvidados a la hora de considerar los encabezados. Este criterio, nos indica que debemos facilitar un mecanismo a los usuarios para que puedan evitar los bloques con información repetitiva en cada página como el menú. Ofrecer encabezados al principio de cada sección, estando estos organizados correctamente, es una técnica suficiente para pasar este criterio. De todas formas, aun cumpliendo con los encabezados, recomendamos encarecidamente que se añada un mecanismo alternativo como un enlace para “Saltar al contenido principal”. 
• 2.4.10: Encabezados de sección (nivel AAA): En este caso, se nos plantea que la página debería estar organizada con encabezados y que cada sección del contenido debe tener uno. Se incluye en el nivel AAA, como se especifica en el criterio, porque no todo el contenido puede cumplirlo. Por ejemplo, si incluimos en una web un documento existente que no tiene encabezados de ningún tipo. 

Buenas prácticas para una estructura de encabezados accesible

Es importante recordar que la accesibilidad no es una cuestión de “cumplir” o de marcar un “check” una vez que cumplimos con los criterios. La accesibilidad es un trabajo constante de poner al usuario y a sus circunstancias y necesidades diversas en el centro del proceso de desarrollo de un proyecto. Además, la accesibilidad siempre “suma” y nos ayuda en otros aspectos como la usabilidad o incluso el posicionamiento web. Como ejemplos de buenas prácticas podemos considerar: 

• Que la organización visual de la información a través de los encabezados sea equivalente a la organización no visual. Más allá de que cumplamos el criterio, podemos reflexionar acerca de si la estructura de encabezados h1-h6 es similar a la que se refleja de manera visual a través de diferentes tamaños y decoraciones de la tipografía. 
• Que los encabezados deban tener una estructura lógica y que sean descriptivos nos puede ayudar también en el posicionamiento SEO de la web. 
• Aunque está permitido e incluso contemplado en los ejemplos de la WAI, no es recomendable que, al iniciar la estructura de encabezados, un encabezado de nivel inferior preceda a uno de nivel superior en el DOM. Es decir, que el primero de la página sea un h2 en lugar de un h1. Al optar por una solución de este tipo, se debe considerar si realmente es necesario hacerlo y qué implicaciones tendrá para los usuarios. 

Problema común: accesibilidad y encabezados

Precisamente la situación comentada en el último punto de las buenas prácticas, tener un encabezado de nivel inferior que precede a uno de nivel superior en el DOM, es una situación que nos encontramos de forma bastante habitual. 

A medida que nos vamos alejando temporalmente de la creación de la World Wide Web, las aplicaciones web se han ido complejizando. Ya no tenemos muchos sitios web que funcionen como “documentos” básicos con un título y algunos subtítulos para organizar la información. Nos encontramos con todo tipo de aplicaciones y de estructuras. En este sentido, en muchos proyectos se plantea la cuestión: 

¿El título de la página ha de ser el título de mi web (normalmente el logo) o el título del contenido? 

Es una pregunta habitual que nos encontramos en muchos proyectos. Si la respondemos estrictamente desde el punto de vista de la organización del contenido y de la accesibilidad la respuesta es que el título de la web debe ser el h1. Desde una perspectiva de la lógica de la organización de la información, todo el contenido que haya en la página, “depende” del título de la web. Por ejemplo, si el título de la web es “Un blog diferente” y el título del contenido es “Mi primer artículo”, lo lógico es que todo el contenido de la página cuelgue de “Un blog diferente” que sería el h1. De esta manera, si, por ejemplo, en el footer hay un encabezado (“Enlaces de interés”) este colgará del título de la web. De otra forma, parecería que los “Enlaces de interés” pertenecen a “Mi primer artículo” (que sería el h1) y tendríamos además “Un blog diferente” como un h2 que está antes del título principal de la página. Para verlo más claramente:

En el primer caso encontraríamos: 

• <h1>Un blog diferente</h1>
• <h2>Mi primer artículo</h2>
• <h2>Enlaces de interés</h2>

En el segundo caso: 

• <h2>Un blog diferente</h2>
• <h1>Mi primer artículo</h1>
• <h2>Enlaces de interés</h2> 

Sería más recomendable el primer caso. 

Sin embargo, no podemos obviar que cada vez más webs utilizan una estructura con una barra de menú que contiene el logo y los enlaces de navegación y, a continuación, el contenido de la web. Es cierto que en estos casos sería extraño que todas las páginas de la web tengan el mismo h1 (la alternativa textual al logo) y que el título del contenido, que realmente actúa visualmente como encabezado de primer nivel, sea un h2. Es por ello, que en estos casos, se puede considerar que el título del contenido sea el h1. Nuestra recomendación, para evitar que quede un h2 antes del h1 con el título del sitio, es tratar este logo (y su alternativa textual) o texto como enlace de navegación. Realmente, podríamos decir que visualmente actúa como tal porque ya es un estándar encontrar un logo en el menú y saber que su utilidad es navegar hasta la página de inicio. En este caso encontraríamos: 

El logo o título del sitio: 

• <a href="#" aria-label="Un blog diferente"> <img src="logo.png" alt=""> </a>

La estructura de encabezados: 

• <h1>Mi primer artículo</h1>
• <h2>Enlaces de interés</h2> 

Sería una estructura de encabezados correcta e incluso considerada por la WAI, pero, como podemos observar, no solucionamos el problema de la lógica de información porque “Enlaces de interés” (encabezado en el footer) sigue pareciendo que pertenece a “Mi primer artículo”.

Para solucionar este problema una recomendación sería el uso de las page regions de HTML (header, footer, nav, aside, etc.) que nos permiten definir que contenido es el principal y que contenido, como sería el caso de los enlaces de interés, es complementario (por ejemplo, colocándolo dentro de la region "aside"). El tema de las regiones (y de los aria landmarks) es extenso y lo trataremos específicamente en otro artículo.

Checklist para testear la accesibilidad de los encabezados

• Solo hay un h1 en la web
• No hay salto de nivel entre encabezados (no se pasa de un h1 a un h3 o de un h2 a un h4). 
• Los encabezados son descriptivos
• Los encabezados de la web están correctamente identificados como tales utilizando las etiquetas h1-h6 de HTML o el role=”heading” de ARIA acompañado del atributo aria-level indicando el nivel. 

Cómo testear los encabezados

A la hora de testear, nos pueden resultar de utilidad:

• La extensión HeadingsMap para obtener a nivel visual una lista de encabezados.
• La guía de WebAIM para testear con lector de pantalla.

Alejandro Suárez Domínguez.