Como aprendiste en Vínculos, el elemento <a> con el atributo href crea vínculos que los usuarios pueden seguir si hacen clic o presionan. En listas, aprendiste a crear listas de contenido. En esta sección, descubrirás cómo agrupar listas de vínculos para crear navegación.
Existen varios tipos de navegación y varias formas de mostrarlos. Los anclajes con nombre dentro del texto que vinculan a otras páginas dentro del mismo sitio web se consideran navegación local. La navegación local, compuesta por una serie de vínculos que muestran la jerarquía de la página actual en relación con la estructura del sitio, o las páginas que el usuario siguió para llegar a ella, se denomina ruta de navegación. El índice de una página es otro tipo de navegación local. Una página que contiene vínculos jerárquicos a cada una de las páginas de un sitio se denomina mapa del sitio. La sección de navegación que conduce a las páginas de nivel superior del sitio web que se encuentran en todas las páginas se denomina navegación global. La navegación global se puede mostrar de varias formas diferentes, incluidas las barras de navegación, los menús desplegables y los menús flotantes. Un mismo sitio puede mostrar su navegación global de manera diferente, según el tamaño del viewport.
Asegúrate siempre de que los usuarios puedan navegar a cualquier página de tu sitio con la menor cantidad de clics y de que la navegación sea intuitiva y no abrumadora. Dicho esto, no hay requisitos específicos para los elementos de navegación. MachineLearningWorkshop.com es un sitio web de una sola página y tiene una barra de navegación local en la parte superior derecha. Aquí es donde los sitios de varias páginas suelen poner su navegación global.
Si estás viendo esta página en web.dev, puedes encontrar algunas funciones de navegación. Hay una ruta de navegación sobre el título, un índice "en esta página" después del título y un índice "Aprende HTML" que, según el ancho de tu pantalla, siempre se muestra o se hace visible con un clic en un botón de menú. El primer elemento de la página es un vínculo oculto a #main, que te permite omitir los vínculos de la barra lateral y de la ruta de navegación.
Vínculo "Ir al contenido"
El primer elemento de la página es un enlace interno:
<a href="#main" class="skip-link button">Skip to main</a>
que, cuando se hace clic en ella o cuando está enfocada y el usuario presiona Enter, se desplaza por la página y enfoca el contenido principal: un punto de referencia <main> con un id de main:
<main id="main">
Es posible que nunca hayas visto el vínculo en este sitio, aunque hayas leído todas las secciones anteriores. Solo se muestra cuando está enfocada:
Para mejorar la usabilidad y accesibilidad, es importante permitir que los usuarios omitan los bloques de contenido que se repiten en cada página.
El vínculo para omitir se incluye para que, cuando un usuario de teclado presione tab durante la carga, pueda omitir rápidamente el contenido principal del sitio, lo que evita tener que usar tabulación mediante vinculaciones extensas. En esta página, el vínculo para omitir omite la navegación de la barra lateral de toda la sección y la navegación de ruta de navegación, lo que lleva al usuario directamente al título de la página.
A la mayoría de los diseñadores no les gusta la apariencia de tener un enlace en la parte superior de la página. Se puede ocultar el vínculo de la vista y recordar que, cuando el vínculo se enfoca, lo que sucede cuando un usuario de teclado presiona la tecla de tabulación mediante el vínculo de la página, el vínculo debe ser visible para todos los usuarios.
Solo oculta el contenido en los estados no enfocado y no activo con un selector similar a .visually-hidden:not(:focus):not(:active).
El texto del vínculo dice "skip to main". Este es el nombre de accesibilidad del vínculo. Este es un sitio técnico, y los usuarios probablemente sepan qué significa "principal".
Al igual que todo el texto de un vínculo, el nombre de accesibilidad debe indicar claramente a dónde lleva el vínculo al usuario. El destino del vínculo debe ser el comienzo
del contenido principal de la página. Para probar esto, cuando se cargue la página, presiona la tecla de tabulación para ir al vínculo "Ir a la página principal". Luego, presiona Enter para asegurarte de que "salte" al contenido principal.
Índice
El vínculo de navegación al contenido desplaza el contenido principal a la vista. El primer elemento es el encabezado <h1> con el título de esta sección.
En este caso, es <h1>Marking up navigation</h1>. Al encabezado principal le sigue la descripción breve, una breve descripción del contenido de este instructivo. El hecho de que la navegación del índice se ubique antes o después del encabezado de la base de código depende del ancho de tu navegador.
Si el navegador tiene más de 80 em, el índice aparecerá antes del encabezado en el lenguaje de marcado y será similar a lo siguiente (se quitaron los nombres de las clases para simplificar el lenguaje de marcado):
<nav aria-label="On this page">
<div>On this page</div>
<div>
<ul>
<li>
<a href="#skip">Skip to content link</a>
</li>
<li>
<a href="#toc">Table of contents</a>
</li>
<li>
<a href="#bc">Page breadcrumbs</a>
</li>
<li>
<a href="#ln">Local navigation</a>
</li>
<li>
<a href="#global">Global navigation</a>
</li>
</ul>
</div>
</nav>
<nav> es el mejor elemento para usar en las secciones de navegación, ya que informa automáticamente al lector de pantalla y al motor de búsqueda que una sección tiene una función de navigation, que es un punto de referencia.
Incluir el atributo aria-label proporciona una breve descripción del propósito de la navegación. En este caso, como el valor del atributo es redundante para el texto visible en la página, es preferible usar aria-labelledby para hacer referencia al texto visible.
Podemos cambiar la <div> no semántica a un párrafo <p> y, luego, agregar un id para que se pueda hacer referencia a él. Luego, usamos aria-labelledby:
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
Además de reducir la redundancia, los servicios de traducción traducen el texto visible, mientras que los valores de los atributos no. Cuando sea posible, si hay texto presente que proporcione una etiqueta adecuada, prioriza eso en lugar del texto de atributo.
Esta navegación es el índice. Si deseas usar aria-label, proporciona esa información en lugar de repetir texto visible:
<nav aria-label="Table of Contents">
<p>On this page</p>
Cuando proporciones un nombre accesible para un elemento, no incluyas el nombre de este. Los lectores de pantalla proporcionan esa información al usuario.
Por ejemplo, cuando uses el elemento <nav>, no incluyas "navigation", ya que esa información se incluye cuando usas elementos semánticos.
Los vínculos en sí aparecen en una lista sin ordenar. Si bien no es necesario que estén anidados en una lista, usar una lista permite que los usuarios de lectores de pantalla sepan cuántos elementos de lista (y, por lo tanto, vínculos) son una lista individual en una navegación.
<nav aria-labelledby="tocTitle">
<p id="tocTitle">On this page</p>
<ul role="list">
<li>
<a href="#skip">Skip to content link</a>
</li>
<li>
<a href="#toc">Table of contents</a>
</li>
<li>
<a href="#bc">Page breadcrumbs</a>
</li>
<li>
<a href="#ln">Local navigation</a>
</li>
<li>
<a href="#global">Global navigation</a>
</li>
</ul>
</nav>
Si el navegador tiene menos de 80 em de ancho, el widget "En esta página" se encuentra debajo del encabezado y la descripción. Para ello, debes incluir dos componentes de navegación del índice y ocultar uno o el otro con display: none; de CSS en función de una consulta de medios.
La inclusión de dos widgets idénticos para mostrar solo uno implica un antipatrón. Los bytes adicionales son insignificantes. Es adecuado ocultar el contenido HTML de todos los usuarios mediante display: none de CSS. El problema es que, en las pantallas panorámicas, el índice aparece antes de #main, y en las pantallas más estrechas, el índice está anidado en #main. Cuando usas el teclado para ir al contenido, se omite el índice en una pantalla panorámica. Si bien los usuarios están acostumbrados a que el contenido sea responsivo y cambie de ubicación cuando cambian de dispositivo o aumentan su tamaño de fuente, no esperan que cambie el orden de las pestañas cuando lo hacen. Los diseños de página deben ser accesibles, predecibles y coherentes en todo el sitio. Aquí, la ubicación del índice no es predecible.
Rutas de navegación de la página
Las rutas de navegación proporcionan una navegación secundaria para ayudar a los usuarios a comprender dónde se encuentran en un sitio web. Por lo general, muestran la jerarquía de URL del documento actual y la ubicación de la página actual en la estructura del sitio. Desde la perspectiva del usuario, la estructura del sitio puede diferir de la de archivos en el servidor. No hay problema. No es necesario que el usuario sepa cómo organizas tus archivos, pero sí debe poder navegar por el contenido.
Las rutas de navegación ayudan a los usuarios a navegar y comprender la organización de tu sitio, lo que les permite navegar con rapidez desde cualquier lugar hasta cualquier sección principal sin tener que revisar cada página anterior visitada para llegar a la página actual con la funcionalidad back.
Si el sitio tiene una estructura de directorios jerárquicas simple, como es el caso de web.dev, la navegación de la ruta de navegación a menudo estará compuesta por un vínculo a la página principal o al nombre de host, con un vínculo al archivo de índice de cada directorio en el nombre de ruta de la URL. La inclusión de la página actual es opcional y requiere un poco de atención adicional.
const url = new URL("https://web.dev/learn/html/navigation");
const sections = url.hostname + url.pathname.split('/');
// "web.dev,learn,html,navigation"
Las secciones de la ruta de navegación muestran la ruta desde la página actual hasta la página principal, con cada nivel intermedio.
Cada página del módulo HTML de Learn tiene la misma navegación de ruta de navegación, que muestra la jerarquía de las lecciones de HTML dentro de la sección learn de web.dev. El código es similar al siguiente, pero se quitaron las clases y los detalles SVG para mayor claridad:
<nav aria-label="breadcrumbs">
<ul role="list">
<li>
<a href="/">
<svg aria-label="web.dev" role="img">
<use href="#webDevLogo" />
</svg>
</a>
</li>
<li>
<a href="/learn">Learn</a>
</li>
<li>
<a href="/learn/html">Learn HTML!</a>
</li>
</ul>
<share-action authors="@estellevw" data-action="click" data-category="web.dev" data-icon="share" data-label="share, twitter" role="button" tabindex="0">
<svg aria-label="share" role="img">
<use href="#shareIcon" />
</svg>
<span>Share</span>
</share-action>
</nav>
Esta ruta de navegación sigue las prácticas recomendadas. Usa el elemento <nav>, un rol de punto de referencia, por lo que la tecnología de accesibilidad presenta las rutas de navegación como un elemento de navegación en la página.
El nombre accesible de "rutas de navegación", proporcionado con el aria-label, lo diferencia de los otros puntos de referencia de navegación del documento actual.
Entre los vínculos, se encuentran los separadores de contenido generados por CSS. Los separadores van antes de cada elemento de la lista que comienza con el segundo <li>.
[aria-label^="breadcrumb" i] li + li::before {
content: "";
display: block;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
rotate: 45deg;
opacity: .8
}
Los lectores de pantalla no los "verán", lo cual es una práctica recomendada: los separadores entre los vínculos de rutas de navegación deben ocultarse de los lectores de pantalla. También deben tener suficiente contraste con el fondo, al igual que el texto normal.
Esta versión usa una lista sin ordenar y elementos de lista. Se prefiere una lista ordenada, ya que se enumeran los elementos de lista ordenada.
También es una lista: se volvió a agregar role="list" porque algunos valores de propiedad de visualización de CSS quitan la semántica de algunos elementos.
Por lo general, el vínculo a la página principal en una ruta de navegación debe indicar "inicio" en lugar de ser el logotipo del sitio con el nombre del sitio como etiqueta. Sin embargo, como la ruta de navegación está en la parte superior del documento y es el único caso del logotipo en la página, tiene sentido por qué se usó este antipatrón.
El último elemento es un elemento <share-action> personalizado. Los elementos personalizados se analizan en la sección 15. Si bien este elemento personalizado no forma parte de la ruta de navegación, incluir un elemento no relacionado en una <nav> está bien, siempre que la inclusión sea coherente en todas las páginas.
Página actual
En esta página, la página actual, "Navegación", no se incluye en la ruta de navegación. Cuando se incluye la página actual en una ruta de navegación, el texto preferentemente no debe ser un vínculo, y aria-current="page" debe incluirse en el elemento de la lista de la página actual. Cuando no se incluye, es útil indicar que el encabezado que sigue es la página actual con un ícono o algún otro símbolo.
Si el diseño cambia, se podría usar una versión alternativa de la ruta de navegación:
<nav aria-label="breadcrumbs">
<ol role="list">
<li>
<a href="/">Home</a>
</li>
<li>
<a href="/learn">Learn</a>
</li>
<li>
<a href="/learn/html">Learn HTML!</a>
</li>
<li aria-current="page">
Navigation
</li>
</ol>
</nav>
Las rutas de navegación no son para pasos lineales. Por ejemplo, una lista de la ruta que siguió el usuario para llegar a la página actual o la lista de pasos seguidos hasta este punto en una receta se puede anidar en un <nav>, pero no se debe etiquetar como ruta de navegación.
Navegación local
Hay otro componente de navegación en esta página. Si usas una pantalla panorámica, verás una barra lateral a la izquierda con el logotipo "Aprender HTML", una barra de búsqueda y vínculos a cada una de las 20 secciones de esta sección. Cada vínculo contiene el número del capítulo, el título de la sección y una marca de verificación a la derecha en las secciones que ya visitaste, posiblemente esta si saliste y regresaste. Los vínculos a todas las secciones de Aprende HTML, junto con la búsqueda y el encabezado local, corresponden a la navegación por la ubicación.
Si visitas este sitio desde una tablet o un dispositivo móvil, o si tienes una pantalla más angosta, la barra lateral estará oculta cuando cargues la página. Puedes hacer que sea visible a través del menú de hamburguesa en la barra de navegación superior (sí, el encabezado es un elemento <web-header> personalizado con role="navigation" configurado).
La principal diferencia entre la navegación local permanente en pantallas panorámicas y la navegación local en pantallas más angostas que pueden aparecer y desaparecer es la visualización del botón de cierre en la versión que se puede ocultar. Este ícono está oculto en pantallas panorámicas con display: none;.
El enlace a este documento, sección 010, tiene un aspecto ligeramente diferente de los otros enlaces en la navegación local para indicar a los usuarios videntes que esta es la página actual. Esta diferencia visual se crea con CSS. La página actual también se identifica con el atributo aria-current="page". De esta manera, se informa a las tecnologías de asistencia que se trata de un vínculo a la página actual. El código HTML de este elemento de la lista dentro de esta navegación local es similar al siguiente:
<li>
<a aria-current="page" href="/learn/html/navigation" data-complete="true">
<span>010</span>
<span>Navigation</span>
<svg aria-label="Check" role="img">
<use href="#checkmark" />
</svg>
</a>
</li>
Si no es la primera vez que visitas esta página, la marca de verificación no estará visible. Si ya visitaste esta página, el atributo personalizado data-complete se establece en true y se mostrará la marca de verificación. La marca de verificación se incluye en cada vínculo, pero CSS la oculta de los usuarios que no visitaron esta página antes con display: none debido a la ausencia del atributo y el valor data-complete="true":
.course .stack-nav a:not([data-complete="true"]) svg {
display: none;
}
Cuando display se establece en un valor distinto de none, role informa a la tecnología de accesibilidad que el SVG intercalado es una imagen, y aria-label actúa como el atributo alt en un elemento <img>.
Navegación global
La navegación global es la sección de navegación que conduce a las páginas de nivel superior del sitio web, que es igual en todas las páginas de un sitio.
La navegación global de un sitio también puede estar compuesta por pestañas que abren listas anidadas de vínculos que se vinculan a todas las subsecciones de un sitio u otros menús.
Puede incluir secciones con títulos, botones y widgets de búsqueda. Estas funciones adicionales no son un requisito. Lo que se requiere es que la navegación aparezca en todas las páginas y que sea la misma en todas las páginas; con aria-current="page" en todos los vínculos a la página actual, por supuesto.
La navegación global proporciona un medio coherente para trasladarse a cualquier parte de la aplicación o el sitio web. Google no tiene navegación global en la parte superior de la página. Yahoo! lo hace. Si bien todas las propiedades principales de Yahoo! tienen estilos diferentes, el contenido de la mayoría de las secciones es el mismo.
El contenido de los encabezados de navegación globales de noticias y deportes es el mismo, pero el ícono que muestra que el usuario está en deportes no tiene suficiente contraste para que sea accesible, incluso para visitantes con visión reducida. Ambas secciones tienen una navegación global con una navegación local específica de la sección debajo.
Al igual que las navegaciones globales, los pies de página deben ser idénticos en todas las páginas. Pero esa es la única similitud. La navegación global permite navegar a todas las partes del sitio desde la perspectiva del producto. Los elementos de navegación de un pie de página no tienen requisitos específicos. Por lo general, el pie de página incluye vínculos corporativos, como declaraciones legales, información sobre la empresa y carreras, y puede llevar a fuentes externas, como íconos de redes sociales.
El pie de página de esta página contiene tres elementos <nav> adicionales: la navegación del pie de página, los desarrolladores de Google y las condiciones y políticas. Cada uno de ellos es un vínculo. La navegación del pie de página incluye cómo contribuir a web.dev en GitHub, otro contenido educativo proporcionado por Google fuera de web.dev y vínculos externos sobre cómo conectarse.
Estas tres navegaciones en <footer> son elementos <nav> con un aria-label que proporciona un nombre accesible para estos roles de punto de referencia.
Todas las navegaciones que vimos pertenecen a vínculos anidados en listas de navegación. Abordamos todo lo que necesitas saber para crear tus propias navegaciones.
A continuación, veremos el marcado de tablas de datos.
Verifica tus conocimientos
Pon a prueba tus conocimientos de navegación.
¿Qué elemento se utiliza para marcar la navegación principal de un sitio?
<navigation><breadcrumb><nav>¿Puede haber varios elementos de navegación en una página?