Tab-uri accesibile (tablist)

Actualizat 14 octombrie 2026 · Lectură de 6 min

Paginile de produs împart adesea descrierea, specificațiile, livrarea și recenziile în tab-uri. Făcute corect, tab-urile se folosesc rapid cu tastatura. Făcute din elemente div și handlere de clic, ele ascund cea mai mare parte a informațiilor despre produs de utilizatorii de tastatură și de cititoare de ecran. Această pagină face parte din seria modele de interfață accesibile.

Când folosiți tab-uri

APG definește tab-urile drept „secțiuni de conținut stratificate, numite panouri de tab, care afișează câte un panou de conținut o dată”, în care fiecare panou are un tab care, la activare, îl afișează. Folosiți tab-uri pentru câteva secțiuni înrudite, paralele, de importanță similară, între care utilizatorii comută. Nu le folosiți pentru:

Navigarea între pagini — acestea sunt linkuri într-un nav, chiar dacă arată ca tab-uri; marcați-l pe cel curent cu aria-current="page".
Conținut lung, secvențial sau mai mult de câteva secțiuni — folosiți titluri sau un acordeon.

Criterii WCAG relevante

4.1.2 Nume, rol, valoare (A): rolurile tab, tablist, tabpanel și starea selectată.
1.3.1 Informații și relații (A): relația dintre tab și panou se află în cod.
2.1.1 Tastatură (A): toate tab-urile pot fi atinse și activate cu tastatura.
2.4.3 Ordinea focusului (A) și 2.4.7 Focus vizibil (AA).
1.4.11 Contrast non-text (AA): indicatorul tab-ului selectat are nevoie de un contrast de 3:1.
1.4.1 Utilizarea culorii (A): tab-ul selectat este indicat prin mai mult decât culoare.
1.4.10 Reflow (AA): tab-urile funcționează și pe un ecran lat de 320 pixeli CSS.

Exemplu de cod

<div class="tabs">
  <div role="tablist" aria-label="Informații despre produs">
    <button type="button" role="tab" id="tab-desc" aria-selected="true"
            aria-controls="panel-desc">Descriere</button>
    <button type="button" role="tab" id="tab-specs" aria-selected="false"
            aria-controls="panel-specs" tabindex="-1">Specificații</button>
    <button type="button" role="tab" id="tab-reviews" aria-selected="false"
            aria-controls="panel-reviews" tabindex="-1">Recenzii (12)</button>
  </div>

  <div role="tabpanel" id="panel-desc" aria-labelledby="tab-desc" tabindex="0">…</div>
  <div role="tabpanel" id="panel-specs" aria-labelledby="tab-specs" tabindex="0" hidden>…</div>
  <div role="tabpanel" id="panel-reviews" aria-labelledby="tab-reviews" tabindex="0" hidden>…</div>
</div>

Ce trebuie să facă scriptul:

Tastele săgeată mută focusul între tab-uri. Aceasta folosește un roving tabindex: tab-ul activ are tabindex="0", celelalte tabindex="-1", așa cum este descris în ghidul de tastatură APG.
La activare: setați aria-selected="true" pe noul tab și false pe toate celelalte, afișați panoul lui și ascundeți-le pe celelalte cu hidden.
tablist are aria-label sau aria-labelledby, dacă există un titlu vizibil.
APG spune că un panou „ar trebui să seteze tabindex="0"” când nu are conținut focalizabil sau primul său conținut nu este focalizabil, astfel încât Tab să poată ajunge la el.
O listă verticală de tab-uri primește aria-orientation="vertical" și folosește Săgeată sus și jos.

Interacțiunea cu tastatura

Din modelul APG pentru tab-uri (listă orizontală):

Tastă	Funcție
Tab	Mută focusul în lista de tab-uri, pe tab-ul activ; din listă, la panou sau la elementul următor
Săgeată stânga	Tab-ul anterior; de la primul, trece la ultimul. Opțional îl activează
Săgeată dreapta	Tab-ul următor; de la ultimul, trece la primul. Opțional îl activează
Space sau Enter	Activează tab-ul, dacă nu a fost activat la focus
Home / End	Opțional: primul sau ultimul tab
Delete	Opțional: închide un tab, dacă ștergerea este permisă

Activare automată sau manuală. APG spune că „se recomandă ca tab-urile să se activeze automat când primesc focusul”, dacă panoul este afișat fără o latență observabilă, ceea ce înseamnă de obicei că acel conținut este deja încărcat. Dacă afișarea unui panou necesită o cerere în rețea, activarea automată face navigarea cu săgeți lentă — atunci folosiți activarea manuală cu Space sau Enter. APG are exemple pentru ambele.

Greșeli frecvente în magazinele online

Tab-uri construite din elemente li sau div cu handlere de clic: fără rol, fără tastatură, fără stare selectată.
Toate tab-urile în secvența Tab și fără tastele săgeată — sau cu tastele săgeată, dar fără role="tab", așa că cititoarele de ecran nu anunță „tab 2 din 3”.
aria-selected rămâne true pe primul tab după ce este ales altul.
Panouri ascunse cu opacity: 0 sau mutate în afara ecranului, dar încă lizibile și focalizabile.
Navigare stilizată ca tab-uri cu role="tab", în timp ce fiecare „tab” încarcă o pagină nouă.
Tab-ul de recenzii încărcat prin script și activare automată care trimite o cerere la fiecare apăsare a unei taste săgeată.
Tab-ul selectat indicat doar printr-o culoare ușor diferită.

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

Automat (regulă axe-core)	Ce găsește
`aria-required-parent`	`role="tab"` care nu se află într-un `tablist`
`aria-required-children`	`role="tablist"` fără copii `tab`
`aria-valid-attr-value`	`aria-controls`/`aria-labelledby` care indică ID-uri inexistente; `aria-selected` invalid
`aria-allowed-attr`	Atribute care nu sunt permise pe `tab` sau `tabpanel`
`button-name`, `aria-command-name`	Tab-uri fără nume, de exemplu tab-uri doar cu pictogramă
`duplicate-id-aria`	ID-uri duplicate folosite de referințele ARIA
`scrollable-region-focusable`	Panouri derulabile la care utilizatorii de tastatură nu pot ajunge

Toate sunt fișe în biblioteca noastră de reguli. Testarea manuală: intrați cu Tab în lista de tab-uri, folosiți tastele săgeată, Home și End, verificați că un singur tab se află în secvența Tab, că panoul se schimbă și că un cititor de ecran anunță rolul, poziția și starea selectată. Verificați indicatorul vizual cu verificatorul de contrast.

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

Întrebări frecvente

De ce roluri ARIA au nevoie tab-urile accesibile?

Un container cu role="tablist" și o etichetă, elemente cu role="tab" în interiorul lui, fiecare cu aria-selected și aria-controls, și panouri cu role="tabpanel" etichetate de tab-ul lor.

Cum trec utilizatorii de tastatură de la un tab la altul?

Tab intră în lista de tab-uri, pe tab-ul activ; Săgeată stânga și dreapta mută între tab-uri, reluând de la capăt la margini; Home și End sunt opționale; Tab din nou trece la panou. Un singur tab se află în secvența Tab.

Trebuie un tab să se activeze la focus sau la Enter?

APG recomandă ca tab-urile să se activeze automat când primesc focusul, atâta timp cât panoul apare fără o întârziere observabilă. Dacă panoul trebuie mai întâi încărcat, folosiți activarea manuală cu Enter sau Space.

Sunt mai bune tab-urile sau un acordeon pe o pagină de produs pe mobil?

Ambele pot fi accesibile. Tab-urile au nevoie de spațiu pe orizontală și de modelul complet de tastatură; un acordeon din butoane disclosure este mai simplu și funcționează bine pe ecrane înguste. Multe magazine folosesc tab-uri pe desktop și un acordeon pe mobil.

Poate o verificare automată să testeze tab-urile?

Găsește roluri tab în afara unui tablist, tablist-uri fără tab-uri, aria-controls care indică ID-uri inexistente și valori aria-selected invalide. Nu poate verifica tastele săgeată sau dacă aria-selected se schimbă când este ales alt tab.

Surse

W3C WAI, APG Tabs pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
W3C WAI, APG Developing a Keyboard Interface (roving tabindex): https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/