Přístupnost slev (a11y): jak zpřístupnit informace čtečkám obrazovky

Proč jsou informace o slevách pro čtečky obrazovky klíčové

Slevy a promo akce jsou v e-commerce silným konverzním signálem. Pokud však slevu komunikuje pouze vizuální design (barva, přeškrtnutí, odznak v rohu), uživatelé se zrakovým postižením nedostanou rovnocennou informaci. Cílem přístupného návrhu je, aby každá klíčová informace o ceně a úspoře byla srozumitelná i při předčítání hlasem, bez vizuálního kontextu, pouze pomocí klávesnice a při různých jazykových či číselných nastaveních.

Jaké informace musí čtečka obrazovky spolehlivě přečíst

Aktuální cena (včetně měny a informace o DPH u B2C).
Původní cena (pokud je sleva vázána na referenční cenu) a jasný vztah mezi cenami.
Výše slevy – absolutní (v €) i procentuální (pokud se uvádí).
Podmínky slevy – minimální hodnota košíku, vyloučené kategorie, datum/čas expirace.
Jednotková cena – €/kg, €/l, €/m² pro možnost srovnání.
Stav dostupnosti – „skladem“, „předobjednávka“, „do 3 dnů“, aby uživatel mohl vyhodnotit poměr mezi hodnotou slevy a dostupností.

Sémantika nad stylem: jak správně označovat ceny

Používejte textové uzly pro ceny, nikoli obrázky s textem. Čísla a měna musí být v DOM jako čitelný text.
Původní cenu neoznačujte pouze vizuálním přeškrtnutím. Přidejte také textové označení, např. „Původní cena:“ před hodnotu.
Vyhněte se vnořené interpunkci a dekorativním symbolům mezi čísly (např. ozdobným pomlčkám nebo emoji), které mohou narušovat předčítání.
Seskupte související údaje (původní cena, nová cena, úspora) do jednoho logického bloku s nadpisem, aby uživatel pochopil jejich vztahy bez vizuálních vodítek.

ARIA a struktura: když je třeba, ale s mírou

role=“text“ může čtečce pomoci přečíst obsah ve správném pořadí, pokud jsou ceny rozděleny do několika vložených prvků.
aria-label používejte pouze tehdy, když vizuální text není dostatečně popisný. Vyhněte se duplikování, které vede k „dvojímu“ předčítání.
aria-live=“polite“ na kontejnerech, ve kterých se cena mění při uplatnění kupónu nebo změně varianty. Nepřehánějte to – oznamujte pouze skutečně nové informace (novou cenu, změnu procentní slevy).
aria-hidden=“true“ u čistě dekorativních ikon (např. ikony procent, odznaku), aby nebyly předčítány jako šum.

Srozumitelná věta pro čtečku: „co, kolik, z čeho a do kdy“

Seskupená, snadno pochopitelná věta je pro uživatele čtečky rychlejší než tři nesouvisející čísla. Snažte se, aby blok se slevou nabídl větu typu:

„Cena po slevě 799 eur. Původní cena 999 eur. Ušetříte 200 eur, což je 20 procent. Sleva platí do 30. října.“

Vizuálně můžete čísla zobrazit výrazně a po řádcích; pro čtečku zajistěte, aby byla dostupná i takováto souvislá slovní formulace.

Procenta vs. absolutní úspora: čitelnost a spravedlivé pořadí

Upřednostněte aktuální cenu jako první informaci, teprve potom uveďte původní cenu a úsporu. Při rychlé navigaci čtečky často oznámí pouze první dva údaje.
U procent používejte celá slova („procent“) – někdy čtečky čtou „znak procenta“ matoucím způsobem.
U velmi nízkých cen oznamte úsporu také v eurech, jinak procenta působí velkolepě, ale uživatel nedokáže vyhodnotit skutečnou hodnotu.

Expirace, odpočty a dynamické slevy bez toxicity

Časovače neoznamujte v sekundových intervalech. Čtečkám stačí klíčové změny (např. každou minutu), případně sdělení „Sleva končí dnes ve 23:59“ bez živého odpočtu.
Pokud se sleva průběžně mění (flash sale), oznamujte prostřednictvím aria-live=“polite“ pouze změnu ceny nebo procentní slevy.
Nepoužívejte agresivní roli alert, která přerušuje předčítání. Vyhraďte ji pro chyby nebo kritické stavy (např. nedostupnou položku).

Jednotkové ceny a přístupné srovnání

U zboží s hmotností/objemem vždy nabídněte také jednotkovou cenu a slevu na tuto jednotku (např. „jednotková cena po slevě 4 eura 50 centů za litr“).
V košíku zachovejte konzistentní terminologii mezi PDP (detailním zobrazením produktu) a souhrnem objednávky, aby čtečka neoznamovala pro stejné věci různá slovní spojení.

Fokus, pořadí a ovládání klávesnicí

Umístěte blok s cenou a slevou před sekundární informace. Při rychlé navigaci klávesou Tab by měl uživatel zjistit cenu v prvních krocích.
Zajistěte logické pořadí v DOM. Zobrazení mřížky nesmí vytvářet jiné pořadí předčítání, než je pořadí v kódu.
Pokud je sleva dostupná přes tooltip nebo ikonu „i“, musí ji být možné ovládat klávesnicí (Enter/Space), včetně zachycení a navrácení fokusu a použití role=“dialog“ nebo role=“tooltip“ a aria-describedby.

Barvy, kontrast a zvláštní stavy

Nespoléhejte na barvu (červenou) jako na jediný indikátor slevy. Čtečky barvu nepřečtou; poskytněte text „Sleva“ nebo „Nová cena“.
Odznak „-20 %“ musí mít dostatečný kontrast a textový alternativní popis (např. skrytý text „Sleva 20 procent“), jinak je pouze dekorací pro vidící uživatele.
Při chybových stavech kupónů (neplatný, prošlý) oznamujte chybu v prvku s role=“alert“ a jasným textem, nikoli pouze barvou okraje pole.

Lokalizace, měna a formát čísel

Dodržujte místní formáty (pevná mezera mezi číslem a měnou, desetinná čárka „1 299,00 €“). Ne všechny čtečky však čtou mezery stejně – testujte.
U jazykově smíšených stránek nastavte lang pro jednotlivé úseky textu (např. anglický název kupónu), aby čtečka přepínala na vhodný hlas.
Procenta čtěte slovně – „20 procent“, nikoli „20 znak procenta“; pokud spoléháte na symbol, ověřte jeho výslovnost v používaných čtečkách.

Alternativy k přeškrtnutí: bezpečné vzory

„Původní cena: 999 €“ a „Nyní: 799 €“ – raději než „~~999 €~~ 799 €“ bez kontextu.
Pro zachování vizuálního stylu můžete ponechat del, ale doplňte slovní označení před hodnotou, aby čtečka rozlišila její význam.
Skryté vysvětlující texty (viz třídy typu sr-only) používejte jako doplněk, nikoli jako náhradu skutečného textu na obrazovce.

Podmínky promo akce: stručné, čitelné, přístupné

Podmínky zobrazte v místě rozhodování (u ceny nebo CTA), nikoli pouze v zápatí. Odkaz jasně pojmenujte (např. „Podmínky slevy“), nikoli „Více informací“.
Strukturovejte obsah pomocí nadpisů (H2/H3) a seznamů, aby čtečka mohla efektivně přeskakovat mezi jednotlivými body.
Vyhněte se modálním oknům bez správných rolí a správy fokusu. Pokud použijete modal, musí mít role=“dialog“, aria-modal=“true“ a smysluplný nadpis.

Uplatnění kupónu a okamžitá zpětná vazba

Po uplatnění kupónu oznamte výsledek v oblasti s aria-live=“polite“ jasnou větou: „Kupón VIANOCE byl uplatněn. Sleva 10 procent. Nová cena 71 eur 90 centů.“
Chyby oznamujte prostřednictvím role=“alert“ a propojte je s polem pro kupón (např. pomocí aria-describedby), aby čtečka po zaměření pole přečetla chybové hlášení.

Marketplace a srovnávání nabídek

U více prodejců seskupte ceny a slevy do opakujících se bloků se stejnou strukturou a nadpisem prodejce, aby byla navigace přehledná.
Označte aktuálně zvolenou nabídku (např. „vybráno“) přístupným stavem, nikoli pouze barvou.

Testování se skutečnými čtečkami a uživateli

Minimální sestava: NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari (počítač i mobil).
Otestujte navigaci pouze klávesnicí (Tab, Shift+Tab, Enter, Space, šipky) a ověřte, zda jsou všechny stavy (sleva, chyba kupónu, změna varianty) srozumitelně oznamovány.
Ověřte výslovnost čísel, měn a procent při různých jazycích systému a regionálních nastaveních.

Čemu se vyhnout: přehled nejčastějších chyb

Pouze vizuální sleva (červené číslo, přeškrtnutí) bez slovního označení.
Duplicitní předčítání údajů kvůli přehnanému používání aria-label vedle viditelného textu.
„Živé“ odpočty, které každou sekundu přerušují předčítání, nebo použití role alert při každé změně.
Nejednotné formáty (jednou „20%“, podruhé „−20 %“ a jindy „- 20 procent“) v rámci jedné stránky.
Podmínky dostupné pouze v modálním okně bez správných rolí a bez zachycení/navrácení fokusu.

Kontrolní seznam přístupné slevy pro produktový a UX tým

Blok s cenou oznamuje aktuální cenu, původní cenu, úsporu a případně expiraci v souvislé větě.
Při dynamických změnách (kupón, varianta) se prostřednictvím aria-live=“polite“ mění pouze to, co je potřeba.
Jednotková cena je uvedena a srozumitelná i pro čtečku.
Procenta a měna jsou vyslovovány srozumitelně a konzistentně.
Chyby při zadávání kupónů se oznamují pomocí alert a jsou propojené s polem.
Vše funguje pouze pomocí klávesnice a ve třech hlavních kombinacích čteček.

Přístupná sleva je férová sleva

Přístupnost informací o slevách není „nice to have“. Je nedílnou součástí férové komunikace ceny, která snižuje počet sporů, zlepšuje konverzi a buduje důvěru. Pokud zapracujete sémantiku, přiměřené použití ARIA, souvislé slovní formulace a zodpovědné oznamování dynamických změn, budou vaše slevy srozumitelné pro všechny – nejen pro ty, kteří je vidí.