Cerință WCAG A/AA Prioritate: Grav
Elemente pe care se poate da clic sunt incluse unele în altele
Unele elemente pe care se poate da clic se află în interiorul altor astfel de elemente, de exemplu un buton de wishlist într-un card de produs care este el însuși un link.
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 și cei care folosesc tastatura pot să nu ajungă la controlul interior sau să nu îl poată deosebi, așa că pot rata acțiunile de adăugare rapidă sau de wishlist ori pot deschide altceva decât doreau.
Pe cine afectează
- utilizatorii de cititoare de ecran
- utilizatorii care navighează cu tastatura
- utilizatorii de control vocal
Cum se remediază
Nu puneți linkuri, butoane sau câmpuri în interiorul altui link sau buton ori într-un element cu role="button" sau similar. Faceți ca linkul principal al cardului și butoanele lui să fie elemente surori (siblings); la nevoie, extindeți zona de clic a linkului principal cu CSS.
În Shopify
De obicei, carduri de produs cu butoane de adăugare rapidă sau de wishlist din temă sau din aplicații. Restructurați cardul în snippet-ul Liquid al temei; raportați butoanele aplicațiilor dezvoltatorului.
În Shoptet (CZ)
De obicei, cardurile de produs din șablon. Raportați problema echipei Shoptet sau unui partener Shoptet.
În PrestaShop
De obicei, șabloanele de miniatură a produsului cu butoane de previzualizare rapidă sau de wishlist. Restructurați șablonul .tpl de miniatură a produsului din temă.
În WooCommerce
De obicei, listările de produse din temă, din page buildere sau din pluginuri de wishlist. Restructurați șablonul într-o temă copil sau raportați problema autorului pluginului.
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 nested-interactive.
dequeuniversity.com, github.com, www.w3.org
Verificări similare
-
Pagina declară două limbi diferite
WCAG 3.1.1 A
-
Atributele de accesibilitate au valori greșite
WCAG 4.1.2 A
-
Titlul unui tabel este scris într-o celulă a tabelului
WCAG 1.3.1 A
-
Elemente pe care se poate da clic sunt incluse unele în altele
WCAG 4.1.2 A