Saltar al contenido principal

Ruta de navegación

Migas de pan IKN


Anatomía y especificaciones visuales

El componente de migas de pan es una lista horizontal de enlaces que representan la ruta a la página actual.

  1. Migas de pan: El conjunto completo de enlaces y separadores que conforman el camino de navegación.
  2. Enlace de migas de pan: Cada elemento de la ruta, excepto el último, es un enlace en el que se puede hacer clic para acceder a una página principal en la jerarquía.
  3. Separador: se usa un carácter HTML especial ( ›︎ ) para separar visualmente cada enlace en la ruta, indicando la relación jerárquica; use › o › para la comilla simple en ángulo recto.
  4. Página actual: el último elemento en las migas de pan. Representa el título de la página actual y no es un enlace.

Existen varios estados para el componente de migas de pan.

  • Estado predeterminado: los enlaces de las migas de pan tienen el mismo estilo que los enlaces de texto estándar. Los separadores son de color gris y no interactivos. La etiqueta de la página actual se muestra en texto negrilla para diferenciarla de los enlaces interactivos.
  • Estado al pasar el ratón por encima: cuando un usuario sitúa el cursor del ratón sobre un enlace de las migas de pan, el enlace muestra una línea debajo para proporcionar un indicador visual claro de que se puede hacer clic en él.
  • Estado de enfoque:para la accesibilidad mediante teclado, cuando un usuario navega a un enlace de ruta de navegación usando la tecla Tab, aparece un contorno azul sólido de 2 px (#0D76AD) alrededor del enlace.

Guía de accesibilidad e implementación

Para garantizar que el componente de ruta de navegación sea accesible y proporcione una experiencia coherente para todos los usuarios, las siguientes pautas de implementación son obligatorias.

  • Use la estructura semántica adecuada. La ruta de las migas de pan completa debe estar envuelta en un elemento < nav > con el atributo aria-label="Breadcrumb". Esto la identifica como un punto de referencia de navegación para usuarios de lectores de pantalla. La ruta en sí debe estar estructurada como una lista ordenada (< ol >) porque representa un camino secuencial.
  • Distinga los enlaces de la página actual. Todos los elementos de la ruta de las migas de pan deben ser enlaces (< a >), excepto el último. El último elemento representa la página actual del usuario y debe ser texto sin formato. Para que los usuarios de lectores de pantalla puedan acceder a esta información, el último elemento debe incluir el atributo aria-current="page".
  • Proporcione etiquetas claras y concisas. El texto de cada enlace de las migas de pan debe coincidir con el título de la página a la que enlaza. Evite títulos de página largos que puedan provocar que la ruta de las migas de pan se ajuste demasiado en pantallas pequeñas.
  • Garantice una colocación consistente. El componente de las migas de pan siempre debe ubicarse en un lugar consistente de la página. En InsureKidsNow.gov, debe aparecer en la parte superior del área de contenido principal, arriba del título de la página (< h1 >).
  • Gestione el comportamiento responsivo de manera adecuada. En pantallas pequeñas, las migas de pan se deben dividir en varias líneas según sea necesario. No recorte ni oculte las migas de pan en dispositivos móviles, ya que sigue siendo una valiosa herramienta de orientación.

Especificaciones adicionales

Para obtener información adicional sobre especificaciones, pautas, accesibilidad y uso, consulte la sección "Ruta de navegación" en el sitio web de USWDS:

USWDS - Migas de pan