Prístupné používanie emoji: nech je tvoj text zrozumiteľný aj pri čítaní

Človek prezerajúci obsah pomocou čítačky obrazovky vníma emodži často prostredníctvom jeho názvu. Názov nemusí byť totožný s preneseným významom, na ktorý myslel autor. Na to osobitne upozorňuje aj návod W3C H86. Zdroj: W3C H86

Napíš to, čo chceš oznámiť

Jeden krátky príklad:

V piatok ☕, potom 📞, nakoniec 📄.

Veta je zrozumiteľná aj vizuálne rôznymi spôsobmi. Znamená pitie kávy, telefonickú dohodu a odoslanie dokumentu? Kedy sa to deje a kto má akú úlohu? Samotné čítanie názvov symbolov neodpovedá na tieto otázky.

Presnejšia verzia:

V piatok o 9 hodine sa stretneme na kávu. Potom zavolám dodávateľovi a popoludní pošlem zhrnutie.

Ak chceš ku káve pridať aj šálku, veta nech aj napriek tomu zostane úplná. V oznámení nech sú textovo uvedené dátum, miesto, cena a úloha na vykonanie. Aj odporúčania pre prístupnosť sociálnych médií podporujú toto riešenie. Zdroj: NCDIT, Social Media Content Accessibility

Dlhý rad symbolov môže byť pri čítaní dlhým zoznamom

V správe „Gratulujem! 🎉🎉🎉🎉🎉” môže čítačka obrazovky viackrát prečítať ten istý názov. Vyskúšaj to s jedným symbolom: „Gratulujem k tvojmu výsledku! 🎉” Veta sa tak dá vypočuť kratšie. Symbol sa oplatí umiestniť na prirodzený bod zastavenia, napríklad na koniec odseku. Zdroj: Section508.gov, sociálne médiá

V zozname používaj skutočný zoznam, ak to rozhranie podporuje. Ak na začiatok každého riadku vkladáš tú istú hviezdičku, fajku alebo prst, zamysli sa, akú informáciu prináša opakovaný symbol. Jednoduché číslovanie alebo vstavaný zoznam často poskytuje lepšie sledovateľnú štruktúru.

V porovnaní, kde sú samotné emodži témami, je však opodstatnené predstaviť viac symbolov. V takom prípade napíš vedľa nich ich názov a vysvetlenie rozdielu. Čitateľ tak má k dispozícii podstatu aj bez rozlišovania obrázkov.

Čo môžeš urobiť na vlastnej webovej stránke?

Ak emodži nesie osobitný význam, v HTML sa k nemu dá priradiť prístupný názov. Vlastný príklad zodpovedajúci metóde predstavenej organizáciou W3C:

<span role="img" aria-label="Úspešne odoslané">✅</span>

V tomto príklade prístupný názov oznamuje úspešné odoslanie. Atribút aria-label sa vidiacemu čitateľovi nezobrazuje ako popis, preto dôležitý stav napíš aj viditeľným textom. Popis tlačidla by mal pomenovať akciu: napríklad „Kopírovať”.

V prípade emodži vloženého ako obrázkový súbor určuj alternatívny text prvku img na základe úlohy obrázka. Ak je tá istá informácia už úplne uvedená vedľa obrázka a grafika nepridáva nový význam, môže byť opodstatnený prázdny alt="". Návod organizácie W3C pre obrázky tento rozhodovací proces závislý od situácie podrobne opisuje. Zdroj: W3C, Decorative Images

Kontrola nech sa vykoná na finálnom rozhraní

V príspevku na sociálnej sieti sú technické možnosti zvyčajne obmedzenejšie, preto je obzvlášť dôležitá dobre napísaná veta. Spracovanie prístupných názvov môže závisieť od systému a aplikácie. Samotné HTML riešenie alebo úspešný test sám o sebe nepotvrdzuje prístupnosť celej stránky.

Na praktickú kontrolu si prečítaj text bez symbolov a potom si ho vypočuj na finálnom rozhraní pomocou čítačky obrazovky. Všímaj si, kde sa zbytočne opakuje informácia, kde sa prerušuje veta a či zostáva nevysvetlená narážka. Po oprave zopakuj test na tom istom mieste.

Na začiatok si vyber často používaný príspevok alebo správu pre klienta. Skrátenie zbytočného radu symbolov a vypísanie chýbajúcich slov je hneď konkrétnou, overiteľnou zmenou.