Alt text

Alt text: definícia, účel a prečo na ňom záleží

Alt text (atribút alt v elemente <img>) je textová náhrada vizuálneho obsahu. Slúži na sprístupnenie informácie používateľom čítačiek obrazovky, pri zlyhaní načítania obrázka a ako sémantická pomôcka pre vyhľadávače. V modernom SEO a AIO/AEO (Answer/AI Engine Optimization) je kvalitný alt text dôležitý na pochopenie významu obrázka v kontexte stránky a otázok používateľov.

Vzťah k prístupnosti (WCAG) a právnym požiadavkám

• WCAG 2.x – Success Criterion 1.1.1 Non-text Content: každý informatívny obrázok musí mať textovú alternatívu ekvivalentnú účelu obsahu.
• Dekoratívny obsah má mať prázdny alt (alt="") a ideálne role="presentation" alebo aria-hidden="true" v neštandardných prípadoch.
• Právne rámce (napr. smernica EÚ o prístupnosti, požiadavky pre verejnú správu) často implicitne vyžadujú dostupné alternatívy k obrázkom.

Alt text a SEO/AEO: ako pomáha vyhľadávaniu a LLM odpovediam

• Relevancia dotazu: vyhľadávače aj generatívne systémy používajú alt text na pochopenie témy obrázka, čo zvyšuje šancu na zobrazenie v obrázkovom a univerzálnom vyhľadávaní.
• Kontext entity: alt text v kombinácii s nadpisom, popisom (<figcaption>) a okolitým textom pomáha modelom správne zaradiť entitu (produkt, osobu, miesto).
• Zero-click odpovede: dobre popísané obrázky sa môžu objaviť v karuseloch, odpovediach alebo multimodálnych výsledkoch.

Kedy použiť aký typ alt textu: rozhodovací strom

1. Je obrázok čisto dekoratívny? Áno → alt="". Nie → pokračuj.
2. Nesie obrázok informáciu, ktorú inde na stránke neuvádzate? Áno → stručne opíšte informáciu v alte.
3. Je to ovládací prvok (tlačidlo/odkaz)? Použite alt vyjadrujúci akciu/účel, nie vizuál (napr. „Odoslať objednávku“).
4. Je obrázok zložitý (graf, schéma, infografika)? Alt stručný; detail do textu v okolí, <figcaption> alebo odkaz na rozšírený opis.

10 zásad písania kvalitného alt textu

1. Buďte informatívni, nie popisní: namiesto „fotka muža“ použite „Onkológ pri ultrazvukovom vyšetrení štítnej žľazy“.
2. Optimalizujte pre úlohu používateľa: pri produktovej fotke zvýraznite vlastnosti dôležité pre rozhodovanie (materiál, farba, varianta).
3. Vynechajte redundantné slová ako „obrázok“, „fotka“, „ikona“ – čítačky to oznámia samy.
4. Krátko, ale nie za každú cenu: cieľ 80–140 znakov. Pri potrebe dlhšieho vysvetlenia použite okolitý text.
5. Neplňte kľúčovými slovami: prirodzenosť a presnosť majú prednosť pred SEO spamom.
6. Píšte v kontexte: alt má nadväzovať na nadpis, odsek a anchor text.
7. Uveďte unikátnu informáciu: ak nadpis hneď nad obrázkom už vraví to isté, alt zbytočne nekopírujte.
8. Lokalizácia: píšte v jazyku stránky; pre multijazyčné weby používajte lokalizované alty.
9. Dostupnosť vs. estetika: priorita je informatívnosť, nie marketingové frázy.
10. Konzistentný štýl: interné smernice pomôžu zjednotiť dĺžku a tón.

Špecifiká podľa typu obrázka

• Produkt: „Dámske kožené topánky, model Aurora, hnedé, nízky opätok, šnurovanie.“
• Schéma/diagram: alt krátky („Architektúra mikroservisov e-shopu“), detailný popis do textu alebo <figcaption>.
• Graf: alt informuje o závere („Tržby Q3 2025 +18 % medziročne“); dátové body uveďte v tabuľke pod grafom.
• Mapy: alt stručne: „Mapa predajní na Slovensku – 24 lokalít“; zoznam adries v texte.
• Formulárové ikony: ak sú len dekoratívne, alt=""; ak sú tlačidlom, alt „Vyhľadať“ namiesto „lupa“.

Práca s dekoratívnymi a redundantnými obrázkami

Pri vizuálnych prvkoch bez informatívnej hodnoty použite alt="". Ak je obrázok duplikátom textu v tesnej blízkosti (napr. logo vedľa názvu firmy v <h2>), zvážte prázdny alt, aby čítačky nečítali tie isté informácie dvakrát.

Komplexné vizuály: rozšírené opisy

• Alt = zhrnutie: „Infografika: 5 krokov migrácie CMS“.
• Detail = v texte: za obrázkom vložte odsek s kľúčovými údajmi či krokmi.
• Figure a figcaption: <figure> so zmysluplným <figcaption> dopĺňa alt.

Technické osvedčené postupy (HTML a ARIA)

• <img src="..." alt="..."> – nikdy nenechávajte alt chýbať.
• Pre dekoratívne SVG vložené inline použite aria-hidden="true"; ak je informatívne, doplňte <title> a prípadne <desc> v SVG.
• Pre <picture> ostáva alt na vnorenom <img>.
• Lazy-loading (loading="lazy") neovplyvňuje alt; vyhnite sa skrývaniu obrázkov cez display:none pri obsahových vizuáloch.

Alt text vs. iné metadáta: čomu čo patrí

• Alt: sémanticky nevyhnutný popis pre prístupnosť a pochopenie.
• Title atribút: voliteľný; neprezentuje sa spoľahlivo čítačkami.
• Open Graph/Twitter Cards: určujú náhľady na sociálnych sieťach; nenahrádzajú alt.
• File name a data-*: sekundárne signály; nie náhrada altu.

Kontrola kvality a testovanie

• Manuálny audit: vypnite načítanie obrázkov v prehliadači – stránka musí dávať zmysel.
• Čítačka obrazovky: otestujte aspoň kritické stránky (NVDA/VoiceOver).
• Automatizované nástroje: linterné skripty CI, ktoré hlásia chýbajúci alt alebo príliš dlhý alt.

Workflow a správa v CMS

• Povinné polia: nastavte alt ako povinný pre typy obsahu, kde je to žiaduce.
• Šablóny a komponenty: v dizajn systéme definujte pravidlá altu na úrovni komponentu (napr. CardImage: vyžaduje alt).
• Lokalizácia: pre viac jazykov ukladajte alt texty samostatne podľa jazykového kódu.
• Školenie editorov: interné príručky s príkladmi dobrých a zlých altov.

Automatizácia a AI: prínosy a riziká

• Generatívny návrh: AI môže navrhnúť alt ako štartovací bod, no editor ho musí skontrolovať.
• Vyhnite sa halucináciám: AI nesmie dopĺňať neexistujúce údaje (model, rok, ceny).
• Škálovanie: pre veľké galérie použite pravidlá: kontext z názvu položky + typ + kľúčová vlastnosť.

Najčastejšie chyby (anti-patterns)

• Chýbajúci alt na informatívnych obrázkoch.
• Duplicitné frázy: „Obrázok zobrazuje…“; zbytočne predlžuje.
• Keyword stuffing: nečitateľné a neetické.
• Alt = súborový názov: „IMG_0231.jpg“ nemá hodnotu.
• Opis nie toho, čo je dôležité: farba obalu namiesto názvu liečiva.

Praktické príklady správne/nesprávne

• Nesprávne: <img alt="produkt">
• Správne: <img alt="Elektrická zubná kefka SonicCare X200, biela, 2 nástavce">
• Nesprávne: <img alt="graf">
• Správne: <img alt="Graf: návštevnosť blogu rástla od januára do septembra z 8k na 32k návštev"> a pod grafom tabuľka dát.
• Nesprávne: <img alt="logo">
• Správne: ak je logo odkazom domov, alt „Domov“; ak len dekorácia, alt="".

Špecifiká pre e-commerce a marketplace

• Varianty: alt musí odrážať vybranú variantu (farba/veľkosť).
• Viac fotografií: prvá – sumár; detaily – špecifiká (spätné vrecko, textúra kože).
• UGC fotky: alt nech je neutrálny a faktický; vyhnúť sa hodnotiacim prívlastkom.

Štýlová príručka (mini-guidelines pre tím)

• Dĺžka: 80–140 znakov; výnimky pri potrebe.
• Tón: faktický, bez marketingových superlatívov.
• Poradie informácií: entita → kľúčový atribút → kontext použitia.
• Diakritika: zachovávať; je súčasťou významu.

Checklista pred publikáciou

• Má každý informatívny obrázok alt?
• Je alt stručný, vecný a unikátny?
• Nie je alt duplicitný s okolitým textom bez pridanej hodnoty?
• Sú dekoratívne obrázky s alt=""?
• Majú grafy a schémy rozšírený opis v texte?
• Je alt lokalizovaný podľa jazykovej verzie?

Implementačné tipy pre vývojárov

• V komponentoch vyžadujte prop alt a validujte neprázdnosť tam, kde to dáva zmysel.
• V CI nasadzujte audity, ktoré hlásia chýbajúce alebo generické alty („image“, „photo“).
• Pri generovaní statických stránok z dát mapujte pole alt z CMS; neodvodzujte z názvu súboru.

Zhrnutie

Alt text je drobný atribút s veľkým dopadom: sprístupňuje obsah, zlepšuje pochopiteľnosť pre vyhľadávače a multimodálne modely a zvyšuje použiteľnosť stránok. Kľúčom je písať ho pre ľudí – jasne, kontextovo a s dôrazom na informáciu, nie na vizuálny šum. So zrozumiteľnými tímovými pravidlami a ľahkou automatizáciou sa dá kvalita altov udržať aj vo veľkom rozsahu.