Breadcrumbs separadores y accesibilidad

Etiquetas

https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/

In some themes like businessgroup_zymphonies_theme (sub theme of Bootstrap), the separator is coded into breadcrumb.html.twig. You will have to remove it from the template (in your custom sub theme). Then you can add a custom separator using CSS. Example:

.breadcrumb li:not(:last-child):after {
   content: ">"
}

or

.breadcrumb li:not(:first-child):before {
   content: ">"
}

For accessibility, you want to prevent screen reader announcement of the visual separators between links. For that reason CSS is the best solution. Ref: w3.org - Breadcrumb Example

.breadcrumb li:not(:last-child):after {
   content: ">"
}