Prístupnosť zľavových informácií pre čítačky obrazovky

Prečo sú zľavové informácie pre čítačky obrazovky kľúčové

Zľavy a promo akcie sú v e-commerce silným konverzným signálom. Ak však zľavu komunikuje iba vizuálny dizajn (farba, prečiarknutie, badge v rohu), používatelia so zrakovým postihnutím nedostanú rovnocennú informáciu. Cieľom prístupného návrhu je, aby každá kľúčová informácia o cene a úspore bola zrozumiteľná aj pri čítaní hlasom, bez vizuálneho kontextu, iba pomocou klávesnice a pri rôznych jazykových či číselných nastaveniach.

Aké informácie musí čítačka obrazovky spoľahlivo prečítať

Aktuálna cena (vrátane meny a informácie o DPH pri B2C).
Pôvodná cena (ak je zľava viazaná na referenčnú cenu) a jasný vzťah medzi cenami.
Výška zľavy – absolútne (v €) aj percentuálne (ak sa uvádza).
Podmienky zľavy – minimálna hodnota košíka, vylúčené kategórie, dátum/čas expirácie.
Jednotková cena – €/kg, €/l, €/m² pre porovnateľnosť.
Stav dostupnosti – „skladom“, „predobjednávka“, „do 3 dní“, aby užívateľ vedel vyhodnotiť hodnotu zľavy vs. dostupnosť.

Semantika nad štýlom: ako správne označiť ceny

Používajte textové uzly pre ceny, nie obrázky s textom. Čísla a mena musia byť v DOM ako čitateľný text.
Pôvodnú cenu neoznačujte iba vizuálnym preškrtnutím. Pridajte aj textovú identifikáciu, napr. „Pôvodná cena:“ pred hodnotu.
Vyhnite sa vnorenej interpunkcii a dekoratívnym symbolom medzi číslami (napr. okrasné pomlčky alebo emoji), ktoré môžu narúšať čítanie.
Zoskupte súvisiace údaje (pôvodná cena, nová cena, úspora) do jedného logického bloku s nadpisom, aby používateľ pochopil vzťahy bez vizuálnych indícií.

ARIA a štruktúra: keď treba, ale s mierou

role=“text“ môže pomôcť čítačke prečítať obsah v správnom poradí, ak sú ceny rozdelené do viacerých inline prvkov.
aria-label používajte iba vtedy, keď vizuálny text nie je dostatočne opisný. Vyhnite sa duplikovaniu, ktoré vedie k „dvojitému“ čítaniu.
aria-live=“polite“ na kontejnery, v ktorých sa mení cena pri aplikácii kupónu alebo zmenách variantu. Nepreháňajte – oznamujte iba skutočne nové informácie (nová cena, zmena percenta).
aria-hidden=“true“ na čisto dekoratívne ikony (napr. ikona percenta, odznak), aby sa nečítali ako šum.

Jasná veta pre čítačku: „čo, koľko, z čoho a dokedy“

Zoskupená, ľahko pochopiteľná veta je pre užívateľa s čítačkou rýchlejšia než tri nesúvisiace čísla. Snažte sa, aby blok so zľavou vedel prečítať vetu typu:

„Cena po zľave 799 eur. Pôvodná cena 999 eur. Ušetríte 200 eur, čo je 20 percent. Zľava platí do 30. októbra.“

Vizuálne môžete čísla zobraziť výrazne a do riadkov; pre čítačku zabezpečte, aby bola dostupná aj takáto súvislá verbálna formulácia.

Percentá vs. absolútna úspora: čítateľnosť a spravodlivé poradie

Uprednostnite aktuálnu cenu ako prvú informáciu, až potom uveďte pôvodnú cenu a úsporu. Čítačky často oznámia iba prvé dva údaje, ak je navigácia rýchla.
Pri percentách používajte plné slová („percent“) – niekedy čítačky čítajú „znak percenta“ mätúco.
Pri veľmi nízkych cenách oznámte úsporu aj v eurách, inak percentá pôsobia veľkolepo, ale užívateľ nevie vyhodnotiť reálnu hodnotu.

Expirácie, countdowny a dynamické zľavy bez toxicity

Časovače neoznamujte v sekundových intervaloch. Pre čítačky stačia kľúčové zmeny (napr. minútové), alebo „Zľava končí dnes o 23:59“ bez živého odpočtu.
Ak sa zľava priebežne mení (flash sale), oznámte iba zmenu ceny alebo percenta cez aria-live=“polite“.
Nepoužívajte agresívne alert role, ktoré prerušujú čítanie. Rezervujte ich na chyby alebo kritické stavy (napr. položka nedostupná).

Jednotkové ceny a prístupné porovnanie

Pri tovare s hmotnosťou/objemom vždy ponúknite aj jednotkovú cenu a zľavu pre túto jednotku (napr. „jednotková cena po zľave 4 eurá 50 centov za liter“).
V košíku udržte konzistentnú terminológiu medzi PDP (detailom produktu) a súhrnom objednávky, aby čítačka neoznamovala iné slovné spojenia pre tie isté veci.

Fókus, poradie a ovládanie klávesnicou

Umiestnite blok s cenou a zľavou pred sekundárne informácie. Pri rýchlej navigácii cez klávesu Tab by mal používateľ získať cenu v prvých krokoch.
Zabezpečte logické poradie v DOM. Vizualizácia mriežky nesmie vytvárať iné čítanie než poradie v kóde.
Ak je zľava dostupná cez tooltip alebo „i“ ikonku, musí byť ovládateľná klávesnicou (Enter/Space), s odchytávaním a vrátením fokusu a s role=“dialog“ alebo role=“tooltip“ a aria-describedby.

Farby, kontrast a špeciálne stavy

Nespoliehajte sa na farbu (červená) ako jediný indikátor zľavy. Čítačky farbu neprečítajú; poskytnite text „Zľava“ alebo „Nová cena“.
Badge „-20 %“ musí mať dostatočný kontrast a textový alternatívny popis (napr. skrytý „Zľava 20 percent“), inak je iba dekoráciou pre vidiacich.
Pri chybových stavoch kupónov (neplatný, exspirovaný) oznamujte chybu v elemente s role=“alert“ a jasným textom, nie iba farbou okraja poľa.

Lokalizácia, mena a formát čísel

Dodržujte lokálne formáty (pevná medzera medzi číslom a menou, desatinná čiarka „1 299,00 €“). Nie všetky čítačky však čítajú medzery rovnako – testujte.
Pri jazykovo zmiešaných stránkach definujte lang pre úseky textu (napr. anglický názov kupónu), aby čítačka prepínala vhodný hlas.
Percentá čítajte slovami – „20 percent“, nie „20 znak percenta“; ak sa spoliehate na symbol, overte výslovnosť v používaných čítačkách.

Alternatívy k prečiarknutiu: bezpečné vzory

„Pôvodná cena: 999 €“ a „Teraz: 799 €“ – radšej než „~~999 €~~ 799 €“ bez kontextu.
Pre zachovanie vizuálneho štýlu môžete ponechať del, no doplňte slovné označenie pred hodnotou, aby čítačka odlíšila význam.
Skryté vysvetľujúce texty (viz. triedy typu sr-only) používajte ako doplnok, nie náhradu reálneho textu na obrazovke.

Promo podmienky: krátke, čitateľné, dostupné

Podmienky zobraziť na mieste rozhodnutia (pri cene alebo CTA), nie iba v pätičke. Odkaz jasne pomenujte (napr. „Podmienky zľavy“), nie „Viac info“.
Štruktúrujte obsah nadpismi (H2/H3) a zoznamami, aby čítačka vedela efektívne skákať medzi bodmi.
Vyhnite sa modálnym oknám bez správnych rolí a fokus manažmentu. Ak modal, tak role=“dialog“, aria-modal=“true“, zmysluplný nadpis.

Aplikácia kupónu a okamžitá spätná väzba

Po aplikovaní kupónu oznamte výsledok v oblasti s aria-live=“polite“ a jasnou vetou: „Kupón VIANOCE bol uplatnený. Zľava 10 percent. Nová cena 71 eur 90 centov.“
Chyby oznamujte cez role=“alert“ s prepojením na pole kupónu (napr. aria-describedby), aby čítačka prečítala chybové hlásenie po zameraní na pole.

Marketplace a porovnávanie ponúk

Pri viacerých predajcoch zoskupte ceny a zľavy do opakovateľných blokov s rovnakou štruktúrou a nadpisom predajcu, aby bolo skákanie prehľadné.
Označte aktuálne zvolenú ponuku (napr. „vybrané“) prístupným stavom, nie iba farbou.

Testovanie s reálnymi čítačkami a užívateľmi

Minimálny set: NVDA + Firefox, JAWS + Chrome, VoiceOver + Safari (desktop aj mobil).
Otestujte navigáciu iba klávesnicou (Tab, Shift+Tab, Enter, Space, šípky) a či sú všetky stavy (zľava, chyba kupónu, zmena variantu) čitateľne oznámené.
Overte výslovnosť čísel, mien a percent pri rôznych systémových jazykoch a regionálnych nastaveniach.

Čomu sa vyhnúť: katalóg najčastejších chýb

Výhradne vizuálna zľava (červené číslo, prečiarknutie) bez slovného označenia.
Duplicitné čítanie údajov kvôli prehnanému používaniu aria-label a súčasne viditeľného textu.
„Živé“ countdowny, ktoré každú sekundu prerušujú čítanie, alebo alert pre všetky zmeny.
Nejednotné formáty (raz „20%“, raz „−20 %“, raz „- 20 percent“) v rámci jednej stránky.
Podmienky len v modale bez správnych rolí a bez záchytu/vrátenia fokusu.

Checklist prístupnej zľavy pre produkt a UX tím

Blok s cenou oznamuje aktuálnu cenu, pôvodnú cenu, úsporu a prípadne expiráciu v súvislej vete.
Pri dynamike (kupón, varianta) sa mení iba to, čo treba, cez aria-live=“polite“.
Jednotková cena je uvedená a zrozumiteľná aj pre čítačku.
Percentá a mena sú vyslovené zrozumiteľne a konzistentne.
Chyby pri kupónoch sú oznamované v alert a sú prepojené s poľom.
Všetko funguje iba klávesnicou a v troch hlavných kombináciách čítačiek.

Prístupná zľava je férová zľava

Prístupnosť zľavových informácií nie je „nice to have“. Je to integrálna súčasť férovej komunikácie ceny, ktorá znižuje sporovosť, zlepšuje konverziu a buduje dôveru. Ak zapracujete semantiku, mierne ARIA, súvislé slovné formulácie a zodpovedné oznamovanie dynamických zmien, vaše zľavy budú pochopiteľné pre všetkých – nielen pre tých, ktorí ich vidia.