Los elementos HTML5, como main, nav y aside, actúan como puntos de referencia o regiones especiales en la página a las que pueden acceder los lectores de pantalla y otras tecnologías de accesibilidad.
Si usas elementos de referencia, puedes mejorar significativamente la experiencia de navegación en tu sitio para los usuarios de tecnología de accesibilidad.
Obtén más información en los puntos de referencia HTML5 y ARIA de la Universidad Deque.
Cómo verificar puntos de referencia manualmente
Usa la lista de elementos de referencia del W3C para verificar que un elemento de punto de referencia contenga cada sección principal de la página. 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 puedes usar herramientas como la extensión de Estadísticas de accesibilidad de Microsoft para visualizar la estructura de la página y detectar secciones que no están incluidas en los puntos de referencia:
Cómo usar los puntos de referencia de forma eficaz
- Usa elementos de referencia para definir las secciones principales de tu página, en lugar de depender de elementos genéricos, como
<div>o<span>. - Usa puntos de referencia para transmitir la estructura de la página.
Por ejemplo, el elemento
<main>debe incluir todo el contenido directamente relacionado con la idea principal de la página, de manera que solo debe haber uno por página. Consulta el resumen de MDN sobre los elementos de secciones de contenido para aprender a usar cada punto de referencia. - Usa los puntos de referencia con criterio. Tener demasiados puntos de referencia puede hacer que la navegación sea más difícil para los usuarios de tecnología de accesibilidad, ya que evita que salten con facilidad al contenido deseado.
Consulta la entrada Encabezados y puntos de referencia para obtener más información.