Cerință WCAG A/AA Prioritate: Grav
Utilizatorii de tastatură nu pot ajunge la conținutul încorporat
Un cadru încorporat (iframe) conține linkuri, butoane sau câmpuri de formular, dar cadrul are tabindex="-1", ceea ce îl scoate din ordinea de navigare cu tastatura.
Acest text a fost tradus automat și nu a fost încă verificat de un vorbitor nativ.
De ce contează pentru clienții tăi
Persoanele care navighează cu tasta Tab sar peste întregul cadru. Dacă acesta conține un formular de plată cu cardul, o hartă de livrare, un calendar de rezervări sau un chat, nu le pot folosi deloc și s-ar putea să nu poată finaliza comanda.
Pe cine afectează
- persoanele care folosesc doar tastatura
- persoanele cu dizabilități motorii
- utilizatorii de cititoare de ecran
Cum se remediază
Eliminați tabindex="-1" de pe orice <iframe> sau <frame> care conține conținut interactiv, astfel încât focusul tastaturii să poată intra în el. Dacă cadrul este pur decorativ sau duplicat, ascundeți-l corect (de exemplu cu aria-hidden și fără conținut focalizabil în interior). Pentru încorporări terțe, verificați codul de încorporare sau întrebați furnizorul.
În Shopify
De obicei codul de încorporare sau o aplicație care adaugă tabindex="-1" pe iframe-ul său (video, recenzii, chat, plată). Eliminați-l din propriul cod de încorporare; iframe-urile aplicațiilor trebuie corectate de dezvoltatorul aplicației.
În Shoptet (CZ)
De obicei coduri de încorporare sau widgeturi adăugate prin cod propriu. Eliminați tabindex="-1" din codul de încorporare; furnizorii de widgeturi ar putea fi nevoiți să-și corecteze propriile cadre.
În PrestaShop
De obicei module care încorporează video, hărți sau formulare de plată într-un iframe. Eliminați tabindex="-1" din șabloanele .tpl ale modulului sau temei; raportați modulele terțe dezvoltatorului lor.
În WooCommerce
De obicei page buildere, slidere sau pluginuri (video, hărți, plăți, chat) care adaugă tabindex="-1" unui iframe. Verificați setările widgetului sau ale pluginului și raportați problema autorului pluginului.
Standarde
| Standard | Punct |
|---|---|
| WCAG 2.2 | 2.1.1 (A) Keyboard |
| WCAG 2.1 | 2.1.1 (A) Keyboard |
| WCAG 2.0 | 2.1.1 (A) Keyboard |
| EN 301 549 4.1.1 | 9.2.1.1 |
| EN 301 549 3.2.1 | 9.2.1.1 |
| Section 508 2017 | E205.4 |
| ДСТУ EN 301 549 2022 | 9.2.1.1 |
Verificare automată: regula axe-core frame-focusable-content.
dequeuniversity.com, github.com, www.w3.org
Verificări similare
-
Vizitatorii nu pot mări pagina pe mobil
WCAG 1.4.4 AA
-
Videoclipurile nu au subtitrări
WCAG 1.2.2 A
-
O denumire sau o valoare se află în afara listei sale
WCAG 1.3.1 A
-
Unele butoane nu au nume
WCAG 4.1.2 A