Acerca de este problema HTML
El valor section no existe en la especificación WAI-ARIA. ARIA define un conjunto específico de valores de rol, y section no está entre ellos. Esto probablemente es una confusión entre el nombre del elemento HTML <section> y el rol ARIA region, que es el rol al que el elemento <section> se mapea implícitamente. Debido a que section no es un rol reconocido, el validador lo rechaza como un valor inválido.
Esto importa por varias razones. Primero, las tecnologías asistivas como los lectores de pantalla dependen de los roles ARIA para comunicar el propósito de los elementos a los usuarios. Un valor de rol no reconocido puede ser ignorado completamente o causar comportamiento inesperado, degradando la experiencia para usuarios que dependen de estas herramientas. Segundo, el elemento <section> ya lleva semántica nativa equivalente a role="region" (cuando tiene un nombre accesible), así que agregar un rol redundante o incorrecto no proporciona beneficio y introduce problemas potenciales.
Según la especificación ARIA en HTML, generalmente debes evitar establecer un role en elementos que ya tienen semántica nativa apropiada. El rol implícito del elemento <section> es region, así que agregar explícitamente role="region" es redundante en la mayoría de casos. La solución más simple y mejor es eliminar el atributo role completamente y dejar que la semántica nativa de HTML haga su trabajo.
Si necesitas anular el rol de un elemento para un patrón de diseño específico (por ejemplo, convertir un <section> en un punto de referencia de navegación), usa un rol ARIA válido de la especificación WAI-ARIA.
Ejemplos
Incorrecto: usar el rol inválido section
<section role="section">
<h2>Sobre Nosotros</h2>
<p>Aprende más sobre nuestro equipo.</p>
</section>
Esto desencadena el error de validación porque section no es un valor de rol ARIA válido.
Correcto: eliminar el atributo role
<section>
<h2>Sobre Nosotros</h2>
<p>Aprende más sobre nuestro equipo.</p>
</section>
El elemento <section> ya proporciona la semántica correcta. No se necesita ningún atributo role.
Correcto: usar un rol ARIA válido si es necesario
Si tienes una razón específica para asignar un rol, usa uno válido. Por ejemplo, si un <section> se está usando como punto de referencia de navegación:
<section role="navigation" aria-label="Navegación principal">
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/about">Acerca</a></li>
</ul>
</section>
En la práctica, normalmente usarías un elemento <nav> en su lugar, que tiene el rol navigation de forma nativa. Este ejemplo simplemente ilustra que si aplicas un role, debe ser un valor de rol ARIA válido.
Correcto: rol explícito region con un nombre accesible
Si quieres marcar explícitamente una sección como punto de referencia de región nombrada, puedes usar role="region" junto con un nombre accesible. Sin embargo, esto es redundante cuando usas <section> con un aria-label o aria-labelledby, ya que el navegador ya lo mapea a region:
<!-- Preferido: la semántica nativa maneja el rol -->
<section aria-labelledby="features-heading">
<h2 id="features-heading">Características</h2>
<p>Explora las características de nuestro producto.</p>
</section>
<!-- También válido pero redundante -->
<section role="region" aria-labelledby="features-heading">
<h2 id="features-heading">Características</h2>
<p>Explora las características de nuestro producto.</p>
</section>Ambos son HTML válido, pero el primer enfoque es más limpio y sigue el principio de confiar en la semántica nativa siempre que sea posible.
Encuentra problemas como este automáticamente
Rocket Validator escanea miles de páginas en segundos, detectando problemas de HTML en todo tu sitio web.