Začalo to v naší supportní frontě. Obchodníci si začali na své e-shopy pouštět skenery přístupnosti a některé reporty, které nám dorazily, ukazovaly na kód Candy Racku, ne na jejich šablonu: obrázky, které vkládáme bez alternativního textu, úroveň nadpisu, kterou přeskakujeme, prvky, u kterých skener pozná, že nemají popisek. Oprávněně. V červenci jsme se pořádně podívali na všechny tři naše obrazovky v e-shopu a to, co jsme tam našli, bylo nakonec zajímavější než výstup skeneru, který nás k tomu přiměl.
Obchodníci si tyhle skeny nepouštějí ze zvědavosti. Tlak za nimi je reálný a měřitelný. V roce 2025 bylo u amerických federálních soudů podáno 3 117 žalob týkajících se přístupnosti webů, o 27 % víc než 2 452 v roce 2024, a podíl případů webové přístupnosti na všech federálních žalobách podle Title III zákona ADA stoupl z 28 % na 36 %. Když se připočtou i státní soudy, výroční report UsableNetu odhaduje celkový počet za rok 2025 na zhruba 5 100 případů, z nichž asi 70 % míří na e-commerce. V EU platí Evropský akt o přístupnosti od 28. června 2025 prostřednictvím transpozičních zákonů jednotlivých členských států a 4. června 2026 soud v Caen rozhodl proti společnosti Carrefour France na základě francouzské transpozice.
A tady je ta mezera. Obvyklá rada pro obchodníka, který se tím začíná zabývat, má dva body: vyberte si dobře hodnocenou šablonu a nainstalujte widget, který přidá lištu přístupnosti. Ani jedno se nedostane k aplikacím třetích stran na stránce. Šablona vykreslí stránku a vaše aplikace na ni nasazují vlastní kód, často jako modální okno, které se otevře přes všechno ostatní. Audit šablony se dovnitř toho okna nepodívá, lišta ho neopraví, skener zachytí jen povrch toho, co je uvnitř špatně, a ještě nedávno bychom vám s jistotou neřekli, co je uvnitř toho našeho.
Jak konkrétně vypadá, když aplikace rozbíjí přístupnost
Není to abstraktní a není to hlavně o alternativním textu. Devět vzorců pokrývá to, co jsme našli na vlastních obrazovkách, plus to, co bych kontroloval v aplikaci kohokoli jiného. Většina odpovídá konkrétnímu kritériu WCAG, a kde ne, je to uvedeno.
| Co hledat | Kde se to objevuje | Kritérium WCAG | Kdo to může opravit |
|---|---|---|---|
| Modální okno se otevře bez role dialog, bez přístupného jména, bez podržení fokusu a bez klávesy Escape | Upsell pop-upy, košíkové zásuvky, ověření věku, newsletterové pop-upy | 4.1.2, 2.4.3 a 2.1.2, pokud fokus uvízne bez možnosti úniku. Zavírání klávesou Escape vychází z ARIA Authoring Practices, ne z číslovaného kritéria | Pouze dodavatel aplikace |
| Obrys fokusu je potlačený a nic viditelného ho nenahrazuje | Jakýkoli prvek, který si aplikace nastyluje | 2.4.7 | Pouze dodavatel aplikace |
Prvky mají tabindex="-1", i když jsou vidět na obrazovce | Pole pro slevový kód, rozbalovací panely | 2.1.1 | Pouze dodavatel aplikace |
| Tlačítka jen s ikonou se ohlásí pouze jako „tlačítko“ | Křížek pro zavření, tlačítka množství, tlačítka odebrání | 4.1.2, 1.1.1 | Pouze dodavatel aplikace |
Klikatelný prvek je obyčejný div bez role a bez zastavení tabulátorem | Náhledy produktů, karty nabídek | 2.1.1, 4.1.2 | Pouze dodavatel aplikace |
| Alternativní text obrázků chybí, nebo je u všech stejně obecný | Náhledy produktů v nabídkách | 1.1.1 | Pouze dodavatel aplikace |
| Celková cena košíku, počet položek nebo postup k odměně se aktualizují potichu | Košíkové zásuvky, lišty dopravy zdarma | 4.1.3 | Pouze dodavatel aplikace |
| Vložený blok přeskakuje úrovně nadpisů | Jakýkoli blok aplikace s vlastním nadpisem | Běžně se hlásí pod 1.3.1 | Pouze dodavatel aplikace |
| Kontrast textu pod 4,5:1, nebo pod 3:1 u velkého písma (18 pt, nebo 14 pt tučně) | Jakákoli barva, kterou jste zvolili v nastavení aplikace | 1.4.3 | Vy, v nastavení aplikace |
Přečtěte si poslední sloupec. Osm z devíti řádků jsou věci, které obchodník neopraví za žádnou cenu, ať má nainstalovaný jakýkoli widget. Právě proto je výběr aplikace rozhodnutím o přístupnosti, ne jen o funkcích.
Co jsme našli ve vlastní aplikaci
Tři obrazovky, které jsme prověřili podle WCAG 2.1 a 2.2 na úrovni AA, byly upsell pop-up na stránce produktu, košíkový pop-up zobrazený cestou k platbě a košíková zásuvka. Tentokrát žádné skóre ze skeneru, ale kontrola vykresleného kódu, prvek po prvku.
Výsledky byly nevyrovnané způsobem, který je podle mě typický. Výchozí stav košíkové zásuvky byl lepší, než jsem čekal: prvky pro zavření a odebrání byly skutečná tlačítka, každý obrázek produktu už měl popisný alternativní text a tlačítko pro přechod k platbě už mělo přístupné jméno. Podstata byla v modálních oknech a stejná hrstka problémů se opakovala na všech třech obrazovkách, což se ukázalo jako ta užitečná část. Opakování znamená jednu společnou opravu místo tří.
Dva nejzávažnější body nebyly ty, které hlásily skenery. Prvním byl potlačený styl fokusu, což je horší, než to zní: rozbíjí ovládání klávesnicí u všech prvků, které ho dědí, ne jen u toho, pro který byl napsaný. Druhým byla skupina prvků, které zůstávaly mimo pořadí tabulátoru, i když byly vidět na obrazovce. To nenápadně promění fungující funkci ve funkci jen pro myš. Kdo se pohybuje klávesnicí, nedostane ořezanou verzi té funkce. Nedostane žádnou. Opravu jsme rozdělili do tří ticketů, jeden na každou obrazovku, a koncem července je uzavřeli.
Proč netvrdíme, že jsme v souladu
Jednu věc jsme záměrně neuzavřeli. Všechny barvy Candy Racku na straně e-shopu si můžete upravit sami a my kontrast nastavených hodnot neověřujeme. V auditovaném e-shopu každá nastavená barva prošla, ale nic nebrání obchodníkovi, aby si bez jakéhokoli varování nastavil porušení kritéria 1.4.3. Přidání kontroly kontrastu do nastavení máme na seznamu. Než to bude hotové, a ostatně ani potom, vám nebudeme říkat, že aplikace zajistí vašemu e-shopu soulad.
Nic z toho nedělá z lišty přístupnosti zbytečnost. Dává návštěvníkům kontrolu nad tím, jak se váš e-shop zobrazí, a vám dává monitoring, a právě proto si jedna z nich zaslouží místo v našem přehledu nejlepších Shopify aplikací pro compliance, vedle souhlasu s cookies, GPSR, fakturace a obchodních podmínek. Jen to není skutečná oprava a do modálního okna jiné aplikace se nedostane o nic víc než vy. Soulad je vlastností celého e-shopu v daný den a žádný jednotlivý dodavatel není v pozici, aby ho potvrdil. Co vám dodavatel říct může, je co prověřil, co změnil a co zůstává otevřené.
Jak si zkontrolovat aplikace ve svém e-shopu
Užitečný průchod zvládnete sami asi za deset minut a skener k tomu nepotřebujete. Většina toho, na čem tady záleží, je pro automatické nástroje neviditelná. Chybějící atributy alt a slabý kontrast najdou dobře, ale na pasti fokusu, pořadí tabulátoru a ohlašování změn jsou slepé. Všechny reporty ze skenů, které tohle odstartovaly, spadaly do první kategorie. Ani jeden neukázal na dva problémy, které lidi opravdu nechaly přede dveřmi.
- Odsuňte myš od klávesnice a nechte ji tam.
- Projěte si stránku produktu tabulátorem a sledujte rámeček fokusu. Pokud někde zmizí, stačilo. Blokátor už jste našli.
- Vyvolejte každou obrazovku, kterou mají na starosti vaše aplikace: přidání do košíku, otevření košíkové zásuvky, přechod k platbě, a počkejte i na pop-upy, které nabíhají se zpožděním.
- U každé ověřte čtyři věci. Dostanete se dovnitř tabulátorem? Zůstává fokus uvnitř místo toho, aby utekl na stránku za ní? Zavře ji klávesa Escape? Vrátí se fokus na prvek, kterým jste ji otevřeli?
- Ovládejte každý prvek jen klávesnicí, včetně tlačítek množství, výběru variant, polí pro slevový kód a tlačítek odebrání. Cokoli, na co dosáhnete myší, ale ne klávesnicí, je porušení kritéria 2.1.1.
- Zapněte VoiceOver (na Macu Cmd+F5) nebo NVDA a poslechněte si, jak se ohlásí tlačítko zavření a obrázky produktů. „Tlačítko“ i „Produkt“ jsou obojí porušení.
- Změňte množství a poslechněte si, jestli se ohlásí nová celková cena. Pokud aktualizace nikdy nedostane fokus a nic se neohlásí, je to porušení kritéria 4.1.3.
Všechno, co najdete v krocích 3 až 7, patří dodavateli aplikace. Čímž se dostáváme k poslední části.
Čtyři otázky, které stojí za to položit dodavateli
Zeptejte se před instalací a vyhýbavá odpověď je také odpověď.
- Prověřili jste rozhraní své aplikace na straně e-shopu podle WCAG 2.1 nebo 2.2 na úrovni AA, a kdy?
- Mají vaše modální okna sémantiku dialogu a správu fokusu, tedy roli, přístupné jméno, podržení fokusu, Escape a návrat fokusu?
- Dá se každá funkce vaší aplikace dokončit jen klávesnicí?
- A co zůstává otevřené?
Čtvrtá otázka řekne nejvíc. Dodavatel, který má opravdovou odpověď, ji mít bude, protože každý má něco otevřeného. Můj výklad je, že „jsme plně v souladu“ obvykle znamená, že se nikdo nedíval. A vyplatí se připomenout, o co ve věci FTC proti accessiBe vlastně šlo: ne o slovo v souladu, ale o tvrzení o souladu, které firma nedokázala doložit.
V praxi si žalobci a regulátoři chodí pro obchodníka, který e-shop provozuje, ne pro dodavatele jeho jednotlivých dílů. Je to nepříjemné, protože slušná část toho, co se dostane k vašim zákazníkům, je kód, který jste nepsali a nemůžete ho upravit. Co ovlivníte, je výběr dodavatelů a to, co po nich chcete. Pokud právě porovnáváte aplikace a chcete stejný pohled zaměřený na konverzi místo compliance, tuhle stránku pokrývá náš průvodce upsell strategií a průvodce optimalizací pokladny. Pokud prodáváte do EU, povinné tlačítko pro odstoupení i další evropská omezení, o kterých jsme psali, přicházejí ve stejném období jako Evropský akt o přístupnosti.
Opravy z tohohle auditu jsme vydali koncem července a jsou živé v Candy Racku, včetně košíkové zásuvky a lišty odměn. Pokud najdete něco, co nám uniklo, dejte nám vědět. Opravíme to místo toho, abychom se dohadovali o závažnosti.
Tento článek popisuje náš vlastní audit a je obecnou informací, ne právním poradenstvím. K vašim povinnostem podle ADA, Evropského aktu o přístupnosti nebo národních transpozičních zákonů se obraťte na advokáta.
