Přístupnost slev: jak zpřístupnit informace pro čtečky obrazovky

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

Slevy a promoakce představují v e-commerce silný konverzní signál. Pokud je však sleva komunikována pouze vizuálním designem (barva, přeškrtnutí, odznak v rohu), uživatelé se zdravotním postižením zraku nedostanou stejnou 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 hlasovém čtení, bez vizuálního kontextu, pouze pomocí klávesnice a za různých jazykových či číselných nastavení.

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ázaná na referenční cenu) a jasný vztah mezi cenami.
Výše slevy – absolutní (v €) i procentuální (pokud je uváděna).
Podmínky slevy – minimální hodnota košíku, vyloučené kategorie, datum/čas expirace.
Jednotková cena – €/kg, €/l, €/m² pro porovnatelnost.
Stav dostupnosti – „skladem“, „předobjednávka“, „do 3 dnů“, aby uživatel dokázal vyhodnotit hodnotu slevy vůči dostupnosti.

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říklad „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 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 indicií.

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 více inline prvků.
aria-label používejte pouze tam, kde vizuální text není dostatečně popisný. Vyhněte se duplicitnímu čtení, které vede k „dvojitému“ výslovnosti.
aria-live=“polite“ na kontejnery, ve kterých se mění cena při aplikaci kupónu nebo změnách varianty. Nepřehánějte to – oznamujte pouze opravdu nové informace (nová cena, změna procenta).
aria-hidden=“true“ na čistě dekorativní ikonky (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, teprve potom uveďte původní cenu a úsporu. Čtečky často oznámí pouze první dva údaje, pokud je navigace rychlá.
U procent používejte plná slova („procent“) – někdy čtečky čtou „znak procenta“ matoucím způsobem.
U velmi nízkých cen oznámte úsporu i v eurech, jinak procenta působí velkolepě, 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 jen 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 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 (detail produktu) a shrnutím 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 pomocí klávesy 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 zachycením a navrácením fokusu a s role=“dialog“ nebo role=“tooltip“ a aria-describedby.

Barvy, kontrast a speciální stavy

Nespoléhejte se na barvu (červená) jako jediný indikátor slevy. Čtečky barvu nevyčtou; poskytněte text „Sleva“ nebo „Nová cena“.
Odznak „-20 %“ musí mít dostatečný kontrast a textový alternativní popis (např. skrytý „Sleva 20 procent“), jinak je pouhou dekorací pro vidoucí.
U chybových stavů kupónů (neplatný, expirující) oznamujte chybu v elementu s role=“alert“ a jasným textem, nikoliv pouze barvou orámování 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 se spoléháte na symbol, ověřte výslovnost v 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 rozlišila význam.
Skryté vysvětlující texty (viz. třídy typu sr-only) používejte jako doplněk, nikoli náhradu skutečného textu na obrazovce.

Podmínky promo akcí: krátké, čitelné, dostupné

Podmínky zobrazte na místě rozhodnutí (u ceny nebo tlačítka CTA), nikoli pouze v patičce. Odkaz jasně pojmenujte (např. „Podmínky slevy“), ne „Více info“.
Strukturovat obsah pomocí nadpisů (H2/H3) a seznamů, aby čtečka mohla efektivně přeskakovat mezi body.
Vyhněte se modálním oknům bez správných rolí a řízení fokusu. Pokud modal, použijte 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 opakujících se bloků se stejnou strukturou a nadpisem prodejce, aby bylo přehledné přeskakování.
Označte aktuálně vybranou nabídku (např. „vybráno“) přístupným stavem, nikoli pouze 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í.
Duplikované čtení údajů kvůli přehnanému používání aria-label a zároveň 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 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 (kupón, 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 kupónů jsou oznamovány v alert a jsou propojeny s polem.
Vše funguje pouze klávesnicí a ve třech hlavních kombinacích čteček.

Přístupná sleva je fér sleva

Přístupnost informací o slevách není „nice to have“. Je to integrální součást férové komunikace ceny, která snižuje riziko sporů, zlepšuje konverzi a buduje důvěru. Pokud zapracujete semantiku, mírné ARIA, souvislé slovní formulace a zodpovědné oznamování dynamických změn, vaše slevy budou pochopitelné pro všechny – nejen pro ty, kteří je vidí.