region
Un punto de referencia genérico para contenido que no encaja en banner, main, navigation, complementary ni contentinfo, pero que sigue siendo lo suficientemente importante como para navegar hasta él. Un <section> se convierte en punto de referencia region cuando, y solo cuando, tiene un nombre accesible.
Cuándo utilizarlo
Para una sección de página significativa que no coincide con otro punto de referencia y a la que los usuarios de lectores de pantalla deben poder saltar directamente: un carrusel de «Productos destacados», el paso actual de un formulario de varios pasos o una región de transcripción de chat dentro de una aplicación más amplia.
<section> se expone como punto de referencia region ÚNICAMENTE cuando tiene un nombre accesible (aria-label o aria-labelledby). Un <section> sin nombre es simplemente un grupo genérico, sin exposición como punto de referencia. Esto es intencional: demasiados puntos de referencia hacen que el menú de navegación por puntos de referencia pierda utilidad.
role="region" sobre un <div> funciona de la misma manera; el nombre es obligatorio.
Cuándo usarlo frente a group
Usar role="region" (o <section aria-label>) | Usar role="group" |
|---|---|
| Sección de página principal que justifica la navegación por puntos de referencia | Conjunto de controles relacionados sin estatus de punto de referencia |
| Uno o dos por página | Puede haber muchos por página |
| Siempre tiene un nombre accesible | El nombre es opcional |
En caso de duda, conviene preguntarse: «¿Querría que un usuario de lector de pantalla pudiera saltar directamente aquí?». Si la respuesta es sí, se usa region. Si no, se usa group.
Errores frecuentes
<section>sinaria-labelniaria-labelledby. No es un punto de referencia; el contenedor no aporta nada a la accesibilidad.- Marcar cada
<section>como region. Satura el menú de puntos de referencia y reduce el valor de todos ellos. aria-label="Section": es una etiqueta sin significado. La etiqueta debe describir qué hace a esta sección distinta.- Usar
role="region"para una barra lateral: para eso existecomplementary. Se debe elegir el punto de referencia más específico. role="region"en el<div>contenedor Y en un<section>interno: puntos de referencia duplicados para el mismo contenido.
Ejemplo
<section aria-labelledby="recent">
<h2 id="recent">Recently published</h2>
<ul>
<li><a href="/articles/aria-roles">ARIA roles overview</a></li>
<li><a href="/articles/wcag-22">WCAG 2.2 changes</a></li>
</ul>
</section>