Přístupné používání emoji: váš text musí být srozumitelný i při předčítání

Člověk procházející obsah pomocí čtečky obrazovky vnímá emoji často prostřednictvím jeho názvu. Název nemusí nutně odpovídat přenesenému významu, který měl na mysli autor. Na to zvlášť upozorňuje příručka W3C H86. Zdroj: W3C H86

Napiš to, co chceš sdělit

Krátký příklad:

V pátek ☕, poté 📞, nakonec 📄.

Věta je víceznačná i vizuálně. Znamená pití kávy, telefonickou dohodu a odeslání dokumentu? Kdy se to děje a kdo má jaký úkol? Pouhé přečtení názvů symbolů samo o sobě tyto otázky nevyřeší.

Přesnější verze:

V pátek v 9 hodin se sejdeme na kávu. Poté zavolám dodavateli a odpoledne pošlu shrnutí.

Pokud chceš ke kávě přidat i šálek, věta musí zůstat úplná. V oznámení musí být textově uvedeno datum, místo, cena a úkol k vykonání. Doporučení pro přístupnost na sociálních sítích také podporují toto řešení. Zdroj: NCDIT, Social Media Content Accessibility

Dlouhá řada symbolů může být při čtení dlouhým výčtem

Ve zprávě „Gratuluji! 🎉🎉🎉🎉🎉“ může čtečka obrazovky přečíst stejný název vícekrát. Zkus to s jedním symbolem: „Gratuluji k tvému výsledku! 🎉“ Větu tak lze vyslechnout rychleji. Symbol je vhodné umístit na přirozený bod zastavení, například na konec odstavce. Zdroj: Section508.gov, sociální média

V seznamech používej skutečné výčty, pokud to rozhraní podporuje. Pokud na začátek každého řádku vkládáš stejnou hvězdičku, fajfku nebo prst, zamysli se, jakou informaci opakovaný symbol přináší. Jednoduché číslování nebo vestavěný seznam často poskytují přehlednější strukturu.

V porovnání, kde jsou samotná emoji tématem, je však na místě představit více symbolů. V takovém případě napiš vedle nich název a vysvětlení rozdílu. Čtenář tak má k dispozici podstatu i bez rozlišování obrázků.

Co můžeš udělat na vlastním webu?

Pokud emoji nese samostatný význam, lze mu v HTML přiřadit přístupný název. Vlastní příklad odpovídající metodě prezentované organizací W3C:

<span role="img" aria-label="Úspěšně odesláno">✅</span>

V tomto příkladu přístupný název sděluje úspěšné odeslání. Atribut aria-label se vidícím čtenářům nezobrazuje jako popisek, proto důležité stavy vypiš i viditelným textem. Popisek tlačítka by měl pojmenovat akci: například „Kopírovat“.

V případě emoji vloženého jako obrázkový soubor určuj alternativní text prvku img na základě úkolu obrázku. Pokud je stejná informace již zcela uvedena vedle obrázku a grafika nepřidává nový význam, může být na místě prázdný alt="". Příručka organizace W3C pro obrázky tento rozhodovací proces závislý na situaci podrobně popisuje. Zdroj: W3C, Decorative Images

Kontrola by měla probíhat na finálním rozhraní

V příspěvcích na sociálních sítích jsou technické možnosti obvykle omezenější, proto je obzvláště důležitá dobře napsaná věta. Zpracování přístupných názvů může záviset na systému a aplikaci. Samotné HTML řešení nebo úspěšný test sám o sobě nepotvrzuje přístupnost celé stránky.

Pro praktickou kontrolu si přečti text bez symbolů a poté si jej poslechni na finálním rozhraní pomocí čtečky obrazovky. Všímej si, kde se zbytečně opakuje informace, kde se věta přeruší a zda zůstává nevysvětlená narážka. Po opravě opakuj test na stejném místě.

Na začátek si vyber často používaný příspěvek nebo zprávu pro klienta. Zkrácení zbytečné řady symbolů a doplnění chybějících slov je hned konkrétní, ověřitelná změna.