Navegación

Como viste en los vínculos, el elemento <a> con el atributo href crea vínculos que los usuarios pueden seguir haciendo clic o presionando. En las listas, aprendiste a crear listas de contenido. En esta sección, descubrirás cómo agrupar listas de entre sí para crear la navegación.

Existen varios tipos de navegación y varias formas de mostrarlos. Los anuncios fijos con nombre en el texto que se vinculan a otras páginas dentro de mismo sitio web se consideran navegación local. La navegación local que consiste en una serie de enlaces que muestran la jerarquía de la página actual en relación con la estructura del sitio o las páginas que siguió el usuario hasta llegar a la página actual se denomina ruta de navegación. El índice de una página es otro tipo de navegación local. Una página que contiene enlaces jerárquicos a cada una de las páginas de un sitio se denomina un mapa del sitio. La sección de navegación que lleva a las páginas de nivel superior del sitio web que se encuentran en cada página se denomina navegación global. La navegación global se puede mostrar de varias formas, incluidas barras de navegación, menús desplegables y menús flotantes. El mismo sitio puede mostrar su navegación global de forma 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 es 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, verás algunas funciones de navegación. Hay una ruta de navegación sobre el título, el mensaje "en esta página" índice después del título, y el texto "Learn HTML" un índice que, según el ancho de la pantalla, siempre aparece o se hace visible con solo hacer clic en un botón de menú. El primer elemento de la página es un vínculo oculto a #principal, que te permite omitir los vínculos de la barra lateral y de rutas de navegación.

"Ir al contenido" vínculo

El primer elemento de la página es un vínculo interno:

<a href="#main" class="skip-link button">Skip to main</a>

que, cuando se hace clic en él, o cuando está enfocado y el usuario presiona Enter, se desplaza por la página y se 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, incluso si leíste 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. Se incluye el vínculo de navegación para que, cuando un usuario de teclado presione tab durante la carga, pueda saltar rápidamente al contenido principal del sitio para evitar tener que tabulando a través de extensas vinculaciones. En esta página, el vínculo de navegación omite la navegación de la barra lateral de toda la sección y la navegación de la ruta de navegación. lleva al usuario directamente al título de la página.

A la mayoría de los diseñadores no les gusta que parezca tener un enlace en la parte superior de la página. Está bien ocultar el vínculo mientras se recuerda que cuando se enfoque el vínculo, lo que ocurrirá cuando un usuario que usa el teclado presiona la tecla de tabulación a través del vínculo en la página, este debe estar visible para todos los usuarios. Solo oculta contenido en el estado 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 cuál es el "principal" significa. Como todo el texto de los vínculos, 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 de la contenido principal de la página. Para probar esto, cuando se cargue la página, presiona la tecla Tab para ir a la sección "Ir a la página principal" enlace. Luego, presiona Enter para asegurarte de que "salte". al contenido principal.

Índice

El vínculo de ir al contenido desplaza el contenido principal hasta 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 el eslogan, una breve descripción de su contenido. . La posibilidad de que la navegación del índice aparezca antes o después del encabezado en la base de código depende del ancho de tu navegador.

Si tu navegador tiene más de 80 cm de ancho, el índice aparece antes del encabezado en el lenguaje de marcado y es similar al 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>

El <nav> es el mejor elemento para usar en secciones de navegación, ya que informa automáticamente al lector de pantalla y al motor de búsqueda. que una sección tiene el rol 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 texto que está visible en la página, es preferible usar aria-labelledby para hacer referencia al texto visible.

Podemos cambiar la <div> no semántica por 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 es posible que los valores de los atributos no lo hagan. Cuando sea posible, si hay texto que proporcione una etiqueta adecuada, es preferible usar esa etiqueta en lugar del texto de atributo.

Esta navegación es el índice. Si quieres usar aria-label, proporciona esa información en lugar de repetir el texto visible:

<nav aria-label="Table of Contents">
  <p>On this page</p>

Cuando proporciones un nombre de accesibilidad en 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 “navegación”. se incluye esa información cuando se usan elementos semánticos.

Los vínculos están en una lista sin ordenar. Si bien no es necesario que estén anidadas en una lista, el uso de una lista permite a los usuarios de lectores de pantalla saber cuántos los elementos de lista y, por lo tanto, los 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 tu navegador tiene menos de 80 cm de ancho, la ventana "En esta página" está debajo del encabezado y la descripción. Para ello, se incluyen dos componentes de navegación de tabla de contenido y ocultar uno o el otro con CSS display: none; basado en una consulta de medios.

La inclusión de dos widgets idénticos para mostrar solo uno es un antipatrón. Los bytes adicionales son insignificantes. Ocultando contenido HTML de es apropiado para todos los usuarios que usen el CSS display: none. El problema es que, en las pantallas anchas, el índice aparece antes que #main. En pantallas más estrechas, el índice está anidado en #main. Usar el teclado para ir al contenido salta sobre la tabla de los contenidos en una pantalla panorámica. Mientras que los usuarios están acostumbrados a que el contenido sea responsivo y cambie de ubicación cuando cambian de dispositivo o aumentar el tamaño de la fuente, no esperan que el orden de tabulación cambie 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 brindan 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 las URLs del documento actual y la ubicación de la página actual en la estructura del sitio. La estructura del sitio desde la perspectiva del usuario puede variar de la estructura de archivos en el servidor. Está bien. El usuario no necesita saber cómo organizas tus archivos, pero sí debe poder para navegar por tu 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 rápidamente a cualquier lugar hacia cualquier lugar principal. sin tener que retroceder a cada página anterior que visitaste para llegar a la página actual usando la funcionalidad back.

Si el sitio tiene una estructura de directorios jerárquica y sencilla, como es el caso de web.dev, la navegación por la ruta de navegación a menudo estará compuesta de 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 los 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 de aprendizaje del módulo HTML tiene la misma navegación de ruta de navegación, que muestra la jerarquía de las lecciones de HTML dentro del Sección learn de web.dev. El código es similar al siguiente, pero se quitaron las clases y los detalles de 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, para que la tecnología de accesibilidad presente las rutas de navegación como un elemento de navegación en la página. El nombre accesible de las "rutas de navegación", que se proporciona con el aria-label, lo diferencia de los otros puntos de referencia de navegación del documento actual.

Entre los vínculos, hay separadores de contenido generados por CSS. Los separadores aparecen 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 "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 y elementos de lista sin ordenar. Es preferible usar una lista ordenada, ya que se enumeran los elementos de una 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 decir "home" en lugar de ser el logotipo del sitio con el nombre la etiqueta. Sin embargo, como la ruta de navegación se encuentra 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 sea parte de la ruta de navegación, lo que incluye incluir un elemento no relacionado en un <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. Si la página actual se incluye en una ruta de navegación, el texto preferentemente no debe ser un vínculo y se debe incluir aria-current="page" en el nombre de la página actual elemento de la lista. Cuando no está incluido, resulta útil indicar que el encabezado que sigue es la página actual con un u otro símbolo.

Si el diseño cambiara, 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 el usuario siguió para llegar a la página actual o La lista de pasos que se siguieron hasta este punto en una receta puede anidarse en un <nav>, pero no debe etiquetarse como una ruta de navegación.

Navegación local

Hay otro componente de navegación en esta página. Si estás en una pantalla panorámica, hay una barra lateral a la izquierda con las "Aprender HTML" un logotipo, una barra de búsqueda y vínculos a cada una de las 20 secciones de Learn HTML. Cada enlace contiene el número de 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 navegaste a otra parte y regresaste. Los vínculos a todas las secciones en Learn HTML, junto con el encabezado local y de búsqueda, constituyen la navegación por las ubicaciones.

Si visitas este sitio en una tablet o un dispositivo móvil, o tienes una pantalla más estrecha, cuando cargues esta página, la barra lateral quedará oculta. Puedes hacerlo visible a través del menú de opciones en la barra de navegación superior (sí, el encabezado es un elemento <web-header> personalizado con role="navigation" establecido).

La principal diferencia entre la navegación local permanente en pantallas anchas y la navegación local en pantallas más estrechas que se puede hacer 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 las pantallas panorámicas con display: none;.

El vínculo a este documento, sección 010, tiene un aspecto ligeramente diferente de los otros enlaces de 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". Esto informa a las tecnologías de accesibilidad que es un vínculo a la página actual. El código HTML de este elemento de la lista dentro de este panel de 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 será visible. Si visitaste esta página anteriormente, la El atributo personalizado data-complete se estableció en true y se mostrará la marca de verificación. Se incluye la marca de verificación en cada vínculo, pero CSS oculta la casilla de verificación a los usuarios que no han visitado esta página antes con display: none debido a la ausencia de la Atributo y valor de data-complete="true":

.course .stack-nav a:not([data-complete="true"]) svg {
  display: none;
}

Cuando display tiene 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 lo haría el atributo alt en una <img>.

Navegación global

La navegación global es la sección de navegación que lleva a las páginas de nivel superior del sitio web que son iguales en todas las páginas de un sitio. La navegación global de un sitio también puede estar formada por pestañas que abren listas anidadas de vínculos que dirigen 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 aparece en todas las páginas y es la misma en todas las páginas; con aria-current="page" en cualquier vínculo a la página actual, por supuesto.

La navegación global ofrece un medio coherente para viajar a cualquier parte de la aplicación o el sitio web. Google no tiene datos globales de navegación en la parte superior de la página. Presupuestos de campañas publicitarias de Yahoo! hace. Si bien todas las funciones principales propiedades tienen estilos diferentes, el contenido para la mayoría de las secciones sean iguales.

El contenido de los encabezados de navegación global de noticias y deportes es el mismo, pero el ícono que muestra que el usuario está los deportes no tienen suficiente contraste para ser accesible; incluso para los visitantes sin visión reducida. Ambas secciones tienen una definición con un panel de navegación local específico de la sección debajo de él.

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. Navegación global permite la navegación a todas las partes del sitio desde la perspectiva del producto. Los elementos de navegación dentro 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 jurídicas, sobre la empresa y las carreras profesionales, y puede conducir a contenido fuentes, como iconos de redes sociales.

El pie de página de esta página contiene tres elementos <nav> adicionales: navegación del pie de página, desarrolladores de Google, y Condiciones y políticas. y que cada uno 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 “cómo conectarse” externo enlaces.

Estas tres navegaciones en <footer> son elementos <nav> con un aria-label que proporciona un nombre accesible para estos roles de puntos de referencia. Todas las navegaciones que vimos han sido vínculos anidados en listas dentro de un panel 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 sobre navegación.