Există mai mulți termeni care sunt frecvent utilizate pentru a descrie ALT text. Ele pot fi utilizate în contexte diferite, chiar și în cadrul acestui site web.,ALT text-conceptul de a adăuga un cititor de ecran prietenos text Descriere alternativă a unei imagini. Acest lucru poate fi implementat diferit pe tipuri de documente.
alt attribute (HTML) – în HTML, textul ALT este introdus în atributul ALT din eticheta IMG.
ALT „Tag” – referință prescurtată la atributul ALT.
Demo de ALT Text
scop
textul ALT adaugă o descriere text la o imagine pe o pagină Web, și ar trebui să fie utilizat pentru toate imaginile, marcatori grafice, și reguli grafice orizontale.,
ALT text este accesat de utilizatorii cititorului de ecran pentru a le oferi un text echivalent cu imagini. În browserele vizuale, cum ar fi Firefox, textul ALT este afișat atunci când o imagine este ruptă sau când toate imaginile au fost dezactivate.
orientarea WCAG
orientarea WCAG 2.0 1.1.1.—”Tot conținutul non-text care este prezentat utilizatorului are o alternativă text care servește scopului echivalent.”
Exemple de butoane de imagine
luați în considerare imaginile pentru secțiuni un site de educație ipotetic sub care toate conțin text decorativ., Notă: orice text utilizat într-o imagine trebuie să respecte regulile de lizibilitate și contrast.
Cititor de Ecran de Ieșire Cu ALT Tag-ul
Dacă imaginile nu se încarcă, ALT text va arăta ce imagini ar fi spus într-un browser cum ar fi Firefox.
ieșire cititor de ecran fără etichetă ALT
fără textul ALT, nimeni nu poate ști care ar fi fost conținutul imaginii.notă: cititorul de ecran spune „imagine” de cinci ori.,
de punere în Aplicare Atributul ALT
mai Jos sunt câteva exemple de modul cum ALT text pot fi puse în aplicare în funcție de context.
George Washington pictura
Vizualizați codul
implementați textul ALT ca atribut în eticheta IMG. A se vedea exemplul de mai jos.
alte atribute, cum ar fi înălțimea și lățimea pot fi încă incluse.,notă: o lungime recomandată a textului ALT este de aproximativ 125 de caractere. Aceasta găzduiește câmpul de text alt al cititorului de ecran JAWS. Cu toate acestea, acest lucru nu se încadrează în liniile directoare WCAG.
legende imagine vs.Text ALT
orice informație despre imagine, cum ar fi informații privind drepturile de autor, sursa imaginii sau informații suplimentare trebuie plasată în textul legendă de sub imagine, nu în textul ALT. Vezi exemplul de mai jos.
legendă: pictura” Washington și Lafayette LA Valley Forge ” De John Ward Dunsmore din 1907. Pentru imagine, mulțumim Bibliotecii Congresului., pentru logo-uri, în special logo-urile care se repetă, este suficient să se identifice ce logo este, nu neapărat să se descrie complet
textul trebuie utilizat numai pentru a descrie o imagine.
nu trebuie folosit pentru:
introducerea textului tooltip,
furnizarea de informații privind drepturile de autor sau sursa despre o imagine sau
transmiterea de informații suplimentare despre Grafic.,
introduceți termenii de căutare (acest lucru se poate face printr-o bună utilizare a titlurilor).
text Alt gol pentru imagini Decorative
unele imagini sunt utilizate exclusiv în scopuri de aspect sau pentru a îmbunătăți conținutul pentru utilizatorii văzători și nu oferă conținut.
tag-ul ALT pentru aceste imagini pot fi goale ( <alt= „” > sau <alt=” „>), astfel încât cititorii de ecran le va ignora cu totul.,
exemplul de mai jos va folosi o imagine eșantion a unei bare de instrumente rainbow, urmată de câteva exemple de cod accesibile și inaccesibile.
Rainbow Tool Bar
Să presupunem că o parte Web a fost proiectată cu o bară de instrumente rainbow folosită pentru a separa bucăți de text.
notă: atributul ALT cu caracterul spațial este considerat mai puțin corect, dar poate fi singura opțiune permisă în unele sisteme de gestionare a conținutului.
mai puțin utilizabil bara de instrumente Codul imaginii
<img src="https://accessibility.psu.edu/images/imageshtml/examples/spectrumtooltip.gif" alt="A Rainbow line used as toolbar" >
Screen reader spune „Rainbow line ca o bară de instrumente.,”Dacă aveți optsprezece bare de instrumente rainbow, cititorul de ecran ar repeta acest lucru de optsprezece ori. Acest text este irelevant pentru un utilizator cititor de ecran și crește timpul de citire.
fără etichetă ALT, cititorul de ecran spune” imagine”, ceea ce lasă utilizatorii să se întrebe dacă le lipsește ceva important.
text alt concis
dacă o descriere de text este deja furnizată pentru o imagine în textul principal al paginii, atunci eticheta ALT poate oferi doar un rezumat al imaginii, nu o descriere completă.,a se vedea imagini complexe pentru exemple de modul în care acest lucru poate fi utilizat în situații diferite.
exemplu de Text cu imagine
mai jos este o imagine a unei molecule de grăsime saturată cu 18 molecule de carbon. Observați că legăturile unice dintre elemente fac lanțul de carbon relativ drept.,
Sinteză Accesibilă ALT Tag-ul
<...alt="saturated fat molecule" >
mai Puțin Accesibile, Verbose ALT Tag-ul
<...alt="image of straight saturated fat with 18 carbons" >
NOTĂ: Acest tip de descriere ar fi util dacă ar fi fost necesar pentru a înțelege conținutul, deși o strategie mai bună ar fi să includă descrierea din pagina de Web în sine, sau de la link-ul de la o descriere mai lungă după cum sa discutat în secțiunea următoare.,în unele cazuri, poate fi necesar să adăugați un link la o descriere extinsă a unei imagini, în special în cazurile în care imaginile sunt utilizate pentru a transmite conținut semnificativ. Există mai multe moduri în care acest lucru poate fi realizat—inclusiv o etichetă LONGDESC, un D-link sau un link mai deschis la descrierea mai lungă. A se vedea mai jos pentru exemple
Link la textul legendă
dacă informația este critică, atunci o legătură subtilă legendă poate fi cea mai bună soluție. Această metodă oferă cea mai clară indicație că este disponibilă o descriere mai lungă.,
vizualizați descrierea extinsă a textului
d-links
unii experți susțin utilizarea unui D-link pentru a semnala prezența unei descrieri extinse a textului. Cu toate acestea, este posibil ca unii utilizatori să nu fie conștienți de convenție. Această metodă este utilizată cel mai bine pentru a furniza informații care sunt pur suplimentare.
D
Atributul LONGDESC
Acesta este un atribut care este ascuns în visual browsere, dar recunoscut de unele cititoare de ecran. LONGDESC este cel mai bun pentru a oferi detalii suplimentare care îmbunătățesc conținutul, dar nu este critică., Trebuie remarcat faptul că LONGDESC are suport incomplet atât în rândul browserelor vizuale, cât și al cititorilor de ecran și este învechit în HTML5.
Vezi LONGDESC Cod
<img src="https://accessibility.psu.edu/images/imageshtml/examples/runningfootbalplayer.jpg" alt="photo of football player" width="102" height="154" longdesc="dfootball.html" >
LONGDESC Text (în dfootball.html)
aceasta este o fotografie publicitară a unui jucător de fotbal Penn State care rulează cu fotbalul într-un stadion de fotbal aglomerat într-o zi însorită.,pentru imaginile folosite ca elemente de navigație pentru a declanșa funcții precum imprimarea, încărcarea sau salvarea, textul ALT trebuie să descrie destinația sau funcția, nu imaginea.
Clickable vs. Non-Clickable Penn State Shield
când un Penn State shield este utilizat pe o pagină web, textul ALT utilizat depinde de faptul dacă este clickable (adică link-uri către pagina de pornire Penn State) sau nu.,
dacă o imagine Penn State shield este utilizată pentru a furniza un link cu clic către pagina de pornire, textul ALT ar trebui să indice destinația (adică ALT=”Penn State Home Page”) rețineți că eticheta IMG este încorporată într-o etichetă A pentru link.Notă: Dacă scutul nu poate fi apăsat, atunci textul ALT poate fi „Penn State” sau „Penn State shield”.
titlu atribut pentru sfaturi instrument
atributul titlu al unui text IMG poate fi folosit pentru a genera un tooltip pentru utilizatorii cu deficiențe de vedere. Dar vă rugăm să fiți conștienți de faptul că.,
atributul TITLE nu este citit cu voce tare în mod implicit în majoritatea cititoarelor de ecran.
textul ALT nu este de obicei afișat ca un sfat de instrument în majoritatea browserelor.
dacă este necesar un sfat de instrument pentru utilizatorii cu deficiențe de vedere, atunci atât un titlu, cât și un atribut ALT cu aceleași informații pot fi utilizate pentru a se asigura că aceleași informații sunt livrate ambelor segmente de public.
A se vedea acest exemplu de mai jos
butonul inima favorite cu vârful instrument
luați în considerare o versiune a imaginii inima de mai jos, care pot fi utilizate într-o interfață pentru a selecta elementele preferate (de exemplu, melodii preferate sau e-carti).,
