Ultimátní průvodce k psaní efektivního alternativního textu pro přístupnost a SEO

Pište alt text jako stručný, popisný větu, který vysvětluje, co obrázek ukazuje a proč je důležitý pro lidi. Pro každý obrázek pomáhá jasný popis asistenčním technologiím předat kontext uživatelům, kteří spoléhají na čtečky obrazovky.

Alt text také podporuje viditelnost ve vyhledávání. Umožňuje vyhledávačům pochopit obsah na vašem webu a indexovat obrázky spojené s okolní popisem. Dobře zpracovaný popis může umožnit tisíc vyhledávání a propojit uživatele s správnými produkty nebo funkcí. Dobrý alt text přispívá k přístupnosti, posiluje uživatelský zážitek a pomáhá vyhledávacím signálům sladit s kontextem stránky. Udržujte jazyk jednoduchý, vyhněte se nepořádku a nechte obrázek popisovat sám sebe v kontextu stránky.

Rada: Pro každý obrázek napište specifický popis, který uvádí předmět, akci a kontext. Pro produkty uveďte název produktu, barvu a hlavní funkci. Používejte přesné termíny místo obecných štítků a zkontrolujte dokumentaci, aby se udržela konzistence s obsahovou strategií webu. Nejúčinnější alt text obohacuje stránku místo opakování toho, co je již uvedeno v okolní textu.

Příklad pro obrázky divoké přírody: sýkorky sedící na větvi poblíž krmítka. Alt text by mohl znět: „Dva sýkorky sedící na větvi poblíž krmítka pro ptáky v zahradě.“ To jasně komunikuje scénu a pomáhá uživatelům pochopit obrázek bez jeho vidění. Některé obrázky mohou ukazovat jen malou funkci; popište její funkci v kontextu, např. „ikona sýkorky sedící na větvi v záhlaví webu.“

Na závěr proveďte rychlou kontrolu: po návrhu nechte týmového člena schválit alt text, aby se zajistila přesnost a shoda s dokumentací před publikováním na webu.

The Ultimate Guide to Writing Alt Text for Accessibility and SEO; When to use alt text

Začněte stručným, informativním alt textem, který popisuje, co obrázek předává a jeho správnou roli na stránce pro čtečky obrazovky. Tento přístup funguje pro vše od malé ikony po složitý diagram a pomáhá uživatelům pochopit okolní obsah, když obrázky nelze zobrazit.

Co popisovat, zaměřte se na obsah a funkci. Pokud je obrázek dekorativní a nepřidává žádný význam, vynechte alt text nebo nastavte prázdný atribut alt, aby nepřerušoval tok na obrazovce.

Používejte alt text pro obrázky, které předávají informace: grafy, diagramy, fotografie, loga nebo jakýkoli vizuál, který přispívá k zprávě. Pokud diagram ukazuje trendy v grafu Excel, popište osy a trendovou čáru; pokud je pouštní scéna nebo obrázek ptáka středem zájmu, uveďte předmět a prostředí. Když barvy nesou význam, zmíněte je (např. bílé pozadí s tučnou čárou). Pokud se v obrázku objevuje divoká příroda jako sýkorky, popište zvíře a jeho akci. Udržujte řádky jednoduché a vyhněte se popisu každého pixelu. Pro velké diagramy poskytněte krátký popis a odkaz na delší poznámku nebo průvodce níže.

Dva praktické příklady ilustrují řemeslo: „Pták sedící na tabuli s bílým okrajem nad pouštní krajinou“ a „Graf z Excelu ukazuje nárůst prodejů v Q2 o 14 %.“ Pokud obrázek obsahuje text, zahrňte přesná slova v uvozovkách (uvozovky kolem mluveného textu objasňují záměr). Pro dekorativní ikonu nebo tlačítko použijte krátký štítek jako „Ikona vyhledávání“ nebo „Ikona dokumentu Word“, aby se udržela plynulá navigace.

Poznámka pro tvůrce: procvičujte s různorodou sadou vizuálů a udržujte konzistentní styl. Tento průvodce podporuje informativní popisy, pomáhá prohlížečům, kteří spoléhají na čtečky obrazovky, a poskytuje jasný základ pro projekty – ať už pracujete na webu, blogu nebo produktové stránce. Používejte reálné příklady, recenzujte s kolegy a vytvořte jednoduchý excelovský list k sledování změn a odrazu stabilní funkce napříč aktivy.

V HTML se alt text objevuje v atributu alt prvku img. Automatický alt text může pomoci, ale měl by být zkontrolován na přesnost, protože kontext je důležitý. Pokud je obrázek dekorativní, vynechte alt text, aby asistenční technologie soustředila na smysluplný obsah. Spojte alt text s delším popisem na propojené stránce, když je potřeba pokrýt složité vizuály, grafy nebo diagramy.

When to Add Alt Text: Scope, Triggers, and Practical Guidelines

Přidejte stručný alt text ke každému obrázku s významem v době publikování nebo během obnovení obsahu; to pomáhá uživatelům spoléhajícím na asistenční technologie a zlepšuje SEO pro weby a vysvětluje roli obrázku v článku.

Rozsah: obrázky, které předávají informace, zahrnují objekty, diagramy, ikony a grafy; sedící prvky v záhlaví nebo v okraji, jako oranžový odznak, by měly mít alt text, který vysvětluje jejich roli a co přidávají k článku. Některé obrázky ukazují význam jen v páru s textem, takže vězte, které vyžadují alt text a které mohou být méně popisné.

Spouštěče: přidejte nebo aktualizujte alt text, když píšete nový obrázek, nahrazujete média nebo znovu používáte aktiva napříč weby; zkontrolujte, zda alt text odpovídá tomu, co je zobrazeno, zejména pro diagramy a grafy, a zajistěte, aby se shodoval s okolním tokem obsahu.

Praktické rady: udržujte alt text stručný; pro základní objekty popište funkci nebo účel v 1–2 krátkých frázích; pro diagramy vysvětlete funkci a hlavní tok; pro grafy shrňte trend nebo klíčové hodnoty; pro obrázky obsahující viditelný text uveďte tento text v popisu alt; existují případy, kdy obecný popis nestačí – tam poskytněte specifický alt, který zachytí význam; pro dekorativní obrázky nebo nejasné vizuály použijte prázdný alt nebo krátkou poznámku, která odráží jejich informační roli.

Kontrola a spolupráce: tvůrci by měli kontrolovat s editory a designéry, testovat alt text s skutečnými uživateli a ověřovat, že význam je zachován napříč zařízeními. Používejte základní kontrolní seznam k potvrzení pokrytí pro článek a zajištění silné přístupnosti.

Define Alt Text: What to Describe and What to Exclude

Popište obrázek v jedné stručné větě, která předává jeho účel, pak přidejte informativní popis, který pokrývá hlavní předměty a kontext. Zahrňte kdo nebo co se objevuje, jakékoli akce a prostředí, aby uživateli pomohlo pochopit vše zobrazené.

• Co popisovat
  • Předměty a akce: identifikujte lidi, zvířata (např. sýkorky sedící na větvi) nebo objekty jako značky, produkty nebo nástroje.
  • Text v obrázku: přepišete citace nebo krátké fráze přesně tak, jak se objevují, včetně čísel nebo dat.
  • Kontext a účel: vysvětlete, proč obrázek existuje v tomto záznamu a co předává o okolním obsahu.
  • Značka a styl: uveďte značku a poznamenejte vizuální styl nebo ikonografii, pokud to objasňuje význam.
  • Grafický obsah: pro grafy nebo grafy shrňte trend, štítky, osy a klíčové datové body.
  • Produkty a nabídky: popište produkt, model, barvu a jakékoli viditelné nabídky nebo slevy.
  • Barvy, rozložení a kompozice: zmíněte dominantní barvy, pokud ovlivňují porozumění, stejně jako jakékoli viditelné nápovědy rozložení.
  • Lokace a načasování: zahrňte, kde scéna probíhá a kdy se odehrává, pokud je to relevantní.
  • Délka a tón: udržujte to informativní a neutrální, volte jazyk, který odpovídá očekáváním uživatelů.
  • Tok a čitelnost: strukturovaný popis tak, aby čtečka obrazovky mohla přirozeně následovat, vyhněte se nesouvislým frázím.
• Co vyloučit
  • Pouze dekorativní obrázky: pokud obrázek neposkytuje žádný informační obsah, použijte prázdný atribut alt (prázdný) nebo označte jako dekorativní.
  • Přehnané detaily: přeskočte květnatý nebo redundantní jazyk, který nepomáhá porozumění.
  • Neinformativní vizuály: vyhněte se popisu hluku na pozadí nebo nesouvisející atmosféry, pokud to nemění interpretaci.
  • Irrelevantní kontext: vyloučte tangenciální témata, která nejsou viditelná v obrázku.
  • Duplicitní popisy: neopakujte informace již předané okolní textem.
• Praktické rady
  • Rady: dodržujte praktiky přátelské k WCAG a recenzujte vůči cílům přístupnosti a SEO.
  • Délka: cílte na přibližně 125–160 znaků pro standardní obrázky; dlouhé popisy mohou být potřebné pro složité diagramy nebo scény s těžkým tokem.
  • Výběr termínů: volte jazyk, který se shoduje s hlasem značky a očekáváními spotřebitelů, včetně názvů produktů a nabídek, když jsou viditelné.
  • Konzistence: udržujte stabilní styl napříč záznamy, označujte relevantní detaily jako značka, produkt a barva, kde je to vhodné.
  • Kontrola: testujte alt text rychlou recenzí, aby se zajistilo, že vysvětluje vše podstatné bez nadbytečností.
• Příklady a přístup
  • Příklad záznamu: „Sýkorky sedí na borovicové větvi za soumraku; měkká modrá obloha a jehličí kolem; viditelná nálepka značky na krmítku.“
  • Příklad grafu: „Čárový graf ukazující měsíční prodeje až do Q3, s osami označenými Příjmy (USD) a Měsíc, barevně kódovanými podle kategorie produktu.“
  • Příklad citací: „Obrázek ukazuje citát 'Nabídka na omezenou dobu' s červeným odznakem; zahrňte přesné znění, pokud to vede uživatelské akce.
  • Popisný přístup: vysvětlete vše, co by si všiml zrakově zdravý uživatel, pak ověřte s okolní průvodcem nebo recenzemi.
• Udržujte to akční
  • Shoda záznamu a popisu: každý záznam obrázku by měl mít popisný alt text, který odpovídá viditelnému obsahu a účelu.
  • Tok a stručnost: vytvářejte věty, které se čtou plynule, vyhněte se nepořádku a udržujte popis informativní.
  • Případy dlouhé formy: pro složité vizuály poskytněte delší popis, který vysvětluje vztahy a výsledky, pak shrňte stručnou větou alt.
• Rychlý kontrolní seznam
  • Vysvětluje to účel obrázku? Ano/Ne
  • Jsou popsány všechny podstatné prvky (včetně citací nebo nabídek)? Ano/Ne
  • Je dekorativní obsah označen prázdný? Ano/Ne
  • Je tón neutrální a informativní? Ano/Ne

Describe Visual Content for Screen Readers: Concrete Phrase Patterns

Začněte objektem a jeho akcí, pak přidejte kontext v stručné lince. To pomáhá čtečce pochopit scénu na první pohled a udržuje stabilní čtecí rytmus, i když je obsah složitý jako graf nebo graf.

Volte vzory podle typu obsahu: grafy a grafy, obrázky, ovládací prvky, datové tabulky a dekorativní prvky. Pro grafy uveďte metriku, časové období a trend; pro obrázky identifikujte předmět a jeho pozadí nebo detaily; a pro UI ovládací prvky uveďte štítek a akci. Používejte fráze, které čtečka může prohledat, ne dlouhé odstavce, které zamlžují význam.

V SharePointu a brandových aktivech udržujte konzistenci opětovným použitím malé sady konkrétních vzorů. Andrée, známá obhájkyně přístupného obsahu, demonstruje, jak tyto fráze spárovat s krátkými, přesnými popisky k podpoře rychlého čtení a snadného vyhledávání. Udržujte popisky přátelské k čtečkám, ne slovy plné, a upravujte pro jasnost, jak zdokonalujete svůj alt text v procesu kontroly.

Pattern	Example	Notes
Graph/Chart: object + metric + period + trend	The graph shows Q2 sales rising from 1,000 to 1,500 units during period Q2	Names the chart, metric, range in thousands if needed; avoid filler.
Image/Illustration: subject + background + details	A product photo shows the brand on a white background with packaging details	Focuses on subject and context; background clarifies placement; mention key details only.
UI control: label + action	Click “Edit” to open the item fields	Use the actual label; highlight the targeted fields; keep it actionable.
Data table: fields + values + period	The table lists fields: Sales, Region, Period; values show thousand-unit totals	Translates tabular data into a linear sentence; include the period when relevant.
Decorative/spacer: decorative element + alt status	Decorative spacer line: alt text is empty	Use empty when the element adds layout, not content; avoid describing visuals that don’t convey meaning.
Narrative caption: case + reading + search	In this case, the reader can scan the summary during reading, using search to locate key terms	Provide a quick anchor for gist and allow term-based retrieval.
People: name + role + action	Andrée reviews the chart to confirm data accuracy	Use proper names and roles to orient the reader; cap names appropriately.

SEO Considerations: Balancing Keywords Without Stuffing

Doporučení: Zaměřte se nejdříve na jasnost; zahrňte jedno primární klíčové slovo, které přesně odráží obrázek, a přidejte podpůrné termíny jen tehdy, když zlepšují význam pro uživatele. Tento průvodce poskytuje praktické rady pro spisovatele k vyvážení SEO a přístupnosti v alt textu.

V praxi by měl každý alt text fungovat tam, kde čtenáři očekávají jeho objevení, a přispívat k porozumění, ne k vyplňování prostoru. Dobře zpracovaný alt text pomáhá jak uživatelům se zdravotním postižením, tak vyhledávačům dodáním smysluplného shrnutí role obrázku v článku.

Alt text může být delší pro složité diagramy, ale udržujte jádro významu nedotčené a vyhněte se výplni.

• Rady pro primární klíčové slovo: Určete jedno relevantní klíčové slovo a umístěte ho na začátek alt textu, když to obsah obrázku umožňuje.
• Přirozený jazyk: Pište alt text jako větu nebo stručnou frázi, kterou by mohl říct uživatel; tento styl psaní zlepšuje čitelnost pro uživatele se zdravotním postižením a pomáhá vyhledávačům interpretovat kontext.
• Omezení slov: Cílte na 125 znaků nebo méně; to zabraňuje nabíjení klíčovými slovy a udržuje text čitelný, přičemž stále podporuje vyhledávací záměr.
• Výběry vědomé kontextu: Zvažte sekci a situaci; pro diagramy popište data nebo tok; pro fotografie identifikujte předmět a akci; pro ikony vysvětlete akci nebo význam.
• Důsledky odkazů a kliknutí: Pokud je obrázek odkazem, popište cíl a co se stane po kliknutí, aby uživatelům pomohlo rozhodnout se pokračovat.
• Deckorativní obrázky: Používejte prázdný atribut alt (alt="") pro vizuály, které nepřispívají žádnou informací; to minimalizuje nesmyslný šum pro čtečky obrazovky.
• Přístup kontrolního seznamu: Zacházejte s každým alt textem jako součástí procesu řízeného kontrolním seznamem ve vašem pracovním postupu; to pomáhá týmům schvalovat a sledovat změny.
• Testování a zpětná vazba: Testujte s čtečkami obrazovky, sbírejte vstupy od vývojářů a uživatelů a schvalujte změny, které zlepšují porozumění.
• Jaký je záměr: Vždy se ptejte, jaký je záměr obrázku v okolním obsahu, a zajistěte, aby alt text odrážel tento cíl bez redundance.
• Výběr slov a bílý prostor: Preferujte přesné termíny před výplní; udržujte klidný rytmus a používejte dostatek bílého prostoru kolem textu k podpoře prohledávání.

Zde k pomoci, stručný odkaz pro spisovatele: sladěte alt text s kontextem obsahu a používejte tento průvodce k zlepšení přístupnosti článku a vyvážení SEO.

Klikněte zde pro zobrazení kontrolního seznamu.

Shrnutí: Tento přístup zlepšuje čitelnost článku, podporuje uživatele se zdravotním postižením a zachovává spojení mezi alt textem a relevancí stránky, aniž by obětoval výkon.

Alt Text for Different Image Types: Photos, Diagrams, Logos, Infographics

Označte fotografie stručným, zaměřeným na předmět alt textem, který popisuje, kdo nebo co je v rámu a proč je to na stránce důležité. Pište pro uživatele asistenčních technologií a sladěte popis s blízkým textem, aby čtenáři věděli účel obrázku.

Fotografie: Začněte hlavním předmětem, pak přidejte kontext jako prostředí a akci. Udržujte délku těsnou, cílte na 90–120 znaků. Pokud se objeví hlučný nástroj nebo jiný audio signál, uveďte ho v závorkách. Pokud obrázek obsahuje řeč, zahrňte krátký úryvek citace – a uzavřete ho v uvozovkách. Příklad: „Učitel píše na tabuli, zatímco studenti poslouchají.“ Tento přístup pomáhá uživatelům znát celý okamžik a podporuje vyhledávání a navigaci. Jasný popis scény také pomáhá konzistenci štítků napříč stránkami.

Diagramy: Popište účel diagramu a tok informací, ne každý štítek. Uveďte cíl, klíčové kroky a jak se spojují. Pokud se objeví osy nebo kategorie, zmíněte je krátce (např. „x-osa: čas; y-osa: příjem“). Vyhněte se duplikování dlouhého textu z obrázku. Příklad: „Procesní tok od vstupu k výstupu se čtyřmi kroky: vstup, analýza, rozhodnutí, akce.“ Pro diagram udržujte zaměření na vztahy a výsledky.

Logo: Identifikujte značku a, pokud je to smysluplné, symboliku loga. Preferujte „Logo BrandName“ nebo „Slovní značka BrandName.“ Pokud je logo dekorativní, nechte atribut alt prázdný a nechte tabuli oznámit dekoraci uživatelům. Používejte konzistentní vzor napříč stránkami, aby uživatelé věděli, co očekávat, a mohli se spoléhat na výsledky vyhledávání k vyzdvihnutí značky.

Infografiky: Nabídněte stručné shrnutí hlavních zjištění s klíčovými čísly uvedenými v prostém jazyce. Neduplikujte dlouhý text z grafiky; vytáhněte potřebné číslice do alt textu. Pokud citát předává dopad, zahrňte ho v uvozovkách. Například: „42% nárůst adopce.“ V UI tabuli by mohl přepínač zaškrtávacího políčka přepínat krátký alt text oproti delší verzi, takže jak mysl, tak uživatelé s různými potřebami dostanou, co potřebují. V různých situacích tento přístup udržuje zájem čtenářů vysoký a zajišťuje přístupnost pro všechny uživatele; rychlý alt text by zahrnoval podstatná čísla a krátký závěr.