Cómo crear breadcrumbs accesibles con Bootstrap o Tailwind

Los breadcrumbs (migas de pan) son una herramienta de navegación muy útil para ayudar a los usuarios a orientarse dentro de la estructura de un sitio web. Pero si no se implementan correctamente, pueden ser confusos para lectores de pantalla o difíciles de usar en dispositivos móviles.

En este post veremos cómo crear breadcrumbs accesibles con Bootstrap y Tailwind.

Problemas comunes en breadcrumbs

1. No están dentro de una navegación semántica.

2. Falta de etiqueta aria-label para indicar su propósito.

3. Uso de separadores como texto sin accesibilidad web → ej. > leído en voz alta.

4. Mal contraste o poco espacio entre enlaces.

5. No indicar el elemento actual al usuario.

Breadcrumbs accesibles con Bootstrap 5

Bootstrap ya ofrece un componente semántico para breadcrumbs:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="/">Inicio</a></li>
    <li class="breadcrumb-item"><a href="/blog">Blog</a></li>
    <li class="breadcrumb-item active" aria-current="page">Post actual</li>
  </ol>
</nav>

👉 Puntos clave:

• aria-label="breadcrumb" indica el propósito de la navegación.

• aria-current="page" marca el elemento actual.

Breadcrumbs accesibles con Tailwind

Con Tailwind debemos crear el estilo y accesibilidad web manualmente:

<nav class="flex text-gray-700 text-sm" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-1">
    <li>
      <a href="/" class="text-blue-600 hover:underline">Inicio</a>
    </li>
    <li>
      <span class="mx-2 text-gray-500">/</span>
      <a href="/blog" class="text-blue-600 hover:underline">Blog</a>
    </li>
    <li aria-current="page">
      <span class="mx-2 text-gray-500">/</span>
      <span class="text-gray-500">Post actual</span>
    </li>
  </ol>
</nav>

👉 Aquí:

• Usamos aria-label="Breadcrumb".

• El último elemento tiene aria-current="page".

• El separador / se marca como decorativo, no como enlace.

Buenas prácticas

• Usa nav con aria-label="breadcrumb".

• Añade aria-current="page" en el último elemento.

• Asegura contraste suficiente en enlaces y texto.

• Haz que el separador sea visual, no semántico.

• Mantén los breadcrumbs cortos y relevantes.

Conclusión

Los breadcrumbs accesibles permiten a cualquier usuario entender rápidamente dónde está y cómo regresar a niveles anteriores de navegación.

• En Bootstrap, el componente ya es accesible de serie.

• En Tailwind, debemos construirlo cuidando semántica y contraste.