Popisky u obrázků a odkazů nejsou na první pohled vidět, přesto hrají klíčovou roli v přístupnosti webu. Umožňují lidem se zrakovým omezením pochopit obsah stránky, orientovat se a plnohodnotně ji používat. V článku se dozvíte, k čemu slouží alt texty u obrázků, proč nestačí jen ikona odkazu u sociálních sítí a jak popisky správně nastavit, aby vyhovovaly požadavkům přístupnosti i běžné použitelnosti.
Než se pustíte do práce s kontrastem barev, doporučujeme si nejprve projít tyto dva úvodní články, které vám poskytnou základní přehled o přístupnosti webu:
- Připravte se na novou éru přístupnosti - úvod do přístupnosti (co to vlastně znamená, proč je důležitá a koho se týká - nejen uživatelů se zdravotním omezením).
- Přístupnost – jak zkontrolovat svůj web? - praktický návod, jak si snadno ověřit, zda váš web splňuje základní pravidla přístupnosti dle legislativy.
V tomto článku si ukážeme, jak nastavit alternativní popisky k obrázkům a sociálním sítím na webu, aby odpovídal legislativě o přístupnosti.
Alternativní popisky k obrázkům
Co jsou to alternativní popisky a proč jsou důležité?
Alternativní popisek neboli alt text je textový popis, který se váže k obrázku na webu. Jeho hlavním účelem je předat význam obrázku v situacích, kdy ho uživatel nemůže vnímat vizuálně.
Komu alt popisky pomáhají?
- Lidem se zrakovým omezením – čtečky obrazovky přečtou alt text nahlas, takže se uživatel dozví, co je na obrázku.
- Lidem s vypnutým načítáním obrázků – alt text se zobrazí místo chybějícího obrázku.
- Vyhledávačům a robotům – alt text pomáhá lépe porozumět obsahu stránky a zlepšuje SEO.
Jak správně volit alt popisky?
Kromě vyplněného alt popisku je také důležité, aby měl správný tvar - tedy byl smysluplný. Je důležité si uvědomit, že alternativním popiskem máte předat informaci, co ten obrázek představuje pro někoho kdo např. vůbec obrázek nevidí. Níže je ukázka špatného a správného alternativního popisku ⬇️
| ŠPATNĚ | SPRÁVNĚ |
| ❌ "IMG_12345.jpg" -> toto je alt přebraný z názvu obrázku a je nic nevypovídající ❌ "Obrázek muže na kole" -> nepsat slovo obrázek do altu (čtečka sama rozpozná, že se jedná o obrázek) |
✅ "Muž na kole v horském terénu" |
Kde na webu nastavit alternativní popisky?
Alternativní popisek lze nastavit v každé kostičce, ve které lze nahrát obrázek (např. v kostičce Obrázek). V nastavení kostičky se u obrázku zobrazí pole Alternativní popisek, který předčítá právě čtečka obrazovky. ➡️
Popisky k sociálním sítím
Ikony odkazující na sociální sítě (např. Facebook, Instagram, YouTube) jsou běžnou součástí webu (obvykle jsou umístěné v hlavičce webu a patičce). Často jsou ale zobrazovány pouze jako vizuální ikony s odkazem bez doprovodného textu – a právě to může být problém z pohledu přístupnosti. Pokud web navštíví uživatel, který používá čtečku obrazovky, tak si sám obrázek ikony nepřečte. Pokud chybí doprovodný textový popis (alternativní text), tak čtečka obrazovky přečte jen odkaz.
Ukázka, jak může vypadat alternativní text k sociálním sítím ⬇️ Opět je důležité, aby tento popisek byl smysluplný.
SPRÁVNĚ:
✅ „Navštivte nás na Facebooku“
Kde na webu nastavit popisky?
Sociální sítě lze nastavit v hlavičce nebo pomocí kostičky Sociální sítě (tato kostička se nejčastěji dává do patičky ale lze jí umístit kamkoliv do obsahové části webu). Sociální sítě v hlavičce si nenastavíte sami (hlavička je dělaná přes šablony) - pokud tedy narazíte na to, že vám v hlavičce chybí popisky u sociálních sítí, obraťte se na nás.
V kostičce Sociální sítě si ale popisky nastavit sami můžete. V nastavení kostičky se zobrazí jednotlivé sociální sítě, u kterých lze nastavit odkaz a Pomocný text. Právě do pomocného textu se nastavuje popisek k sociálním sítím, který čtečky předčítají uživateli, který je používá. ➡️
Kontrola popisků na webu
To jestli máte vyplněný popisek u obrázku můžete jednoduše zjistit najetím myší na obrázek. Dále doporučujeme zkontrolovat přes nástroj WAVE na kontrolu přístupnosti.
Záložka Details
Pokud nemáte u některého obrázku vyplněný alternativní popis, tak na této záložce uvidíte červenou ikonku a krátký popis problému (např. „Image missing alternative text“ = Obrázek bez alternativního textu). Po kliknutí na ikonu budete přesměrování na místo výskytu, tedy k obrázku, kterému tento popisek chybí. ➡️
