Regla de accesibilidad: Aside no debería estar contenido en otro landmark

Acerca de esta regla de accesibilidad

Las regiones landmark son áreas estructurales de una página — como <main>, <nav>, <header>, <footer>, y <aside> — que ayudan a los usuarios de tecnologías de asistencia a comprender el diseño y navegar rápidamente entre secciones. Los lectores de pantalla proporcionan teclas de acceso directo que permiten a los usuarios saltar directamente a estos landmarks, haciendo fácil omitir al contenido que necesitan.

El elemento <aside> (o role="complementary") representa contenido que complementa el contenido principal, como barras laterales, enlaces relacionados, o contexto adicional. Cuando un <aside> está anidado dentro de otro landmark como <main> o <nav>, los lectores de pantalla pueden no exponerlo como un landmark de nivel superior. Esto significa que los usuarios que dependen de la navegación por landmarks pueden no ser capaces de descubrir o saltar a ese contenido complementario en absoluto, efectivamente ocultándolo de su flujo de navegación.

Este problema afecta principalmente a usuarios de lectores de pantalla, quienes dependen de los landmarks como una forma principal de orientarse y moverse por una página. Cuando los landmarks están incorrectamente anidados, la estructura de la página se vuelve confusa o incompleta, reduciendo la eficiencia y usabilidad de la tecnología de asistencia.

Esta regla se relaciona con el Criterio de Conformidad 1.3.1 de WCAG 2.1 (Información y Relaciones), que requiere que la información, estructura, y relaciones transmitidas visualmente también estén disponibles programáticamente. También apoya el Criterio de Conformidad 4.1.2 de WCAG 2.1 (Nombre, Rol, Valor) y la buena práctica general de usar landmarks correctamente para que las tecnologías de asistencia puedan presentar la estructura del contenido con precisión.

Cómo solucionarlo

Mueve los elementos <aside> al nivel superior del cuerpo del documento, fuera de <main>, <nav>, <header>, <footer>, o cualquier otro landmark.
Verifica role="complementary" en cualquier elemento y asegúrate de que también estén colocados en el nivel superior, no anidados dentro de otro landmark.
Si el contenido realmente pertenece dentro de otro landmark y no está destinado a ser navegable independientemente, considera si realmente necesita ser un <aside>. Un simple <div> o <section> sin un rol landmark puede ser más apropiado.

Ejemplos

Incorrecto: `<aside>` anidado dentro de `<main>`

<main>
  <h1>Article Title</h1>
  <p>Main article content goes here.</p>

  <aside>
    <h2>Related Links</h2>
    <ul>
      <li><a href="/topic-a">Topic A</a></li>
      <li><a href="/topic-b">Topic B</a></li>
    </ul>
  </aside>
</main>

En este ejemplo, el <aside> está dentro de <main>, por lo que los lectores de pantalla pueden no listarlo como un landmark de nivel superior. Los usuarios navegando por landmarks podrían perderse completamente los enlaces relacionados.

Correcto: `<aside>` en el nivel superior junto a `<main>`

<main>
  <h1>Article Title</h1>
  <p>Main article content goes here.</p>
</main>

<aside>
  <h2>Related Links</h2>
  <ul>
    <li><a href="/topic-a">Topic A</a></li>
    <li><a href="/topic-b">Topic B</a></li>
  </ul>
</aside>

Ahora el <aside> es un hermano de <main>, convirtiéndolo en un landmark de nivel superior que los usuarios de lectores de pantalla pueden descubrir y navegar fácilmente.

Incorrecto: `role="complementary"` anidado dentro de `<nav>`

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
  <div role="complementary">
    <p>Navigation tip: Use keyboard shortcuts to browse faster.</p>
  </div>
</nav>

Correcto: `role="complementary"` movido al nivel superior

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

<div role="complementary" aria-label="Navigation tips">
  <p>Navigation tip: Use keyboard shortcuts to browse faster.</p>
</div>

Al mantener los landmarks complementarios en el nivel superior de la página, te aseguras de que todos los usuarios — incluyendo aquellos que usan tecnología de asistencia — puedan descubrir y navegar a cada sección de tu contenido.

Learn more: