Cerință WCAG A/AA Prioritate: Grav
Elementele ascunse pot fi totuși accesate cu tastatura
Unele părți ale paginii sunt ascunse pentru cititoarele de ecran, dar primesc totuși focusul tastaturii.
Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.
De ce contează pentru clienții tăi
Cei care folosesc tastatura ajung pe linkuri invizibile, iar utilizatorii de cititoare de ecran ajung pe elemente mute sau fără nume. În meniurile sau ferestrele pop-up închise, acest lucru face navigarea în magazin confuză.
Pe cine afectează
- utilizatorii de cititoare de ecran
- utilizatorii care navighează cu tastatura
- clienții nevăzători
Cum se remediază
Nu plasați elemente care pot primi focus în interiorul aria-hidden="true". Când ascundeți un meniu sau un dialog, ascundeți-l și de focus: folosiți atributul hidden, display:none, inert sau tabindex="-1" pe controalele sale.
În Shopify
De obicei, meniuri laterale (off-canvas), sertare (drawer), pop-up-uri sau carusele din temă ori din aplicații. Corectați logica de ascundere în JavaScript-ul sau Liquid-ul temei; raportați widgeturile aplicațiilor dezvoltatorului.
În Shoptet (CZ)
De obicei, meniuri, carusele sau pop-up-uri din șablon. Raportați problema echipei Shoptet sau unui partener Shoptet.
În PrestaShop
De obicei, meniuri mobile, carusele sau module de ferestre modale. Corectați în șabloanele și JavaScript-ul temei sau raportați problema dezvoltatorului modulului.
În WooCommerce
De obicei, meniuri mobile, slidere, pluginuri de pop-up sau de cookie-uri. Corectați în codul temei 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 aria-hidden-focus.
dequeuniversity.com, github.com, www.w3.org
Verificări similare
-
Unele grafice vectoriale nu au descriere text
WCAG 1.1.1 A
-
Conținutul încorporat nu are nume
WCAG 4.1.2 A
-
O listă este construită greșit
WCAG 1.3.1 A
-
Câmpurile din formulare nu se completează automat
WCAG 1.3.5 AA