Encabezados, Accesibilidad y SEO

Hoy os voy a hablar del uso de encabezados, su accesibilidad y el SEO o posicionamiento web.

Y como suele ser habitual en mis artículos, vamos a empezar por el principio.

¿Qué son los encabezados de sección?

Los encabezados de sección en html se identifican mediante las etiquetas <h1>, <h2>, hasta <h6>, y habitualmente los utilizamos para titular las diferentes secciones que componen nuestras páginas web. Al número que sucede a la letra «h» (de headin) se le llama índice del encabezado y representa su jerarquía en la estructura global de encabezados de una página. Así, el encabezado de mayor jerarquía será de nivel 1 y su índice será «1», por lo que lo identificaremos con la etiqueta <h1>.

En este artículo el encabezado principal, de mayor jerarquía y por tanto nivel 1 será el título del post: «Encabezados, Accesibilidad y SEO.

Encabezados y Accesibilidad

usar encabezados de sección es algo tremendamente sencillo a nivel técnico… me atrevería a decir incluso trivial y, quizá, éste sea el motivo por el que da tantos quebraderos de cabeza cuando tenemos que usarlos de manera accesible, que no es ni más ni menos que usarlos bien.

Tanto es así que las Pautas para la Accesibilidad Web, actualmente WCAG 2.1 pero ya desde WCAG 2.0 en su nivel AA, reservan el Criterio 1.3.1: Información y relaciones.

Ya sabemos que en accesibilidad las cosas tienen que ser lo que parecen y parecer lo que son; semántica y diseño tienen que ir de la mano, y en el caso de los encabezados de sección las WCAG 2.1 en su nivel AA nos indican cómo debemos usar los encabezados de sección (si es que los utilizamos):

  • Debemos emplear los encabezados de sección para estructurar y proporcionar semántica a las secciones de nuestras páginas.
  • No debemos usarlos con fines de diseño, para eso está css.
  • La estructura de encabezados debe seguir una jerarquía lógica. Después de un <h1> debe ir un <h2> y tras este último irá un <h3>, no podemos meter un <h3> después de un <h1>.

¿Encabezados Accesibles: ¿Para Quién?

Las usuarias y usuarios que emplean tecnologías de apoyo, principalmente personas ciegas que utilizan lector de pantalla, son las principales beneficiadas de un uso correcto de encabezados de sección, pero no son las únicas, lo veremos un poco más adelante.

Las personas ciegas por medio de una serie de comandos que proporcionan los lectores de pantalla pueden navegar por los encabezados de sección de las páginas web y comprender de cómo se ha estructurado la información y su contenido. por tanto, si empleamos los encabezados de sección para lo que fueron concebidos, dotar de estructura a un documento, una persona ciega podrá hacerse una idea muy fiel de cómo se está organizando la información de forma visual.

Pero comentaba que a parte de una usuaria o usuario ciego, hay alguien más que se beneficia de este uso correcto de los encabezados.

Bien, este otro «alguien» son los motores de búsqueda, a quienes podríamos considerar como usuarios ciegos pues sus algoritmos no son capaces de comprender la estructura visual de una página web si ésta no está bien formada semánticamente.

Accesibilidad en Encabezados y un buen SEO

No nos engañemos, las páginas web no son documentos estáticos en los que vamos incluyendo contenido «a machete» (afortunadamente desde hace mucho tiempo ya no) sino que son documentos «vivos» llenos de contenido dinámico. Esta situación sumada al incremento de frameworks que permiten incorporar gran cantidad de información en un mismo documento e ir presentándola dinámicamente a los usuarios y usuarias hace que, como comentaba anteriormente, el uso correcto y accesible de encabezados de sección tenga «mucha más miga» de la que aparentemente tiene.

Imaginemos la siguiente situación: una de nuestras páginas web utiliza de manera abundante ventanas modales o lightbox para presentar a los y las usuarias contenido que, de otra manera, haría que quedase muy cargada de contenido si se mostrase todo a la vez.

Si echamos un vistazo a mi artículo Ventana Modal o LightBox Accesible veremos que una ventana modal debe estar titulada con un encabezado de nivel 1 <h1>, pues aunque nosotros como diseñadores o desarrolladoras sepamos que su contenido está en el mismo documento html, para un usuario es contenido nuevo.

Pues bien, utilizar, por poner un ejemplo drástico, quince ventanas modales con sus correspondientes quince encabezados de nivel 1 podría afectar negativamente al SEO de nuestra página.

para evitar que el marcado semántico de los encabezados de sección perjudique el posicionamiento web, echaremos mano de dos atributos de ARIA.
En concreto, role=»heading» y aria-level=»nivel_jerarquía».

  • role=»heading» transmitirá a las tecnologías de apoyo que el elemento en el que se esté utilizando es un encabezado de sección, tiene rol o función semántica de encabezado. Es la «h» de la etiqueta <h1>.
  • aria-level=»nivel_jerarquía» indicará el índice del encabezado; será el «1» de la etiqueta <h1>.

Ejemplos

<span role=»heading» aria-level=»3″>Título 3</span>
Será, para una tecnología de apoyo, lo mismo que:
<h3>Título 3</h3>

Otra circunstancia en la que también nos será muy útil emplear esta técnica será cuando nuestro gestor de contenidos, WordPress por ejemplo emplea plugins o módulos que incorporan encabezados de sección de un nivel predefinido y que, al incluirlos en nuestro tema «rompen» la jerarquía lógica de la estructura de encabezados.

Si os fijáis en el título «Comparte esta entrada:», veréis que el código fuente indica que es un encabezado de nivel 3 <h3>. Sin embargo, un lector de pantalla como JAWS lo «verá» como de nivel 2:

El lector de pantalla JAWS 2022 muestra el título 'Comparte esta entrada:' como encabezado de nivel 2.

Como veis, diseño, accesibilidad y SEO pueden remar en la misma dirección.

Deja un comentario