Los elementos de referencia HTML5 se utilizan para mejorar la navegación.

Los elementos HTML5 como main, nav y aside actúan como puntos de referencia o regiones especiales en la página a las que los lectores de pantalla y otras tecnologías de asistencia pueden saltar. Al utilizar elementos de referencia, puede mejorar drásticamente la experiencia de navegación en su sitio para los usuarios de tecnologías de asistencia. Obtenga más información en Elementos de referencia HTML 5 y ARIA de la Universidad de Deque.

Cómo verificar puntos de referencia manualmente #

Utilice la lista de elementos de referencia del W3C para comprobar que cada sección principal de su página esté contenida por un elemento de referencia. Por ejemplo:

<header>
  <p>Put product name and logo here</p>
</header>
<nav>
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main>
  <p>Put main content here</p>
</main>
<footer>
  <p>Put copyright info, supplemental links, etc. here</p>
</footer>

También puede usar herramientas como la extensión Accessibility Insights de Microsoft para visualizar la estructura de su página y encontrar secciones que no están incluidas en puntos de referencia:

Cómo utilizar los elementos de referencia de forma eficaz #

• Utilice elementos de referencia para definir las secciones principales de su página en lugar de depender de elementos genéricos como <div> o <span>.
• Utilice elementos de referencia para transmitir la estructura de su página. Por ejemplo, el elemento <main> debe incluir todo el contenido directamente relacionado con la idea principal de la página, por lo que solo debe haber uno por página. Consulte el resumen de MDN de los elementos de sección de contenido para aprender a usar cada elemento de referencia.
• Utilice los elementos de referencia con prudencia. Tener demasiados puede hacer que la navegación sea más difícil para los usuarios de tecnología de asistencia porque les impide saltar fácilmente al contenido deseado.

Consulte el post Encabezados y elementos de referencia para obtener más información.

Recursos #

• El código fuente de la auditoría elementos de referencia HTML5 se utiliza para mejorar la navegación.
• Elementos de seccionamiento HTML5 (W3C)
• Elementos de referencia HTML 5 y ARIA (Universidad Deque)