El rol “region” es innecesario para el elemento “section”.

La especificación HTML y las pautas WAI-ARIA establecen que ciertos elementos HTML llevan roles de landmark implícitos. El elemento <section> se mapea implícitamente a role="region", lo que significa que las tecnologías de asistencia como los lectores de pantalla ya lo reconocen como un landmark de región sin ningún marcado ARIA adicional. Este principio se refleja en la primera regla de uso de ARIA: “Si puedes usar un elemento o atributo HTML nativo con la semántica y el comportamiento que requieres ya incorporados, en lugar de reutilizar un elemento y añadir un rol, estado o propiedad ARIA para hacerlo accesible, entonces hazlo”.

Añadir role="region" a un <section> no cambia el comportamiento del elemento ni cómo lo interpretan las tecnologías de asistencia — simplemente duplica lo que el navegador ya comunica. El Validador W3C advierte sobre esta redundancia para fomentar un marcado más limpio y mantenible, y para ayudar a los desarrolladores a entender la semántica HTML nativa.

Este mismo principio se aplica a otros elementos HTML con roles implícitos: <nav> tiene un role="navigation" implícito, <main> tiene role="main", <aside> tiene role="complementary", <header> tiene role="banner" (cuando no está anidado en un elemento de sección), y <footer> tiene role="contentinfo" (cuando no está anidado en un elemento de sección). Añadir estos roles explícitos a sus elementos correspondientes generará advertencias similares del validador.

Es importante destacar que un elemento <section> solo se expone como un landmark region por las tecnologías de asistencia cuando tiene un nombre accesible. Si tu <section> no tiene un nombre accesible (a través de aria-label, aria-labelledby, o mecanismos similares), los lectores de pantalla pueden no tratarlo como un landmark navegable — pero esto aún no significa que debas añadir role="region", ya que el mapeo del rol implícito permanece igual independientemente.

Cómo solucionarlo

1. Elimina el atributo role="region" de cualquier elemento <section>.
2. Si quieres que la sección sea un landmark significativo para los usuarios de lectores de pantalla, dale un nombre accesible usando aria-labelledby (apuntando a un encabezado) o aria-label.
3. Nunca añadas roles ARIA explícitos que dupliquen el rol implícito de un elemento HTML nativo.

Ejemplos

Incorrecto: rol redundante en section

<section role="region">
  <h2>Contact Information</h2>
  <p>Email us at info@example.com</p>
</section>

Correcto: section sin rol redundante

<section>
  <h2>Contact Information</h2>
  <p>Email us at info@example.com</p>
</section>

Correcto: section con un nombre accesible para navegación de landmarks

Usar aria-labelledby para asociar la sección con su encabezado asegura que las tecnologías de asistencia la expongan como una región landmark con nombre:

<section aria-labelledby="contact-heading">
  <h2 id="contact-heading">Contact Information</h2>
  <p>Email us at info@example.com</p>
</section>

Correcto: section con aria-label cuando no existe encabezado visible

<section aria-label="Contact information">
  <p>Email us at info@example.com</p>
</section>

Incorrecto: roles redundantes en otros elementos landmark

El mismo principio se aplica a otros elementos landmark nativos. Evita estos patrones:

<nav role="navigation">
  <a href="/">Home</a>
</nav>

<main role="main">
  <p>Page content</p>
</main>

<aside role="complementary">
  <p>Related links</p>
</aside>

Correcto: elementos landmark sin roles redundantes

<nav>
  <a href="/">Home</a>
</nav>

<main>
  <p>Page content</p>
</main>

<aside>
  <p>Related links</p>
</aside>

Más información:

MDN Reference

MDN: ARIA region role

→

MDN Reference

Using ARIA: roles

→

WHATWG Spec

HTML Living Standard: The section element

→