Alternatívny text, ako už z názvu vyplýva, je text, ktorý niečo nahrádza, alternuje či dopĺňa. Využíva sa najmä pri popise grafických prvkov pre používateľov s úplnou alebo takmer úplnou stratou zraku.
Aké iné využitie alternatívny text má a ako ho správne používať, na to sa pozrieme v tomto texte.
Čo je alternatívny text
Alternatívny text je textová náhrada za netextový obsah na webových stránkach. Väčšinou sa v tejto súvislosti hovorí o obrázkoch, ale princípy využitia platia aj pre multimediálny a iný netextový obsah nielen na webe.
Je to popisný text, ktorý vyjadruje význam a kontext vizuálnej položky v digitálnom prostredí, napríklad v aplikácii alebo na webovej stránke. Keď čítače obrazovky ako Microsoft Narrator, JAWS a NVDA identifikujú digitálny obsah s alternatívnym textom, prečítajú ho nahlas. To používateľom umožní lepšie pochopiť, čo je na obrazovke. Dobre napísaný popisný text dramaticky znižuje nejednoznačnosť a zlepšuje používateľskú skúsenosť.
Funkcie alternatívneho textu
Alternatívny text má niekoľko funkcií:
- Čítače obrazovky oznamujú namiesto obrázkov alternatívny text, čo pomáha používateľom so zrakovým alebo istým kognitívnym postihnutím vnímať obsah a funkciu obrázkov.
- Ak sa obrázok nepodarí načítať alebo používateľ zablokoval obrázky, prehliadač zobrazí alternatívny text vizuálne namiesto obrázka.
- Vyhľadávače používajú alternatívny text a zohľadňujú ho pri hodnotení účelu a obsahu stránky.
Tým, že obrázky obsahujú alternatívny popis, vyhľadávače vedia, čo sa na nich nachádza. Nájdu tak aj obrázky, ale aj ich zdroj, čo môže pomôcť návštevnosti webu.
Alternatívny text nie je teda užitočný len pre používateľov čítačov obrazovky, ale za istých okolností poslúži všetkým.
Kedy Alt áno a kedy nie?
Veľmi záleží na type grafiky. Každý obrázok s výpovednou hodnotou by mal obsahovať alternatívny text. Sem patria napríklad fotografie osôb v článkoch, grafy, infografiky, diagramy, obrázky s textom – otváracie hodiny, rôzne skeny pozvánok, oznamov a podobne.
Pokiaľ ide o diagramy či grafy, je vhodné informácie z nich sprostredkovať skôr v samostatnej textovej tabuľke. To platí aj o pozvánkach, otváracích hodinách a podobne. Ak používateľ v texte tieto informácie nájde, stačí stručný, avšak výstižný popis formou alternatívneho textu.
Príklad:
Dobrý popis – stĺpcový diagram – vývoj predaja v r. 2019 až 2021, predaj za posledné 3 roky neustále rástol.
Zlý popis: Stĺpcový diagram predaja v r. 2019 až 2021.
Takisto je vhodné použiť alternatívny text aj vo videách bez zvukovej stopy, lepšie povedané bez slovného prejavu. V ideálnom prípade by tieto mali obsahovať druhú zvukovú stopu s alternatívnym popisom deja.
Ak sú na webe tlačidlá vo forme obrázkov, je najlepšie ich nahradiť skutočným textom. Ak to nie je možné, musia obsahovať alternatívny text s ich funkciou – „Odoslať“, „Registrovať sa“ a podobne.
Alternatívny text sa nepoužíva v prípade, ak je obrázok zároveň odkazom a tento odkaz je výstižne popísaný. Stáva sa totiž, že nasledujú za sebou 2 rovnaké popisy. To vytvára nežiaducu duplicitu, čo je v rozpore s kritériami WCAG. Ak to tak nie je, je potrebné použiť alternatívny text v rámci obrázka. To isté platí aj o ikonách a iných grafických prvkoch.
Dekoratívne prvky by alternatívny text obsahovať nemali. Dekoratívna grafika je taká, ktorá:
- nezobrazuje dôležitý obsah,
- sa používa na rozloženie alebo na neinformatívne účely
- a nemá funkciu (napríklad nie je odkazom).
Vtedy je vhodné ponechať ALT prázdny v takejto podobe alt=““. Pri vytváraní dokumentu v Microsoft Worde je možné obrázok priamo začiarknuť ako dekoratívny. Pri pridávaní dekoratívnej grafiky do článku v redakčných systémoch ako WordPress pole pre alternatívny popis ostáva prázdne.
Ako má vyzerať správny alternatívny text?
V prvom rade atribút ALT musí vždy existovať. Ako bolo spomenuté vyššie, pri dekoratívnych obrázkoch vyzerá takto alt=““.
Alt by nemal obsahovať názov súboru a slovo grafika či obrázok. Čítače typ prvku oznamujú samy. Typ grafiky však obsahovať môže: fotografia, perokresba, komix a podobne.
Nemal by byť nadbytočný alebo sprostredkúvať rovnaké informácie ako okolitý text. Do alternatívneho textu nepatria informácie o zdroji, autorovi fotografie (ak nie sú súčasťou popisu), alebo slová, ktoré bezprostredne nesúvisia s obsahom grafiky.
Takisto nie je vhodné používať namiesto atribútu Alt titulok. Nefunguje správne na dotykových zariadeniach. V desktopovej verzii stránky sa väčšinou objaví až vtedy, ak sa používateľ kurzorom myši dostane na obrázok a čítače ho čítajú aj spolu s alternatívnym textom. To vytvára nežiaducu duplicitu.
Aký by teda mal byť?
- Presný a rovnocenný pri prezentácii obsahu – ak je na obrázku text, Alt by mal obsahovať jeho doslovný prepis.
- Stručný – len zopár slov, poprípade jednu či dve krátke vety. Používame jednoduchý jazyk – kratšie vety v činnom rode.
- Ukončený bodkou – čítače obrazovky sa po jeho prečítaní trošku pozastavia, čo vytvára lepší používateľský zážitok.
Príklad:
Nesprávny: <img src=“obrazok.png“alt=“obrázok, popis obrázka – zdroj a meno fotografa“ />
Správny: <img src=“obrazok.png“alt=“popis obrázka stručný a výstižný.“/>
Okrem typu grafiky záleží aj na kontexte. Iný popis obrázku (napríklad loga) použijeme v článku, ktorý hovorí priamo o jeho vzniku, okolnostiach a podobe. Inú formuláciu je potrebné zvoliť pri obrázku loga na webe.
Príklad:
Článok o vzniku a tvorbe loga: Logo Technológie bez zraku – žltý štvorec, v ktorom je prečiarknuté modré oko. V jeho zreničke sa nachádza žlté písmeno T v Braillovom písme.
Logo na stránke či na sociálnych sieťach: Logo Technológie bez zraku
Ako pridať alternatívny text
Pokiaľ píšeme web v HTML, atribút vyzerá nasledovne:
<img src=“obrazok.png“ alt=“popis obrázka.“ />
Väčšina redakčných systémov (napríklad WordPress) umožňuje pridať alternatívny text k obrázku pri jeho nahrávaní. Pole má zväčša názov „Alt-text“, „alternatívny text“, prípadne „Popis obrázka“, „alternatívny popis“ alebo niečo podobné.
Nižšie sú odkazy na návody, ako pridať alternatívny text do dokumentov či na najbežnejšie sociálne siete:
- Microsoft: Pridanie alternatívneho textu k tvaru, obrázku, grafu, grafickému prvku SmartArt alebo inému objektu
- Google: Pridanie alebo úprava textu a obrázkov
- Facebook: How to Add Alt Text to Facebook Photos
- Twitter: How to make images accessible for people
- Instagram: How do I edit the alternative text for a photo on Instagram?
- LinkedIn: Adding Alternative Text to Images for Accessibility
Záver
Alternatívny text je dôležitým prvkom pri sprístupňovaní webu nielen pre ľudí so zrakovým či kognitívnym znevýhodnením. Popisuje tiež obrázky pre vyhľadávače, čím zvyšuje skóre SEO. Ukáže sa takisto používateľom, ktorí majú zakázané zobrazovanie obrázkov. Dá sa povedať, že z dobre napísaného alternatívneho textu profitujú z času na čas všetci používatelia webových stránok či aplikácií.
Zdroje
- Daniel Göransson: Alt-texts: The Ultimate Guide
- Microsoft: Everything you need to know to write effective alt text
- WebAIM: Alternative Text
- Pavel Vranka: Pravidla, jak správně používat alternativní text u obrázků
- Pavlína Soušková: Jak na přístupnost sociálních sítí