[Accessibilité] Fil d'ariane (breadcrumb)

[seinhorn]

ETQ visiteur du blog en situation de handicap
Je souhaite pouvoir accéder aux informations véhiculées par le fil d'ariane avec les outils d'assistance

Contexte

Actuellement le fil d'ariane n'est pas adapté aux visiteurs du blog en situation de handicap

Besoin

Il faudrait permettre aux visiteurs du blog en situation de handicap d'avoir une information adaptée

Solution

supprimer <span class="">&gt;</span>
ajouter le style CSS nécessaire pour le remplacer

Par exemple :

<ol itemscope="" itemtype="https://schema.org/BreadcrumbList" class="[...] breadcrumb">
    <li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="/fr/" class="color-info link">
            <span itemprop="name" class="">Accueil</span>
        </a>
        <meta itemprop="position" content="1">
    </li>
    <span class="">&gt;</span>
    <li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="/fr/categories/javascript/" class="color-info link">
            <span itemprop="name" class="">JavaScript</span>
        </a>
        <meta itemprop="position" content="2">
    </li>
</ol>

A remplacer par :

<ol itemscope="" itemtype="https://schema.org/BreadcrumbList" class="[...] breadcrumb">
    <li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="/fr/" class="color-info link">
            <span itemprop="name" class="">Accueil</span>
        </a>
        <meta itemprop="position" content="1">
    </li>
    <li itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="/fr/categories/javascript/" >
            <span itemprop="name" class="color-info link">JavaScript</span>
        </a>
        <meta itemprop="position" content="2">
    </li>
</ol>

Ajouter le style CSS suivant :

.breadcrumb li:not(:first-child)::before {
    content: ">";
    margin-right: 4px;
}

Documentation :

https://docs.google.com/spreadsheets/d/10vwRgRJj07PcW3w1iCc21QxfF6Gshn0s9-P8EGU8BKs/edit?gid=1762007069#gid=1762007069