Good Mood

Page Content

Názvosloví

Existuje několik pojmů, které se běžně používá k popisu ALT text. Mohou být použity v různých kontextech, a to i v rámci tohoto webu.,

• alt text-koncept přidání čtečky obrazovky Přátelský text alternativní popis obrazu. To lze implementovat odlišně napříč typy dokumentů.
• alt atribut (HTML) – v HTML je text ALT vložen do atributu ALT v tagu IMG.
• ALT “ Tag – – zkratka pro atribut ALT.

Demo alt textu

účel

text ALT přidává textový popis obrázku na webové stránce a měl by být použit pro všechny obrázky, grafické kulky a grafická horizontální pravidla.,

ALT text je přístupný uživatelům Screen reader, aby jim poskytl textový ekvivalent obrázků. Ve vizuálních prohlížečích, jako je Firefox, se text ALT zobrazí, když je obrázek poškozen nebo když byly všechny obrázky zakázány.

WCAG Guideline

WCAG 2.0 Guideline 1.1.1.—“Veškerý netextový obsah, který je prezentován uživateli, má textovou alternativu, která slouží ekvivalentnímu účelu.“

příklady tlačítek obrazu

zvažte obrázky pro sekce hypotetické vzdělávací místo, pod kterým všechny obsahují dekorativní text.,
Poznámka: jakýkoli text použitý na obrázku by se měl řídit pokyny pro čitelnost a kontrast.

Screen Reader Výstup S ALT Tag

Pokud se obrázky se nepodařilo načíst, ALT text vám ukáže, jaké obrázky by řekl, že v prohlížeči jako Firefox.

výstup čtečky obrazovky bez značky ALT

bez textu ALT nikdo nemůže vědět, jaký by byl obsah obrázku.

Provádění Atributu ALT

Níže jsou uvedeny některé příklady, jak, jak ALT text může být provedena v závislosti na kontextu.

obraz George Washingtona

Zobrazit kód

implementovat text ALT jako atribut ve značce IMG. Viz příklad níže.

Poznámka: doporučená délka textu ALT je asi 125 znaků. To ubytuje JAWS Screen reader alt textové pole. To však není v rámci pokynů WCAG.

Popisky Obrázků vs. ALT Text

veškeré informace o snímku, jako je například informace o autorských právech, zdroj obrazu nebo další informace by měly být umístěny v popisku pod obrázkem, není v ALT text. Viz příklad níže.

Titulek: Obraz „Washington a Lafayette ve Valley Forge“ John Ward Dancemor z roku 1907. Obrázek s laskavým svolením Knihovny Kongresu.,

Logos

Pro loga, zejména loga, které se opakují, je dostačující, aby zjistit, které logo je, ne nutně plně popsat

Nesprávné Použití ALT Text

nemělo by se používat k:

• zavést popis textu,
• poskytovat autorská práva nebo zdrojové informace o obrázku nebo
• zprostředkovat doplňující informace o grafice.,
• zavést hledané výrazy (to lze provést dobrým použitím nadpisů).

Prázdný Alt Text pro Dekorativní Obrázky

Některé obrázky jsou použity pouze pro rozvržení účely nebo pro zvýšení obsahu pro vidící uživatele a poskytnout žádný obsah.

ALT tag pro tyto obrazy mohou být prázdné ( <alt= „“ > nebo <alt=“ „>) tak, aby obrazovka čtenáři budou ignorovat úplně.,

níže uvedený příklad použije ukázkový obrázek panelu nástrojů rainbow, následovaný některými přístupnými a nepřístupnými příklady kódu.

Rainbow Tool Bar

Předpokládejme, že webová strana byla navržena s Rainbow toolbar slouží k oddělení kusů textu.

Poznámka: atribut ALT s prostorem znak je považován za méně správný, ale může být jediná možnost povoleno v některých content management systémů.

Stručné Alt Text

Pokud textový popis je již uveden na obrázku v hlavním textu stránky, pak ALT tag může jen poskytnout přehled o obraz, ne úplný popis.,

viz složité obrázky pro příklady toho, jak to může být použit v různých situacích.

příklad textu s obrázkem

níže je obraz molekuly nasycených tuků s molekulami uhlíku 18. Všimněte si, že jednotlivé vazby mezi prvky činí uhlíkový řetězec relativně rovný.,

Odkazy na podrobné Popisy

V některých případech může být nutné přidat odkaz na delší popis obrazu, a to zejména v případech, kdy obrázky jsou použity k zprostředkovat významný obsah. Existuje několik způsobů, jak toho lze dosáhnout-včetně značky LONGDESC, D-link nebo zjevnějšího odkazu na delší popis. Příklady

odkaz na text titulku

pokud jsou informace kritické, může být nejlepším řešením zjevný odkaz na titulek. Tato metoda poskytuje nejjasnější indikaci, že je k dispozici delší popis.,

Zobrazit Rozšířená Textový Popis

D-odkazy

Někteří odborníci obhajují používání D-link pro signál přítomnosti delší textový popis. Někteří uživatelé si však tuto úmluvu nemusí být vědomi. Tato metoda se nejlépe používá k poskytování informací, které jsou čistě doplňkové.

D

Longdesc atribut

jedná se o atribut, který je skrytý ve vizuálních prohlížečích, ale rozpoznán některými čtečkami obrazovky. LONGDESC je nejlepší pro poskytování dalších detailů, které vylepšují obsah, ale nejsou kritické., Je třeba poznamenat, že LONGDESC má neúplnou podporu mezi vizuálními prohlížeči i čtečkami obrazovky a je zastaralý v HTML5.

Odkazy a Tlačítka

Pro obrázky použit jako navigační prvky pro spuštění funkce, jako je tisk, odesílání nebo ukládání, ALT text by měl popisovat cíl nebo funkci, ne obraz.

Klikací vs. Non-Klikací Penn State Štít

Když Penn State štít se používá na Webové stránce, ALT text použít, závisí na tom, zda je klikací (tj. odkazy na Penn State domovskou stránku), nebo ne.,

Pokud Penn State štít, obraz je používán k poskytování klikací odkaz na domovskou stránku, ALT text by měl uvést cíl (tj. ALT=“Penn State úvodní Stránka“) Všimněte si, že na IMG tag je vložen do tagu pro odkaz.

Poznámka: Pokud štít nelze kliknout, může být text ALT „Penn State“nebo“ Penn State shield“.

atribut titulu pro tipy nástrojů

atribut názvu textu IMG lze použít k vygenerování popisku pro viděné uživatele. Ale prosím, uvědomte si to.,

• atribut titulu se ve většině čteček obrazovky ve výchozím nastavení nečte nahlas.
• text ALT se ve většině prohlížečů obvykle nezobrazuje jako tip nástroje.

Pokud je pro viděné uživatele zapotřebí tip nástroje, lze použít atribut TITLE I ALT se stejnými informacemi, aby se zajistilo, že stejné informace budou doručeny oběma divákům.

viz tento příklad níže

oblíbené tlačítko srdce s tipem nástroje

zvažte verzi obrazu srdce, pod kterou lze v rozhraní použít k výběru oblíbených položek (např. oblíbené skladby nebo e-knihy).,

Obě ALT text a atribut TITLE jsou „Oblíbené“

Zobrazit Kód