Cerință WCAG A/AA Prioritate: Grav

Unele secțiuni extensibile nu au nume

Antetul pe care se dă clic al unei secțiuni extensibile (un element <summary>) nu are text care poate fi citit, de exemplu un acordeon cu detalii de produs, un grup de filtre, o întrebare din FAQ sau un meniu deschis printr-o pictogramă.

Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.

De ce contează pentru clienții tăi

Utilizatorii de cititoare de ecran aud doar că ceva se poate extinde, nu și ce anume. Pot să nu găsească meniul mobil, filtrele sau informațiile despre livrare și mărimi.

Pe cine afectează

clienții nevăzători
utilizatorii de cititoare de ecran
utilizatorii de control vocal

Cum se remediază

Oferiți fiecărui <summary> un text vizibil care descrie secțiunea, de exemplu „Livrare și retur” sau „Meniu”. Dacă summary conține doar o pictogramă, adăugați-i un aria-label sau un text ascuns vizual și marcați pictograma ca decorativă cu aria-hidden="true".

În Shopify

Frecvent: multe teme actuale folosesc <details> și <summary> pentru meniul mobil, căutare, filtre și acordeoanele de produs. Verificați fișierele Liquid ale antetului și secțiunii de produs pentru elemente summary care conțin doar o pictogramă și asigurați-vă că fiecare bloc de acordeon are un titlu completat.

În Shoptet (CZ)

Poate apărea în șabloane sau în HTML propriu cu secțiuni extensibile. Verificați dacă o versiune mai nouă a șablonului rezolvă problema; altfel, cereți Shoptet sau unui partener Shoptet să adauge etichete.

În PrestaShop

Apare când tema sau modulele folosesc <details> pentru meniuri, filtre sau taburi de produs. Adăugați text sau aria-label la <summary> în șabloanele .tpl ale temei ori în șabloanele de module suprascrise.

În WooCommerce

Mai rar; apare în teme, blocuri FAQ sau acordeon și widgeturi de page builder care folosesc <details>. Completați titlul blocului sau adăugați aria-label în șablonul temei copil; raportați problemele pluginului autorului acestuia.

Standarde

Standarde
Standard	Punct
WCAG 2.2	4.1.2 (A) Name, Role, Value
WCAG 2.1	4.1.2 (A) Name, Role, Value
WCAG 2.0	4.1.2 (A) Name, Role, Value
EN 301 549 4.1.1	9.4.1.2
EN 301 549 3.2.1	9.4.1.2
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.4.1.2

Verificare automată: regula axe-core summary-name. dequeuniversity.com, github.com, www.w3.org

Întreaga pagină este ascunsă de cititoarele de ecran
WCAG 1.3.1 A
Atributele de accesibilitate sunt folosite în situația greșită
WCAG 4.1.2 A
Câmpurile din formulare nu au etichetă
WCAG 4.1.2 A
Unele bare de progres nu au nume
WCAG 1.1.1 A

Toate regulile pe care le verificăm