Técnica ARIA WCAG 2.2
ARIA12Usar role=heading para identificar los encabezados
En resumen
Cuando no es posible usar los elementos h1-h6 de HTML, el atributo role="heading" combinado con aria-level permite que los lectores de pantalla reconozcan un texto como encabezado y conozcan su nivel jerárquico. Beneficia sobre todo a quienes navegan saltando de encabezado en encabezado. Úsela solo como recurso excepcional, por ejemplo para niveles superiores a 6; siempre que pueda, prefiera el marcado nativo de encabezados.
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
- Examinar cada elemento con el atributo
role="heading". - Determinar si el contenido del elemento es adecuado como encabezado.
- Determinar si el valor de
aria-leveles el nivel jerárquico adecuado.
Resultados esperados
- Las comprobaciones n.º 2 y n.º 3 son verdaderas.
Recursos
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica ARIA12 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
