Proč jsou slevové informace pro čtečky obrazovky klíčové
Slevy a promoakce jsou v e-commerce silným konverzním signálem. Pokud je však sleva komunikována pouze vizuálním designem (barva, přeškrtnutí, štítek 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 čtení 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 Kč, €) i procentuální (pokud je uváděna).
- Podmínky slevy – minimální hodnota košíku, vyřazené kategorie, datum/čas expirace.
- Jednotková cena – Kč/kg, Kč/l, Kč/m2 pro porovnatelnost.
- Stav dostupnosti – „skladem“, „předobjednávka“, „do 3 dnů“, aby uživatel věděl vyhodnotit hodnotu slevy vs. dostupnost.
Semantika nad stylem: jak správně označit ceny
- Používejte textové uzly pro ceny, ne 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 i textovou identifikaci, např. „Původní cena:“ před hodnotu.
- Vyhněte se vnořené interpunkci a dekorativním symbolům mezi čísly (např. ozdobné pomlčky nebo emoji), které mohou rušit čtení.
- Seskupte související údaje (původní cena, nová cena, úspora) do jednoho logického bloku s nadpisem, aby uživatel pochopil vztahy bez vizuálních indicií.
ARIA a struktura: když je třeba, ale s mírou
- role=“text“ může pomoci čtečce přečíst obsah ve správném pořadí, pokud jsou ceny rozděleny do více inline prvků.
- aria-label používejte pouze pokud vizuální text není dostatečně popisný. Vyhněte se duplikacím, které vedou k „dvojímu“ čtení.
- aria-live=“polite“ na kontejnery, kde se mění cena při aplikaci kupónu nebo změnách varianty. Nepřehánějte – oznamujte pouze skutečně nové informace (nová cena, změna procenta).
- aria-hidden=“true“ na čistě dekorativní ikony (např. ikona procenta, odznak), aby se nečetly jako šum.
Jasná věta pro čtečku: „co, kolik, z čeho a dokdy“
Seskupená, snadno pochopitelná věta je pro uživatele s čtečkou rychlejší než tři nesouvisející čísla. Snažte se, aby blok se slevou uměl přečíst 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 do řádků; pro čtečku zajistěte, aby byla dostupná i taková souvislá verbální formulace.
Procenta vs. absolutní úspora: čitelnost a spravedlivé pořadí
- Upřednostněte aktuální cenu jako první informaci, až poté uveďte původní cenu a úsporu. Čtečky často oznámí jen první dvě údaje, pokud je navigace rychlá.
- U procent používejte plná slova („procent“) – čtečky někdy čtou „znak procenta“ matoucím způsobem.
- U velmi nízkých cen oznamte úsporu i v eurech, jinak procenta působí velkolepě, ale uživatel neví posoudit reálnou hodnotu.
Expirace, odpočty a dynamické slevy bez toxicity
- Časovače neoznamujte v sekundových intervalech. Pro čtečky stačí klíčové změny (např. minutové), nebo „Sleva končí dnes v 23:59“ bez živého odpočtu.
- Pokud se sleva průběžně mění (flash sale), oznamte pouze změnu ceny nebo procenta přes aria-live=“polite“.
- Nepoužívejte agresivní alert role, které přerušují čtení. Rezervujte je pro chyby nebo kritické stavy (např. položka nedostupná).
Jednotkové ceny a přístupné porovnání
- U zboží s hmotností/objemem vždy nabídněte také jednotkovou cenu a slevu pro tuto jednotku (např. „jednotková cena po slevě 4 eura 50 centů za litr“).
- V košíku udržujte konzistentní terminologii mezi PDP (detaily produktu) a souhrnem objednávky, aby čtečka neoznamovala odlišné slovní spojení pro totéž.
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 přes klávesu Tab by měl uživatel získat cenu v prvních krocích.
- Zajistěte logické pořadí v DOM. Vizualizace mřížky nesmí vytvářet jiné čtení než pořadí v kódu.
- Pokud je sleva dostupná přes tooltip nebo ikonku „i“, musí být ovladatelná klávesnicí (Enter/Space), s zachycením a vrácením fokusu a s role=“dialog“ nebo role=“tooltip“ a aria-describedby.
Barvy, kontrast a speciální stavy
- Nespolehejte se na barvu (červená) jako jediný indikátor slevy. Čtečky barvu nepřečtou; poskytněte text „Sleva“ nebo „Nová cena“.
- Štítek „-20 %“ musí mít dostatečný kontrast a textový alternativní popis (např. skrytý „Sleva 20 procent“), jinak je jen dekorací pro vidoucí.
- U chybových stavů kupónů (neplatný, expirovaný) oznamujte chybu v elementu s role=“alert“ a jasným textem, ne jen barvou okraje pole.
Lokalizace, měna a formát čísel
- Dodržujte lokální 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 definujte lang pro úseky textu (např. anglický název kupónu), aby čtečka přepínala vhodný hlas.
- Procenta čtěte slovy – „20 procent“, ne „20 znak procenta“; pokud spoléháte na symbol, ověřte výslovnost ve používaných čtečkách.
Alternativy k přeškrtnutí: bezpečné vzory
- „Původní cena: 999 €“ a „Teď: 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 odlišila význam.
- Skryté vysvětlující texty (viz. třídy typu sr-only) používejte jako doplněk, ne náhradu skutečného textu na obrazovce.
Promo podmínky: krátké, čitelné, dostupné
- Podmínky zobrazte na místě rozhodnutí (u ceny nebo CTA), ne jen v patičce. Odkaz jasně pojmenujte (např. „Podmínky slevy“), ne „Více info“.
- Strukturalizujte obsah nadpisy (H2/H3) a seznamy, aby čtečka mohla efektivně skákat mezi body.
- Vyhněte se modálním oknům bez správných rolí a správy fokusu. Pokud modal, pak role=“dialog“, aria-modal=“true“, smysluplný nadpis.
Aplikace kupónu a okamžitá zpětná vazba
- Po aplikaci kupónu oznamte výsledek v oblasti s aria-live=“polite“ a jasnou větou: „Kupón VIANOCE byl uplatněn. Sleva 10 procent. Nová cena 71 eur 90 centů.“
- Chyby oznamujte přes role=“alert“ s propojením na pole kupónu (např. aria-describedby), aby čtečka přečetla chybové hlášení po zaměření na pole.
Marketplace a porovnávání nabídek
- U více prodejců seskupte ceny a slevy do opakovatelných bloků se stejnou strukturou a nadpisem prodejce, aby bylo skákání přehledné.
- Označte aktuálně zvolenou nabídku (např. „vybrané“) přístupným stavem, ne jen barvou.
Testování s reálnými čtečkami a uživateli
- Minimální sada: NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari (desktop i mobil).
- Otestujte navigaci pouze klávesnicí (Tab, Shift+Tab, Enter, Space, šipky) a zda jsou všechny stavy (sleva, chyba kupónu, změna varianty) čitelně oznámeny.
- Ověřte výslovnost čísel, měn a procent při různých systémových jazycích a regionálních nastaveních.
Čemu se vyhnout: katalog nejčastějších chyb
- Výhradně vizuální sleva (červené číslo, přeškrtnutí) bez slovního označení.
- Duplicitní čtení údajů kvůli přehnanému používání aria-label a současně viditelného textu.
- „Živé“ odpočty, které každou sekundu přerušují čtení, nebo alert pro všechny změny.
- Nejednotné formáty (např. „20%“, „−20 %“, „- 20 procent“) na jedné stránce.
- Podmínky pouze v modalu bez správných rolí a bez zachycení/vrácení fokusu.
Checklist přístupné slevy pro produkt a UX tým
- Blok s cenou oznamuje aktuální cenu, původní cenu, úsporu a případně expiraci v souvislé větě.
- U dynamiky (kupón, varianta) se mění pouze to, co je třeba, přes aria-live=“polite“.
- Jednotková cena je uvedena a srozumitelná i pro čtečku.
- Procenta a měna jsou vyslovena srozumitelně a konzistentně.
- Chyby při kupónech jsou oznamovány v alert a propojeny s polem.
- Všechno funguje pouze klávesnicí a ve třech hlavních kombinacích čteček.
Přístupná sleva je férová sleva
Přístupnost slevových informací není „nice to have“. Je to integrální součást férové komunikace ceny, která snižuje spornost, zlepšuje konverzi a buduje důvěru. Pokud zapracujete sémantiku, mírné ARIA, souvislé slovní formulace a odpovědné oznamování dynamických změn, vaše slevy budou pochopitelné pro všechny – nejen pro ty, kteří je vidí.
