Acordeon accesibil

Acordeoanele țin în frâu paginile lungi: FAQ, livrare și retur, detalii despre produs, grupuri de filtre. APG definește acordeonul drept „un set de titluri interactive așezate vertical, fiecare conținând un titlu, un fragment de conținut sau o miniatură care reprezintă o secțiune de conținut” — titlurile își afișează sau își ascund panourile. Această pagină arată marcajul corect. Face parte din seria modele de interfață accesibile.

Când folosiți un acordeon

• Mai multe secțiuni independente, din care utilizatorii vor doar una sau două: FAQ, mărimi și întreținere, livrare și retur.
• Machete pentru mobil în care taburile nu încap.
• Grupuri de filtre în bara laterală a unei categorii.

Nu ascundeți într-un panou închis informații esențiale de care au nevoie majoritatea utilizatorilor — prețul, disponibilitatea și datele principale ale produsului trebuie să fie vizibile în pagină.

Criterii WCAG relevante

• 4.1.2 Nume, rol, valoare (A): fiecare antet este un buton cu starea extins sau restrâns.
• 1.3.1 Informații și relații (A): titlurile secțiunilor sunt titluri reale (headings).
• 2.4.6 Titluri și etichete (AA): titlurile descriu secțiunea lor.
• 2.1.1 Tastatură (A) și 2.4.7 Focus vizibil (AA).
• 1.4.11 Contrast non-text (AA): pictograma plus sau săgeata care arată starea are nevoie de 3:1.
• 2.5.8 Dimensiunea țintei (minim) (AA): ținta este întregul rând al antetului, nu doar pictograma.

Exemplu de cod

<!-- Acordeon APG: heading > button, panou controlat de buton -->
<h3>
  <button type="button" id="acc-shipping" aria-expanded="true" aria-controls="panel-shipping">
    Livrare
  </button>
</h3>
<div id="panel-shipping">
  <p>Comenzile plasate înainte de ora 14 sunt expediate în aceeași zi lucrătoare.</p>
</div>

<h3>
  <button type="button" id="acc-returns" aria-expanded="false" aria-controls="panel-returns">
    Retururi
  </button>
</h3>
<div id="panel-returns" hidden>
  <p>Puteți returna produsele în termen de 30 de zile.</p>
</div>

<!-- Alternativă nativă pentru secțiuni independente -->
<details>
  <summary>Instrucțiuni de întreținere</summary>
  <p>Spălare la mașină la 30 °C.</p>
</details>

Observații din modelul de acordeon APG:

• Titlul fiecărui antet se află într-un element cu rolul button, încadrat într-un heading de nivel potrivit, iar butonul „este singurul element din interiorul titlului”.
• aria-expanded este true când panoul este vizibil și false când este ascuns; aria-controls trimite la panou.
• Dacă un panou este deschis și acordeonul nu permite restrângerea lui, butonul are aria-disabled="true".
• Fiecare panou poate avea role="region" cu aria-labelledby care trimite la butonul său. Este opțional, iar APG îl descurajează când multe panouri pot fi extinse simultan (cam șase sau mai multe), deoarece creează prea multe landmark-uri.
• Scriptul comută aria-expanded și atributul hidden. Rotiți săgeata cu CSS pe baza [aria-expanded="true"], ca starea vizuală să nu se poată desincroniza.

details și summary vă dau butonul, starea și comportamentul la tastatură fără niciun script. Se potrivesc bine pentru FAQ și instrucțiuni de întreținere; folosiți varianta ARIA când titlurile secțiunilor trebuie să fie și titluri în structura paginii.

Interacțiunea cu tastatura

Din modelul de acordeon APG:

Greșeli frecvente în magazinele online

• Antete div clicabile cu o pictogramă săgeată — fără buton, fără stare, fără tastatură.
• Titlul în interiorul butonului sau un buton care cuprinde tot panoul, ceea ce strică structura titlurilor.
• aria-expanded setat o singură dată și niciodată actualizat.
• Panouri închise ascunse cu max-height: 0, ale căror linkuri primesc totuși focusul.
• Întrebări FAQ stilizate ca titluri, dar marcate ca p sau span, ori titluri care sar niveluri.
• Doar pictograma mică „+” este clicabilă, nu și titlul.
• Acordeoane de filtre care reîncarcă pagina la deschidere și pierd focusul.

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

Toate sunt carduri în biblioteca noastră de reguli. Testare manuală: deschideți și închideți fiecare secțiune cu Enter și Space, verificați că un cititor de ecran anunță „restrâns” și „extins”, că panourile închise nu pot primi focusul și că pictograma de stare este vizibilă în ambele teme și la zoom de 200 %.

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

Întrebări frecvente

Cum construiesc un acordeon accesibil?

Puneți titlul fiecărei secțiuni într-un titlu (heading), iar în interiorul acestuia un buton cu aria-expanded și aria-controls care afișează sau ascunde panoul. Acesta este modelul de acordeon APG. Elementele native details și summary sunt o alternativă mai simplă pentru secțiuni independente.

Ce taste are nevoie un acordeon?

Enter sau Space pe butonul din antet deschide sau închide panoul, iar Tab și Shift + Tab trec prin antete și prin linkurile din panourile deschise. Tastele săgeți nu sunt necesare.

Fiecare panou de acordeon trebuie să aibă role="region"?

Este opțional. APG recomandă să-l evitați când multe panouri pot fi deschise în același timp, cam șase sau mai multe, deoarece creează prea multe landmark-uri.

Conținutul dintr-un panou închis este o problemă de accesibilitate?

Nu, conținutul dintr-un panou închis este în regulă, atâta timp cât butonul poate fi accesat și își anunță starea. Conținutul trebuie ascuns corect, de exemplu cu atributul hidden, ca să nu poată primi focusul cât timp panoul este închis.

Poate o verificare automată să testeze un acordeon?

Găsește butoane de antet sau elemente summary fără nume, titluri goale, valori aria-expanded invalide și aria-controls care trimite la ID-uri inexistente. Dacă starea se schimbă și panoul se deschide de la tastatură trebuie verificat manual.

Surse

• W3C WAI, APG Accordion pattern: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
• W3C WAI, APG Disclosure pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
• WHATWG, HTML Living Standard, interactive elements (details and summary): https://html.spec.whatwg.org/multipage/interactive-elements.html