Page Content
Basic Techniques
- Terminology
- Synopsis
- Demo of ALT Text
- Implementing the ALT Attribute
- Image Caption vs., ALT Szöveg
- Helytelen Használ
- Üres ALT Szöveg
Összetett Képek
- Összefoglaló ALT Tag Leírások
- Kiterjesztett Leírások
- Egyéb Technikák (Új Oldal)
Képek Linkek
- Linkek, Gombok
- a CÍM Tippek
- Kombinált Kép/Szöveg Link
Terminológia
több feltételek, melyek gyakran használják, hogy leírják az ALT szöveg. Ezeket fel lehet használni a különböző kontextusokban, még ezen a weboldalon.,
- ALT text-a koncepció hozzá egy képernyőolvasó Barát szöveg alternatív leírása a kép. Ez a dokumentumtípusok között eltérő módon valósítható meg.
- ALT attribútum (HTML) – a HTML-ben az ALT szöveg beillesztésre kerül az ALT attribútumba az IMG címkén belül.
- ALT ” Tag ” – rövidített hivatkozás az ALT attribútumra.
alt szöveg demója
cél
az ALT szöveg szöveges leírást ad egy weboldalon lévő képhez, amelyet minden képhez, grafikus golyóhoz és grafikus vízszintes szabályhoz fel kell használni.,
az ALT szöveget a Képernyőolvasó felhasználók elérik, hogy képekkel egyenértékű szöveget kapjanak. A vizuális böngészőkben, például a Firefoxban, az ALT szöveg akkor jelenik meg, amikor egy kép megszakad, vagy ha az összes kép le van tiltva.
WCAG Guideline
WCAG 2.0 Guideline 1.1.1.—”A felhasználónak bemutatott nem szöveges tartalomnak van egy szöveges alternatívája, amely egyenértékű célt szolgál.”
Image Button Examples
Tekintsük a képeket szakaszok egy hipotetikus oktatási hely, amely alatt minden tartalmaz dekoratív szöveget.,
Megjegyzés: A képen használt szövegeknek olvashatósági és kontraszt-irányelveket kell követniük.
képernyőolvasó kimenet alt tag
Ha a képek nem töltődnek be, az alt szöveg megmutatja, hogy a képek mit mondtak volna egy olyan böngészőben, mint a Firefox.
Képernyőolvasó kimenet ALT címke nélkül
az ALT szöveg nélkül senki sem tudja, mi lett volna a kép tartalma.
megjegyzés: a Képernyőolvasó ötször mondja a” képet”.,
az alt attribútum végrehajtása
az alábbiakban néhány példa arra, hogy az alt szöveg hogyan valósítható meg a kontextustól függően.
George Washington Painting
A Kód megtekintése
implementálja az ALT szöveget attribútumként az IMG címkében. Lásd az alábbi példát.
<img src="https://accessibility.psu.edu/images/imageshtml/CampLogo.gif" alt="Camp 2011 logo">
egyéb attribútumok, például a magasság és a szélesség továbbra is szerepelhetnek.,
Megjegyzés: Az ajánlott ALT szöveg hossza körülbelül 125 karakter. Ez a JAWS képernyőolvasó ALT szövegmezőjét tartalmazza. Ez azonban nem tartozik a WCAG irányelvei közé.
képaláírások vs. ALT szöveg
a képpel kapcsolatos bármilyen információt, például szerzői jogi információkat, képforrást vagy extra információkat a kép alatti feliratszövegbe kell helyezni, nem pedig az ALT szövegbe. Lásd az alábbi példát.
felirat: “Washington és Lafayette at Valley Forge” John Ward Dunsmore festménye 1907-től. Kép jóvoltából a Library of Congress.,
logók
logók, különösen az ismétlődő logók esetében elegendő azonosítani, hogy melyik logó, nem feltétlenül teljes mértékben leírni
<img src="https://accessibility.psu.edu/images/imageshtml/CampLogo.gif" alt="Camp 2011 logo"alt szöveg helytelen használata
nem használható:
- tooltip szöveg bevezetésére,
- szerzői jogi vagy forrásinformációk megadására egy képről, vagy
- a grafikával kapcsolatos kiegészítő információk továbbítására.,
- keresési kifejezések bevezetése (ezt a címsorok jó használatával lehet megtenni).
üres Alt szöveg dekoratív képekhez
egyes képeket kizárólag elrendezési célokra használnak, vagy a tartalom növelésére a látó felhasználók számára, tartalom nélkül.
ezeknek a képeknek az ALT-címkéje üres lehet (<alt= “” > vagy <alt=” >), így a képernyőolvasók teljesen figyelmen kívül hagyják őket.,
az alábbi példa egy szivárvány eszköztár mintaképét fogja használni, amelyet néhány hozzáférhető és elérhetetlen kódpéldány követ.
Rainbow Tool Bar
tegyük fel, hogy egy webes oldalt szivárvány eszköztárral terveztek, amely a szövegdarabok elválasztására szolgál.
megjegyzés: a szóköz karakterrel rendelkező ALT attribútum kevésbé helyesnek tekinthető, de lehet, hogy az egyetlen lehetőség, amely bizonyos tartalomkezelő rendszerekben megengedett.
kevésbé használható eszköztár Képkód
<img src="https://accessibility.psu.edu/images/imageshtml/examples/spectrumtooltip.gif" alt="A Rainbow line used as toolbar" >
Képernyőolvasó azt mondja: “szivárvány vonal, mint eszköztár.,”Ha tizennyolc szivárvány eszköztár van, a Képernyőolvasó ezt tizennyolc alkalommal megismétli. Ez a szöveg irreleváns a Képernyőolvasó felhasználó számára, és növeli az olvasási időt.
nincs ALT Tag
<img src="https://accessibility.psu.edu/images/imageshtml/examples/spectrumtooltip.gif" >
ALT címke nélkül a Képernyőolvasó azt mondja: “kép”, ami arra készteti a felhasználókat, hogy eltűnjenek valami fontosról.
Tömör Alt szöveg
Ha egy szöveges leírás már rendelkezésre áll egy képhez az oldal fő szövegében, akkor az ALT címke csak összefoglalja a képet, nem pedig teljes leírást.,
lásd komplex képek példákat, hogyan lehet ezt használni a különböző helyzetekben.
példa szöveg képpel
Az alábbiakban egy telített zsírmolekula képe látható, 18 szénmolekulával. Vegye figyelembe, hogy az elemek közötti egyetlen kötés viszonylag egyenesvé teszi a szénláncot., 
Hozzáférhető Összefoglaló ALT Tag
<...alt="saturated fat molecule" >
Kevésbé Hozzáférhető, Bőbeszédű ALT Tag
<...alt="image of straight saturated fat with 18 carbons" >
MEGJEGYZÉS: Ez a fajta leírás lenne hasznos, ha szükség van rá, hogy megértsd a tartalom, bár egy jobb stratégiát lehet, hogy tartalmazza a leírás a Web oldal maga, vagy link egy hosszabb leírás, mint a következő szakasz tárgyalja.,
linkek a kiterjesztett leírásokhoz
bizonyos esetekben szükség lehet egy link hozzáadására egy kép kiterjesztett leírásához, különösen azokban az esetekben, amikor a képeket jelentős tartalom közvetítésére használják. Számos módon lehet ezt elérni—beleértve a LONGDESC címkét, a D-linket vagy egy nyílt linket a hosszabb leíráshoz. Lásd alább a példákat
link Feliratszöveghez
Ha az információ kritikus, akkor egy nyílt feliratozási link lehet a legjobb megoldás. Ez a módszer a legtisztább jelzést adja arra, hogy hosszabb leírás áll rendelkezésre.,
bővített szöveges leírás megtekintése
d-linkek
egyes szakértők a D-link használatát javasolják egy kiterjesztett szöveges leírás jelenlétének jelzésére. Előfordulhat azonban, hogy egyes felhasználók nem ismerik az egyezményt. Ezt a módszert leginkább a tisztán kiegészítő információk szolgáltatására használják.
D
LONGDESC attribútum
Ez egy attribútum, amely rejtve van a vizuális böngészőkben, de egyes képernyőolvasók felismerik. LONGDESC a legjobb, hogy extra részlet, amely növeli a tartalmat, de nem kritikus., Meg kell jegyezni, hogy a LONGDESC hiányos támogatást nyújt mind a vizuális böngészők, mind a képernyőolvasók körében, és elavult a HTML5-ben.
tekintse meg a LONGDESC kódot
<img src="https://accessibility.psu.edu/images/imageshtml/examples/runningfootbalplayer.jpg" alt="photo of football player" width="102" height="154" longdesc="dfootball.html" >
LONGDESC szöveget (a dfootball.html)
Ez egy reklámfotó egy Penn State labdarúgóról, aki napsütéses napon fut a labdarúgóval egy zsúfolt labdarúgó-stadionban.,
hivatkozások és gombok
navigációs elemekként használt képeknél, amelyek olyan funkciókat indítanak el, mint a nyomtatás, feltöltés vagy mentés, az ALT szövegnek le kell írnia a rendeltetési helyet vagy funkciót, nem pedig a képet.
kattintható vs. nem kattintható Penn State Shield
Ha egy Penn State shield-t használnak egy weboldalon, a használt ALT szöveg attól függ, hogy kattintható-e (azaz linkek a Penn State kezdőlapra), vagy sem.,
Ha egy Penn State shield képet használnak a kezdőlapra mutató kattintható hivatkozás biztosítására, az ALT szövegnek meg kell jelölnie a célállomást (azaz ALT=” Penn State Home Page”), vegye figyelembe, hogy az IMG címke a link egy a címkéjébe van ágyazva.
Megjegyzés: Ha a pajzs nem kattintható, akkor az ALT szöveg lehet “Penn State “vagy”Penn State shield”.
cím attribútum eszköz tippek
a cím attribútum egy IMG szöveg lehet használni, hogy létrehoz egy tooltip látó felhasználók számára. De kérjük, vegye figyelembe, hogy.,
- a cím attribútum alapértelmezés szerint nem olvasható hangosan a legtöbb képernyőolvasóban.
- az ALT szöveg általában nem jelenik meg eszköz tippként a legtöbb böngészőben.
ha szerszámcsúcsra van szükség a látó felhasználók számára, akkor mind a cím, mind az ALT attribútum ugyanazzal az információval használható annak biztosítására, hogy ugyanazt az információt mindkét közönség megkapja.
lásd ezt a példát alább
Kedvencek szív gomb eszköz Tip
fontolja meg egy változata a szív alábbi kép, amely lehet használni egy felületen, hogy válassza ki a kedvenc elemek (például kedvenc dalok vagy e-könyvek).,
mind az ALT szöveg, mind a cím attribútum “Kedvencek”
A Kód megtekintése
<img src="https://accessibility.psu.edu/images/imageshtml/heart.png" alt="Favorites" title="Favorites"> 
