Breadcrumbs accesibile

Breadcrumbs arată unde se află o pagină în magazin: Acasă › Femei › Încălțăminte › Botine. Sunt simple, dar adesea construite ca text simplu cu separatori pe care cititoarele de ecran îi citesc cu voce tare. Această pagină arată modelul APG. Face parte din seria modele de interfață accesibile.

Când folosiți breadcrumbs

APG definește un traseu breadcrumb drept „o listă de linkuri către paginile părinte ale paginii curente, în ordine ierarhică”. Folosiți breadcrumbs pe site-uri cu mai multe niveluri — categorii, subcategorii, pagini de produs, articole de ajutor. De obicei sunt plasate înaintea conținutului principal. Pe un site plat, cu două niveluri, aduc puțin.

Criterii WCAG relevante

WCAG nu cere breadcrumbs, dar dacă le aveți, se aplică aceste criterii:

• 1.3.1 Informații și relații (A): traseul este o listă într-un landmark de navigare, nu text liber.
• 2.4.5 Modalități multiple (AA): breadcrumbs pot fi una dintre căile de a găsi pagini, alături de meniuri, căutare și o hartă a site-ului.
• 2.4.4 Scopul linkului (în context) (A): textele linkurilor sunt numele paginilor.
• 4.1.2 Nume, rol, valoare (A) și 1.4.1 Utilizarea culorii (A): pagina curentă este identificată în cod, nu doar prin culoare.
• 3.2.3 Navigare consecventă (AA): traseul apare în același loc pe fiecare pagină.
• 2.5.8 Dimensiunea țintei (minim) (AA): linkurile scurte din breadcrumb au nevoie pe mobil de dimensiune sau spațiere suficientă.
• 1.4.10 Reflow (AA): traseele lungi trec pe rândul următor pe ecranele înguste.

Exemplu de cod

<nav aria-label="Fir de navigare" class="breadcrumb">
  <ol>
    <li><a href="/ro/">Acasă</a></li>
    <li><a href="/ro/femei">Femei</a></li>
    <li><a href="/ro/femei/incaltaminte">Încălțăminte</a></li>
    <li><a href="/ro/femei/incaltaminte/botine" aria-current="page">Botine</a></li>
  </ol>
</nav>

<style>
  .breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; }
  .breadcrumb li + li::before {
    content: "";
    display: inline-block;
    margin: 0 .5em;
    width: .4em; height: .4em;
    border-top: 1px solid currentColor;
    border-right: 1px solid currentColor;
    transform: rotate(45deg);   /* o săgeată desenată din borduri: nimic de citit cu voce tare */
  }
  .breadcrumb [aria-current="page"] { font-weight: 600; text-decoration: none; }
</style>

Ce specifică APG:

• Traseul „este cuprins într-o regiune landmark de navigare”, etichetată cu aria-label sau aria-labelledby.
• „Linkul către pagina curentă are aria-current setat la page.” Dacă pagina curentă nu este un link, ci text simplu, aria-current este opțional.
• Exemplul APG structurează linkurile ca listă ordonată, ceea ce le spune utilizatorilor de cititoare de ecran câte niveluri există, și adaugă separatorii din CSS — o bordură înclinată — astfel încât „nu sunt reprezentați în arborele de accesibilitate”.

Folosirea nav le oferă utilizatorilor un landmark la care pot sări; eticheta (în exemplul APG „Breadcrumb”, aici „Fir de navigare”) îl deosebește de navigarea principală și de navigarea din subsol.

Interacțiunea cu tastatura

APG listează interacțiunea cu tastatura pentru breadcrumbs ca „nu se aplică”: sunt linkuri obișnuite.

Greșeli frecvente în magazinele online

• Separatori în HTML („/”, „»”, „>”) pe care cititoarele de ecran îi citesc între fiecare link.
• Un div cu linkuri fără nav și fără listă, sau un nav fără etichetă lângă alte două elemente nav neetichetate.
• Pagina curentă marcată doar prin culoarea gri, fără aria-current sau altă diferență vizuală.
• Breadcrumbs care reflectă traseul de navigare („Înapoi la rezultatele căutării”) pe unele pagini și arborele de categorii pe altele, ceea ce strică consecvența.
• Trasee trunchiate pe mobil, care ascund categoriile părinte fără nicio posibilitate de a le afișa.
• Linkuri minuscule înghesuite pe mobil.
• Date structurate pentru breadcrumbs care nu corespund traseului vizibil — nu este o problemă de accesibilitate în sine, dar e un semn că cele două au fost construite separat.

Ce găsesc verificările automate și ce rămâne pentru testarea manuală

Toate sunt carduri în biblioteca noastră de reguli. Testare manuală: verificați cu un cititor de ecran că traseul este anunțat ca o navigare cu numele dat, cu o listă cu numărul corect de elemente, că separatorii nu sunt citiți și că pagina curentă este identificată; verificați că traseul trece pe rândul următor la 320 de pixeli CSS și că este același pe fiecare pagină.

Rulați verificarea gratuită a unei pagini pe o pagină de categorie. Este o verificare automată, nu un audit complet.

Întrebări frecvente

Cere WCAG breadcrumbs?

Nu. Breadcrumbs sunt o modalitate de a-i ajuta pe utilizatori să știe unde se află. 2.4.5 Modalități multiple cere mai mult de o cale de a găsi o pagină într-un set de pagini; breadcrumbs pot contribui la asta alături de navigare și căutare, dar nu sunt obligatorii.

Cum marchez un breadcrumb accesibil?

Un element nav etichetat cu aria-label (de exemplu „Fir de navigare”), o listă ordonată de linkuri către paginile părinte și aria-current="page" pe linkul către pagina curentă. Acesta este modelul de breadcrumb APG.

Pagina curentă din breadcrumb trebuie să fie un link?

Ambele variante sunt în regulă. Dacă este un link, are nevoie de aria-current="page". Dacă este text simplu, APG spune că aria-current este opțional.

Cum se adaugă separatorii?

Din CSS, de exemplu cu o bordură sau un pseudo-element, ca cititoarele de ecran să nu citească „slash” sau „mai mare decât” între linkuri. Dacă separatorul este în HTML, ascundeți-l cu aria-hidden="true".

Poate o verificare automată să testeze breadcrumbs?

Găsește linkuri fără nume, structuri de listă greșite, valori aria-current invalide și landmark-uri de navigare fără nume unice. Dacă traseul corespunde structurii site-ului trebuie verificat de o persoană.

Surse

• W3C WAI, APG Breadcrumb pattern: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
• W3C WAI, APG Breadcrumb example: https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/