Accessibility (titulky, kontrast, UX)

Prečo je prístupnosť (a11y) kritická aj pre adult & zoznamkové služby

Prístupnosť nie je iba o súlade so štandardmi. V kontexte adult a zoznamkových platforiem ide o dôstojnosť, bezpečnosť a rovnaký prístup k službám pre všetkých fanúšikov a používateľov – vrátane ľudí so zrakovým, sluchovým, motorickým či kognitívnym znevýhodnením. Okrem etiky a reputácie má prístupnosť priamy vplyv na konverziu (registrácie, predplatné), retenciu a znižovanie sťažností. Dobre navrhnuté a11y zároveň znižuje prevádzkové riziká: menej chýb v platbách, menej omylov pri povoleniach, menej incidencií podpory.

Štandardy a referenčný rámec: na čo cieliť

• WCAG 2.2 Level AA: praktický cieľ pre web aj mobil. Zamerajte sa na vnímateľnosť (titulky, kontrast), ovládateľnosť (klávesnica, fokus), zrozumiteľnosť (jazyk, chyba) a robustnosť (semantika, ARIA).
• EN 301 549 / ADA-inšpirované princípy: ak pôsobíte v EÚ/UK/US, berte ich ako kompas pre verejné inštitúcie a B2C produkty.
• Design tokens pre a11y (farby, spacing, fonty) v dizajn systéme – aby sa prístupné voľby opakovali konzistentne.

Persony z praxe: kto bude váš produkt používať

• Sluchové znevýhodnenie: potrebuje uzavreté titulky, presné časovanie, popisy zvukov a vibrácie ako signály.
• Zrakové znevýhodnenie: vyžaduje kontrast, zväčšenie, screen reader semantiku, logický poriadok fokusov a klávesové skratky.
• Motorické obmedzenia: potrebuje plnú klávesnicu, dostatočné hit-zóny (≥ 44×44 px), žiadne „drag-only“ vzťahy.
• Kognitívne rozdiely: ocení jednoduchý jazyk, stabilné rozvrhy, slabšie animácie, jasné stavy a predvídateľné akcie.

Titulky, prepisy a audio popisy: minimum pre video a živé streamy

• Uzavreté titulky (CC) pre všetky videá: presné časovanie, identifikácia hovoriaceho, popisy zvukov [smeje sa, hudba].
• Prepis (transcript): strojovo čitateľný súbor (napr. WebVTT + textová verzia) pre vyhľadávanie a pomocné technológie.
• Živé titulky pri streamoch: aspoň automatické s možnosťou post-fixu; vizuálne nastaviteľná veľkosť a kontrast titulkov.
• Audio popis k dôležitým vizuálnym udalostiam mimo dialógu – stručný a faktický.

Kontrast, farby a typografia: čitateľnosť je základ bezpečia

• Kontrast textu: min. 4.5:1 (bežný text) a 3:1 (veľký text, ≥ 18 pt). Ikony a ovládacie prvky min. 3:1.
• Nepoužívať iba farbu na signalizáciu stavu (online/offline, chybové stavy). Pridajte ikonu, text alebo vzor.
• Typografia: systémové alebo dobre hintované fonty, 1.5× riadkovanie, odstupy odsekov ≥ 1.2× riadkovania; vypínateľné kapitálky.

Ovládanie klávesnicou a fokus: žiadne „pasce“

• Celý tok registrácie a platby musí byť dokončiteľný klávesnicou (Tab/Shift+Tab/Enter/Space/ESC). Žiadne onMouseOver-only funkcie.
• Viditeľný fokus: focus ring s kontrastom ≥ 3:1, neprekrytý sticky prvkami.
• Logický poriadok: DOM poradie zodpovedá vizuálnej hierarchii. Dialógy zachytia fokus a po zatvorení ho vrátia.

ARIA a semantika: len tam, kde chýba natívne správanie

• Preferujte natívne HTML (button, link, label, fieldset, legend) pred vlastnými komponentmi.
• Ak musíte použiť ARIA, zabezpečte role, name a state (napr. aria-expanded, aria-live pre notifikácie).
• Formy majú spojené štítky (for/id), popisy chýb a aria-describedby pre pomocné texty.

Formuláre a onboarding: jednoduchý jazyk, predvídateľné kroky

• Jedna úloha na obrazovku, zrozumiteľné microcopy a príklady (masky čísiel, dátumy).
• Chyby vysvetlené v texte, nie iba farbou; umiestnené pri poli aj súhrnne hore.
• Časové limity (napr. verifikácia) musia byť predĺžiteľné; automatické odhlásenie nech má varovanie.

UX pre správy a feed: redukovaná kognitívna záťaž

• Stabilné rozhranie: žiadne neočakávané presuny rozloženia (CLS), animácie obmedzte a ponúknite „Reduce motion“.
• Jasné stavy: doručené/čítané/typing s textovými popismi; možnosť vypnúť „live“ prvky.
• Bezpečné thumbnails: alternatívne texty, voľba veľkosti náhľadov, popisy pre screen reader.

Moderácia a reportovanie prístupne

• Report formulár dostupný klávesnicou a čitateľný; označenie kategórie porušenia textom.
• Stav riešenia komunikujte v jednoduchom jazyku („Prijali sme nahlásenie“, „Prebieha kontrola“, „Uzavreté“), nie iba farbou alebo ikonou.
• Podpora: ponúknite chat s titulkovaním, e-mail a telefón s TTY/TDD alternatívou podľa regiónu.

Live eventy, streamy a chat: prístupné v reálnom čase

• Ovládacie prvky videa: veľké ciele, klávesové skratky (K – play/pause, M – mute), popisné aria-labels, kontrastné ikony.
• Chat: navigácia šípkami, „skip to new messages“, čítač neprečítaných správ s aria-live.
• Slow mode a filtrovanie pre ľudí s kognitívnou záťažou; možnosť vypnúť auto-scroll.

Bezpečnostné a súkromné prvky bez bariér

• 2FA: ponúknite viac možností – TOTP, push, FIDO kľúč; nepoužívajte iba SMS. Výzvy musia byť čitateľné a dostupné.
• Citlivé nastavenia (viditeľnosť profilu, titulky default ON): prehľadné prepínače s popisom, nie len ikonami.
• Etiketa obsahu: jasné upozornenia (content notes) v textovej forme; žiadne skryté prekvapenia animáciami.

Platby, členstvá a predplatné: bez chýb a stresu

• Čitateľný „descriptor“ a rekapitulácia objednávky textom; klávesnicové ovládanie a správne označené polia.
• Dunning notifikácie aj e-mailom a push s textovým súhrnom; titulkovať ak sú súčasťou videa.
• Cancel UX: dostupné klávesnicou, jednoduchý jazyk, potvrdenie o zrušení v prístupnej forme.

Mobilná prístupnosť: nie je to „zmenšený web“

• VoiceOver/TalkBack testy pre každý release; správne contentDescription/AccessibilityLabel.
• Gestá s alternatívou: pinch/drag má ekvivalent v tlačidlách; veľké tap ciele a dostatok priestoru.
• Haptika a vibrácie ako voliteľný doplnok k vizuálnym stavom.

Jazyk, lokalizácia a inkluzívnosť

• Plain language: krátke vety, bežné slová, vysvetlenie žargónu; glosár pojmov (napr. „predplatné“, „automatická obnova“).
• Preklady s ohľadom na smerovanie textu (RTL), dátumy, jednotky, kultúrne zvyklosti.
• Neutrálne formulácie a možnosti výberu pronom (dobrovoľné, priateľské UX bez vynucovania).

Testovanie a audit: proces, nie jednorazová úloha

• Automatizované skeny (CI) cez nástroje na kontrolu kontrastu, alt-textov, semantiky; blokujú build pri kritických chybách.
• Manuálne testy so screen readerom (NVDA/JAWS/VoiceOver) a klávesnicou, „bez myši“ deň pred release.
• Testovanie s používateľmi so znevýhodnením: honorované, pravidelné, so spätnou väzbou v backlogu.

Metriky a OKR pre a11y

• A11y pass rate v CI (≥ 98 %) a počet blocker chýb = 0 pred release.
• Kontrastné pokrytie: % komponentov s AA/AAA.
• Úspešnosť „bez myši“: % kritických tokov dokončených klávesnicou.
• Adopcia titulkov: % videí so CC, % zapnutých CC ako default.

Organizácia a zodpovednosti

• Design system s prístupnými komponentmi a dokumentáciou použitia.
• A11y champion v každom tíme (produkt, FE, iOS/Android, obsah, podpora).
• „Accessibility first“ v definition-of-done: žiadny merge bez a11y akceptačných kritérií.

Tabuľka: minimálne prístupové požiadavky podľa oblasti

Checklist pre release

1. Kontrast a veľkosti nad AA; fokus ring viditeľný.
2. Celý sign-up → pay → cancel klávesnicou bez pascí.
3. Všetky nové videá majú CC a prepis; live stream má plán titulkovania.
4. Formy: labely, chyby textom, predĺžiteľné limity.
5. Screen reader prešiel hlavné scenáre (profil, správy, prehrávanie).
6. Podpora má prístupný kontakt a skripty pre používateľov so znevýhodnením.

Prístupnosť ako konkurenčná výhoda

Prístupnosť pre adult a zoznamkové služby nie je nálepka. Je to spôsob navrhovania, ktorý znižuje riziká, zlepšuje konverziu a robí produkt príjemným pre všetkých. Keď sú titulky štandard, kontrast vysoký, formuláre zrozumiteľné a ovládanie bez bariér, získate viac spokojných fanúšikov – vrátane tých, na ktorých sa doteraz zabúdalo.