DESY

Sistema de Diseño del Gobierno de Aragón.

Migas de pan

Los breadcrumbs o migas de pan sirven para identificar dónde nos encontramos dentro de la página web o aplicación. También nos ofrece una navegación secundaria hacia los niveles ascendentes de la página actual.

Índice de apartados de esta página

Anatomía

Las migas de pan se componen por una lista de enlaces que representan los “ascendientes” de la página actual, separadas por el símbolo > y en último lugar se encontrará el título de la página actual.

Accesibilidad

Cómo funciona

Rodeado con la etiqueta nav. Dentro se encuentra una lista con orden ol con una serie de li que contienen un enlace.

Los lectores de pantalla anuncian la navegación con Estás en: gracias a un aria-label incluido por defecto.

El propio componente añade al último item un aria-current=page y se resalta el texto con la etiqueta strong para anunciar que se trata de la página actual.

Basado en el patrón breadcrumb de W3C

Qué tener en cuenta

Todos los atributos de accesibilidad se encuentran por defecto en la configuración del componente.

Buenas prácticas

  • Este elemento se utiliza cuando hay tres o más niveles de navegación. Cuando hay menos de tres, se recomienda el uso de ‘volver atrás’.
  • No mezclar con otros sistemas de navegación en la página (por ejemplo, con un ‘volver atrás’).
  • Los enlaces que se muestran en las migas de pan deben hacer referencia a la arquitectura del sitio, no a la navegación que ha realizado el usuario.
  • El contenido de cada enlace debe ser el título de la página a la que se enlaza.