Múltiples vías

Una navegación accesible debe proporcionar más de un camino para localizar una página dentro de un sitio web.

Mapa del sitio

Un mapa del sitio es un conjunto de enlaces que reflejan la organización del sitio y ofrecen acceso a todas las páginas, directa o indirectamente.

A su vez, el mapa del sitio debe estar enlazado desde todas las páginas, siendo habitual incluirlo en el pie de página.

Como ejemplo, puedes ver el mapa de este sitio web.

Función de búsqueda

Una función de búsqueda permite a los usuarios encontrar el contenido sin tener que navegar por el sitio.

Función de búsqueda de Amazon.
Amazon ofrece la función de búsqueda en la cabecera sus páginas.

Esta función resulta especialmente útil en los sitios con mucho contenido. Suele colocarse en la cabecera del sitio o en una barra lateral que se repite en todas las páginas. En algunos sitios se proporciona una página específica para el buscador.

Tabla de contenidos

Una tabla de contenidos es un índice con enlaces a las diferentes secciones de una página o conjunto de páginas.

La tabla de contenidos sirve para dos propósitos:

  • Ofrece a los usuarios una visión general de los contenidos y la organización del documento.
  • Permite a los lectores navegar directamente a una sección específica del documento.

Ejemplo 1: Tabla de contenidos con aria-label

En este ejemplo identificamos el elemento de navegación con el atributo aria-label.

Ejemplo
HTML
<nav aria-label="contenidos">
    <ul>
        <li><a href="seccion-1">Sección 1</a></li>
        <li><a href="seccion-2">Sección 2</a></li>
        <li><a href="seccion-3">Sección 3</a></li>
        <li><a href="seccion-4">Sección 4</a></li>
    </ul>
</nav>

Ejemplo 2: Tabla de contenidos con aria-labelledby

En este otro ejemplo, asociamos el elemento de navegación con el encabezado de la lista de contenidos mediante el atributo aria-labelledby y un id.

Ejemplo
HTML
<nav aria-labelledby="encabezado-contenidos">
    <h2 id="encabezado-contenidos">Contenidos</h2>
    <ul>
        <li><a href="seccion-1">Sección 1</a></li>
        <li><a href="seccion-2">Sección 2</a></li>
        <li><a href="seccion-3">Sección 3</a></li>
        <li><a href="seccion-4">Sección 4</a></li>
    </ul>
</nav>

Enlaces a páginas relacionadas

Consiste en proporcionar a los usuarios enlaces a páginas con contenido relacionado.

Un ejemplo típico son los artículos relacionados que aparecen al final de un artículo en un blog.

Criterios de conformidad WCAG 2.1