Zpřístupnění obrázků

Obrázky jsou skvělý způsob, jak zaujmout. Stránky ale máme tvořit tak, aby je mohl používat každý, i lidé, kteří obrázky nevidí. Mnoho nevidomých a slabozrakých lidí používá předčítač obrazovky: program, který jim stránku čte nahlas. V tomto cvičení jim náš obrázek zpřístupníme.

Toto je obrázek, který jsme vytvořili v minulém cvičení:

<img src="/learn/html/cats.webp">

Předčítač nevidí, co je na obrázku. U obrázku bez popisu obvykle přečte aspoň název souboru, třeba „cats tečka webp“, a to moc nepomůže. Proto obrázkům přidáváme atribut alt (z anglického alternative text, alternativní text) s popisem obrázku:

<img src="/learn/html/cats.webp" alt="Šest fotek koček domácích">

Předčítač pak přečte popis. Dobrý popis krátce říká, co je na obrázku důležité.

Některé obrázky jsou čistě dekorativní, například ozdobný proužek nebo vzor v pozadí, a nic nesdělují. Těm dáme atribut alt s prázdnou hodnotou a předčítače je pak přeskočí:

<img src="/learn/html/ozdoba.webp" alt="">

Alternativní text má ještě jedno využití: prohlížeč ho zobrazí, když se obrázek nepodaří načíst. Až popis napíšete, můžete si to vyzkoušet: udělejte v názvu souboru v src překlep, klikněte na Spustit a místo fotky uvidíte svůj popis. Pak název zase opravte.