Addaw, ir a inicio Donar

Técnica ARIA WCAG 2.2

ARIA12Marcar encabezados con role="heading" y aria-level

Nombre oficial en el W3C: Usar role=heading para identificar los encabezados

En pocas palabras

A veces un texto funciona como título pero no está hecho con h1 a h6. Entonces, role="heading" y aria-level le dicen al lector de pantalla que es un encabezado y de qué nivel. Solo debe usarse si no es posible usar las etiquetas HTML de encabezado, que son siempre la primera opción.

Por qué es importante

Muchas personas usan un lector de pantalla (programa que lee en voz alta la pantalla). Suelen recorrer la página de encabezado en encabezado, como quien ojea titulares. Si un título está hecho con un <div> en negrita, para ellas no existe.

El nivel también importa. Indica qué apartados están dentro de otros, igual que el índice de un documento.

Cómo se hace

  1. Use siempre que pueda <h1> a <h6>. Funcionan mejor, por ejemplo en el modo lectura del navegador.
  2. Si no puede cambiar la etiqueta, por ejemplo en un componente cerrado, añada role="heading" al elemento.
  3. Añada siempre aria-level con el nivel. Sin él, el lector de pantalla lo trata como nivel 2.
  4. Elija el nivel según la jerarquía del contenido, no según el tamaño de letra.
  5. Para un séptimo nivel, que HTML no tiene, use aria-level="7". Evite niveles de 10 o más: muchos lectores de pantalla los anuncian mal.
  6. Recuerde que el rol no cambia el aspecto. El estilo visual se da con CSS.

Cómo comprobarlo

  1. Busque en el código los elementos con role="heading".
  2. Compruebe que su texto es de verdad el título de un apartado.
  3. Compruebe que tienen aria-level y que el nivel encaja con los encabezados de alrededor.
  4. Con NVDA, pulse H para saltar entre encabezados o abra la lista con Insert + F7. Debe oír el texto y su nivel.
  5. También puede revisar el esquema de encabezados con la vista de estructura de WAVE.

Ejemplo

Título de un apartado marcado con role="heading" y, debajo, su equivalente preferible con h2.

<div role="heading" aria-level="2">Horario de atención al público</div>
<p>De lunes a viernes, de 9:00 a 14:00.</p>

<!-- Si es posible, mejor así: -->
<h2>Horario de atención al público</h2>
Ver el texto completo del W3C (traducción al español)

Esta es una traducción no oficial al español de la técnica ARIA12 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.

Aplicabilidad

Tecnologías que admiten Accessible Rich Internet Applications (WAI-ARIA).

Descripción

El propósito de esta técnica es proporcionar a las tecnologías de asistencia una forma de identificar un fragmento de contenido como encabezado. Aplicar role="heading" a un elemento hace que una tecnología de asistencia (como un lector de pantalla) lo trate como si fuera un encabezado. La propiedad role="heading" debe combinarse con la propiedad aria-level para definir el nivel del encabezado.

Siempre que sea posible, use el marcado nativo de encabezados. Por ejemplo, es preferible usar un elemento h1 en lugar de <div role="heading" aria-level="1">. Los elementos nativos de HTML tienen estilos y funciones implícitos que no se replican necesariamente con los equivalentes ARIA. Por ejemplo, los elementos de encabezado reciben ajustes de estilo específicos al ver una página en el modo de lectura de un navegador, mientras que un <div role="heading" aria-level="1"> no se mostrará con estilo de encabezado, porque el elemento subyacente es un div. ARIA solo modifica la forma en que un elemento se expone a las tecnologías de asistencia; no cambia en nada el estilo ni la funcionalidad implícitos del elemento al que se aplica.

Ejemplos

Encabezados sencillos

Este ejemplo muestra cómo implementar encabezados mediante role="heading" y aria-level.

<div role="heading" aria-level="2">Global News Items</div>
... a list of global news with editorial comment....
<div role="heading" aria-level="3">Politics</div>
... a list of global political news stories ...

Niveles de encabezado adicionales

Este ejemplo muestra cómo implementar un encabezado de nivel 7 mediante role="heading" y el atributo aria-level. Dado que HTML solo admite encabezados hasta el nivel 6, no existe ningún elemento nativo que proporcione esta semántica.

<h5>Fruit Trees</h5>
<h6>Apples</h6>
<p>Apples grow on trees in areas known as orchards...</p>
   ...
<div role="heading" aria-level="7">Jonagold</div>
<p>Jonagold is a cross between the Golden Delicious and Jonathan varieties...</p>

Pruebas

Procedimiento

  1. Examinar cada elemento con el atributo role="heading".
  2. Determinar si el contenido del elemento es adecuado como encabezado.
  3. Determinar si el valor de aria-level es el nivel jerárquico adecuado.

Resultados esperados

  • Las comprobaciones n.º 2 y n.º 3 son verdaderas.

Recursos

Cómo lo comprobamos en ADDAW

En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.

Solicitar una auditoría

Basado en la técnica ARIA12 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.