Ako písať dobrý alt text pre obrázky

Na čo slúži alt text

Alt text je textová alternatíva obrázka zapísaná v atribúte alt. Čítačky obrazovky ho prečítajú nahlas, Braillove riadky ho zobrazia a prehliadač ho ukáže, keď sa obrázok nenačíta. Môžu ho používať aj vyhľadávače. Webový štandard pre prístupnosť, WCAG, žiada textovú alternatívu, ktorá plní rovnakú úlohu ako obrázok (kritérium úspešnosti 1.1.1, úroveň A).

Kľúčová myšlienka: alt text nie je popiska ani opis obrázka pre obrázok samotný. Hovorí, čo obrázok stránke pridáva. Tá istá fotografia môže na dvoch stránkach potrebovať rôzny alt text alebo žiadny.

Štyri druhy obrázkov

• Informatívne obrázky pridávajú význam: fotografia, ikona vedľa telefónneho čísla, diagram. Napíš krátky alt text, ktorý tento význam sprostredkuje.
• Funkčné obrázky sú v odkazoch a tlačidlách. Alt text pomenúva akciu alebo cieľ, nie obrázok: „Hľadať“ pri lupe, „Vytlačiť túto stránku“ pri ikone tlačiarne.
• Dekoratívne obrázky nepridávajú nič: okraj, výplň, ozdoba alebo obrázok, ktorý iba opakuje text vedľa neho. Daj im prázdny atribút alt (alt=""), aby ich čítačky obrazovky preskočili, alebo ich daj do štýlu ako pozadie.
• Obrázky textu sú poslednou možnosťou. Ak nejaký potrebuješ, alt text opakuje slová na obrázku. Logo, ktoré nie je odkazom, dostane názov organizácie.

Ako napísať dobrý alt text

1. 1Opýtaj sa, prečo je obrázok na stránke. Čo by návštevníkovi chýbalo, keby tam nebol?
2. 2Napíš, čo je pre tento účel dôležité, slovným spojením alebo jednou vetou.
3. 3Začni obsahom. Čítačka obrazovky zvyčajne ohlási, že ide o obrázok, takže „obrázok…“ alebo „fotografia…“ málokedy pomôže.
4. 4Neopakuj to, čo už hovorí text vedľa obrázka. Ak hovorí všetko, obrázok je dekoratívny a dostane prázdny alt.
5. 5Prečítaj alt text nahlas bez pohľadu na stránku. Dáva sám osebe zmysel?

Časté chyby

• Žiadny atribút alt. Niektoré čítačky obrazovky potom prečítajú názov súboru.
• Názov súboru alebo kód ako alt text, napríklad „IMG_2041.jpg“.
• Ten istý reťazec kľúčových slov pri mnohých obrázkoch. Alt text je predovšetkým pre ľudí.
• Dlhý opis čisto dekoratívneho obrázka.
• Opis vzhľadu obrázka tlačidla namiesto jeho akcie. Tlačidlo vyhľadávania nie je „lupa“, ale „Hľadať“.

Aký dlhý by mal byť?

WCAG 1.1.1 neuvádza počet znakov. W3C radí písať ho krátko, ideálne slovným spojením alebo vetou. Pri grafoch a iných zložitých obrázkoch uveď úplné informácie ako text na stránke a alt text nechaj krátky. Ak potrebuješ viac ako vetu, obrázok pravdepodobne nesie obsah, ktorý patrí do textu stránky.

Skontroluj svoj web

Ak chceš nájsť obrázky bez užitočného alt textu, spusti na stránke bezplatnú kontrolu alternatívnych textov. Ak chceš návrhy pre veľa obrázkov, použi Generátor alt textov. Automatický návrh môže prehliadnuť to, čo je na tvojej stránke dôležité, preto si prečítaj každý text a zmeň ho, keď nezodpovedá účelu obrázka.

Nástroje Do4U pomáhajú s písaním, nie s rozhodnutím: či je obrázok informatívny, funkčný alebo dekoratívny, vieš najlepšie ty. Po veľkých zmenách na webe skontroluj znova.