Dostupnost slev pro čtečky obrazovky

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 v 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 je uváděno).
Podmínky slevy – minimální hodnota košíku, vyloučené kategorie, datum/čas expirace.
Jednotková cena – €/kg, €/l, €/m² pro srovnatelnost.
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, 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 i textovou identifikaci, např. „Původní cena:“ před hodnotu.
Vyhněte se vnořené interpunkci a dekorativním symbolům mezi čísly (např. okrasné pomlčky nebo emoji), které mohou narušovat č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 nápověd.

ARIA a struktura: když je potř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 několika inline prvků.
aria-label používejte pouze tehdy, když vizuální text není dostatečně popisný. Vyhněte se duplikaci, která vede k „dvojímu“ čtení.
aria-live=“polite“ na kontejnery, ve kterých se mění cena při aplikaci kuponu nebo změně varianty. Nepřehánějte to – 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áto souvislá verbální formulace.

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

Upřednostněte aktuální cenu jako první informaci, teprve poté uveďte původní cenu a úsporu. Čtečky často oznámí pouze první dva údaje, pokud je navigace rychlá.
Při procentech používejte plná slova („procent“) – někdy čtečky čtou „znak procenta“ matoucím způsobem.
Při velmi nízkých cenách oznamte úsporu i v eurech, jinak procenta působí nahrubo, ale uživatel neví vyhodnotit 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 na 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 i jednotkovou cenu a slevu pro tuto jednotku (např. „jednotková cena po slevě 4 eur 50 centů za litr“).
V košíku zachovejte konzistentní terminologii mezi PDP (detaily produktu) a shrnutím objednávky, aby čtečka neoznamovala odlišné slovní spojení pro stejnou věc.

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 tlačítkem 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 ikonu „i“, musí být ovladatelná klávesnicí (Enter/Space), s odchytáváním a vrácením fokusu a s role=“dialog“ nebo role=“tooltip“ a aria-describedby.

Barvy, kontrast a speciální stavy

Nespoléhejte se na barvu (červenou) 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 pouze dekorací pro vidoucí.
Při chybných stavech kuponů (neplatný, expirovaný) oznamujte chybu v elementu s role=“alert“ a jasným textem, nikoli pouze 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 ale čtou mezery stejným způsobem – testujte.
Při jazykově smíšených stránkách definujte lang pro úseky textu (např. anglický název kuponu), aby čtečka přepínala vhodný hlas.
Procenta čtěte slovy – „20 procent“, nikoli „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 „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 odlišila význam.
Skryté vysvětlující texty (viz. třídy typu sr-only) používejte jako doplněk, nikoli náhradu reálného textu na obrazovce.

Podmínky promoakcí: stručné, čitelné, dostupné

Podmínky zobrazte na místě rozhodnutí (při ceně nebo CTA), nikoli pouze v patičce. Odkaz jasně pojmenujte (např. „Podmínky slevy“), ne „Více info“.
Strukturovaný 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 kuponu a okamžitá zpětná vazba

Po aplikaci kuponu oznamte výsledek v oblasti s aria-live=“polite“ a jasnou větou: „Kupon VIANOCE byl uplatněn. Sleva 10 procent. Nová cena 71 eur 90 centů.“
Chyby oznamujte přes role=“alert“ s propojením na pole kuponu (např. aria-describedby), aby čtečka přečetla chybové hlášení po zaměření na pole.

Marketplace a porovnávání nabídek

Při více prodejcích 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ě vybranou nabídku (např. „vybrané“) přístupným stavem, nikoli pouze barvou.

Testování s reálnými čtečkami a uživateli

Minimální set: 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 kuponu, 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é“ countdowny, které každou sekundu přerušují čtení, nebo alert pro všechny změny.
Nesourodé formáty (jednou „20%“, pak „−20 %“, jindy „- 20 procent“) na jedné stránce.
Podmínky pouze v modálních oknech bez správných rolí a bez zachycení/vrácení fokusu.

Checklist 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 dynamice (kupon, varianta) se mění pouze to, co je potř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 kuponu jsou oznamovány v alert a jsou propojené s polem.
Vše 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 semantiku, 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í.