Meniu de navigare accesibil

Navigarea principală este primul lucru pe care îl folosește fiecare vizitator, iar într-un magazin ea crește adesea într-un mega-meniu cu categorii, mărci și promoții. Cea mai frecventă greșeală de accesibilitate nu este lipsa ARIA, ci ARIA greșită: role="menubar" copiat dintr-o bibliotecă de componente. Această pagină explică ce recomandă APG în schimb. Face parte din seria modele de interfață accesibile.

Menu sau disclosure? Ce spune APG

APG are un model Menu și Menubar pentru meniurile de aplicație — „o listă de opțiuni, precum acțiuni sau funcții”, care se comportă ca meniurile din programele desktop. Exemplul său de menubar pentru navigare conține o avertizare explicită:

„Modelul menubar cere o funcționalitate complexă, inutilă pentru navigarea obișnuită a unui site” … „Un model mai potrivit pentru navigarea obișnuită a unui site, cu grupuri de linkuri care se pot extinde, este modelul Disclosure.”

APG adaugă că modelul disclosure „este mai potrivit pentru majoritatea site-urilor, pentru că puține site-uri au nevoie de funcționalitatea suplimentară de tastatură”. Exemplul său de navigare disclosure nu folosește rolul menu, pentru că „nu oferă funcționalitatea complexă pe care o așteaptă tehnologiile asistive”. Un role="menu" promite un comportament de meniu ca pe desktop; dacă site-ul nu îl oferă, meniul este mai greu de folosit decât niște linkuri simple.

Recomandare: un landmark nav, liste imbricate de linkuri și butoane disclosure pentru grupuri.

Criterii WCAG relevante

• 2.1.1 Tastatură (A): fiecare submeniu se deschide cu tastatura, nu doar la hover.
• 1.3.1 Informații și relații (A): listele și imbricarea transmit ierarhia.
• 4.1.2 Nume, rol, valoare (A): butoanele de comutare expun aria-expanded.
• 1.4.13 Conținut la hover sau focus (AA): submeniurile deschise la hover pot fi închise (Escape) și survolate.
• 2.4.1 Ocolirea blocurilor (A): un skip link sau landmark-uri pentru a trece peste un meniu lung.
• 2.4.3 Ordinea focusului (A) și 2.4.7 Focus vizibil (AA).
• 3.2.3 Navigare consecventă (AA): aceeași ordine pe fiecare pagină.
• 1.4.10 Reflow (AA) și 2.5.8 Dimensiunea țintei (minim) (AA) pentru meniul de pe mobil.

Exemplu de cod

<nav aria-label="Principal">
  <ul>
    <li>
      <button type="button" aria-expanded="false" aria-controls="nav-women">Femei</button>
      <ul id="nav-women" hidden>
        <li><a href="/ro/femei/rochii">Rochii</a></li>
        <li><a href="/ro/femei/incaltaminte" aria-current="page">Încălțăminte</a></li>
      </ul>
    </li>
    <li><a href="/ro/reduceri">Reduceri</a></li>
  </ul>
</nav>

<script>
  document.querySelectorAll('nav button[aria-expanded]').forEach((button) => {
    const list = document.getElementById(button.getAttribute('aria-controls'));
    button.addEventListener('click', () => {
      const open = button.getAttribute('aria-expanded') === 'true';
      button.setAttribute('aria-expanded', String(!open));
      list.hidden = open;
    });
  });
</script>

Observații:

• Dacă elementul de nivel superior trebuie să fie și link către pagina categoriei, APG are o variantă, „Disclosure Navigation Menu with Top-Level Links”: linkul și un buton de comutare separat stau unul lângă altul. Nu faceți ca un singur element să fie și link, și comutator.
• Adăugați Escape: închideți grupul deschis și readuceți focusul pe butonul lui, așa cum face exemplul APG.
• Pe mobil, butonul „hamburger” este același disclosure: aria-expanded, un nume precum „Meniu”, iar panoul îl urmează în DOM.

Interacțiunea cu tastatura

Din exemplul APG de navigare disclosure:

Un menubar adevărat ar cere în schimb tastele săgeată pentru deplasarea între elemente, Tab pentru ieșirea din întregul menubar și căutare după prima literă — „funcționalitatea complexă” la care se referă APG.

Greșeli frecvente în magazinele online

• Mega-meniuri care se deschid doar la trecerea mouse-ului; utilizatorii de tastatură parcurg cu Tab linkurile de sus și nu ajung niciodată la subcategorii.
• role="menubar" și role="menuitem" pe linkuri obișnuite, adesea dintr-o temă sau un plugin, fără comportamentul cu tastele săgeată.
• Submeniuri ascunse care rămân focalizabile: Tab dispare în linkuri invizibile (focus pierdut în spatele opacity: 0).
• Numele categoriei este și link, și comutator, așa că utilizatorii de ecrane tactile și de tastatură nu pot deschide submeniul.
• Lipsește aria-expanded sau nu se schimbă niciodată din false.
• Mai multe landmark-uri nav fără etichete (principal, subsol, cont), astfel încât utilizatorii de cititoare de ecran nu le pot deosebi.
• Butoane hamburger fără nume și meniuri mobile care nu păstrează și nu readuc focusul când sunt construite ca suprapunere pe tot ecranul.

Ce prind verificările automate și ce testați manual

Toate sunt fișe în biblioteca noastră de reguli. Scanarea vede pagina așa cum se încarcă, cu submeniurile închise. Testarea manuală: deschideți fiecare grup cu Enter sau Space, verificați că aria-expanded se schimbă, apăsați Escape, parcurgeți cu Tab grupul deschis, verificați că grupurile închise nu pot primi focus și repetați cu meniul mobil la o lățime de 320 pixeli CSS. Extensia de browser poate verifica pagina cu un grup deschis.

Rulați verificarea gratuită a unei pagini pe pagina principală. Este o verificare automată, nu un audit complet, și nu constituie consultanță juridică.

Întrebări frecvente

Ar trebui ca navigarea unui site să folosească role="menu" sau role="menubar"?

De obicei, nu. APG avertizează că modelul menubar cere o funcționalitate complexă, inutilă pentru navigarea obișnuită a unui site, și recomandă modelul disclosure pentru navigarea cu grupuri de linkuri care se pot extinde.

Ce este navigarea disclosure?

Un element nav cu o listă de linkuri, în care fiecare grup cu sublinkuri are un buton cu aria-expanded care afișează sau ascunde sublista. Utilizatorii o parcurg cu Tab, Enter și Space, ca pe restul paginii.

Cum marchez pagina curentă în meniu?

Puneți aria-current="page" pe linkul către pagina pe care se află utilizatorul și arătați-o și vizual, nu doar prin culoare.

Are nevoie meniul de suport pentru tastele săgeată?

Nu în modelul disclosure. Exemplul APG suportă tastele săgeată, Home și End ca extra opțional, pe lângă Tab. Un menubar adevărat, în schimb, trebuie să implementeze modelul complet cu tastele săgeată.

Poate o verificare automată să testeze un meniu de navigare?

Găsește linkuri și butoane fără nume, roluri de meniu fără elemente de meniu, landmark-uri de navigare duplicate fără etichetă și linkuri ascunse, dar focalizabile. Nu poate testa dacă submeniurile se deschid cu tastatura sau dacă aria-expanded se actualizează.

Surse

• W3C WAI, APG Navigation Menubar example (caution about site navigation): https://www.w3.org/WAI/ARIA/apg/patterns/menubar/examples/menubar-navigation/
• W3C WAI, APG Menu and Menubar pattern: https://www.w3.org/WAI/ARIA/apg/patterns/menubar/
• W3C WAI, APG Disclosure pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
• W3C WAI, APG Disclosure Navigation Menu example: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/examples/disclosure-navigation/
• W3C WAI, APG Menu Button pattern: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/