Doporučený postup Priorita: Střední
Vyskakovací okno nemá název
Dialogové okno, například vysouvací košík, cookie lišta, nabídka newsletteru nebo rychlý náhled produktu, má role="dialog" nebo role="alertdialog", ale nemá přístupný název. Jde o doporučený postup, sám o sobě nikoli o požadavek WCAG úrovně AA.
Tento text byl přeložen automaticky a rodilý mluvčí ho zatím nezkontroloval.
Proč na tom záleží vašim zákazníkům
Když se okno otevře, čtečka obrazovky řekne jen „dialog“ a neprozradí, o co jde. Zákazníci ho musí prozkoumat, aby zjistili, zda jde o košík, slevovou nabídku nebo dotaz na cookies. To mate v důležitých chvílích, například po vložení zboží do košíku.
Koho se to týká
- uživatelé čteček obrazovky
- nevidomí a slabozrací zákazníci
Jak to opravit
Dejte název každému prvku s role="dialog" nebo role="alertdialog": odkažte v aria-labelledby na viditelný nadpis okna, nebo doplňte aria-label, například aria-label="Košík". Zároveň při otevření přesuňte fokus do okna a při zavření ho vraťte na tlačítko, které okno otevřelo.
V Shopify
Obvykle pochází z vysouvacího košíku, vyhledávání, rychlého náhledu nebo aplikací s vyskakovacími okny. Doplňte aria-labelledby nebo aria-label v příslušné sekci nebo snippetu Liquid; u oken aplikací se obraťte na vývojáře aplikace.
V Shoptet (CZ)
Obvykle pochází z vyskakovacích oken šablony nebo skriptů třetích stran, jako jsou cookie lišty nebo chat. Opravte svůj vlastní kód; u prvků šablony to nahlaste Shoptetu nebo partnerovi.
V PrestaShop
Obvykle pochází z modálních oken šablony (potvrzení vložení do košíku, rychlý náhled) nebo z modulů. Doplňte aria-labelledby do kódu okna v šablonách .tpl, nejlépe přes override.
V WooCommerce
Obvykle pochází z pluginů pro souhlas s cookies, vyskakovací okna, mini košík nebo rychlý náhled. Hledejte v nastavení pluginu volbu přístupnosti, doplňte název v šabloně podřízeného tématu nebo se obraťte na autora pluginu.
Normy
Nejde o kritérium WCAG, ale o doporučený postup, který usnadní používání webu.
Automatická kontrola: pravidlo axe-core aria-dialog-name.
dequeuniversity.com, github.com, www.w3.org