alt
atribut este folosit pentru a atribui un text alternativă la un img
. Textul alternativ este utilizat oricând imaginea nu este redată și prin tehnologii de asistență, cum ar fi cititoarele de ecran. În plus, motoarele de căutare care oferă capabilități de căutare bazate pe imagini se bazează pe textul alt
pentru a determina semnificația imaginilor., Furnizarea valorilor alt
pentru imagini nu este opțională, este ceva ce ar trebui să faceți absolut dacă sunteți designer, dezvoltator sau webmaster. Cu toate acestea, utilizarea corectă a atributului alt
este la fel de importantă ca utilizarea acestuia în primul rând.
instrucțiuni pentru utilizarea corectă a textului alternativ
când sunt utilizate corect, alternativele de text pentru elementele vizuale înseamnă că utilizatorii care nu pot vizualiza imagini pot utiliza în continuare funcționalitatea completă a unui site web. Cu toate acestea, atunci când alternativele de text nu sunt utilizate corect, acestea pot crea confuzie., Urmați aceste reguli simple pentru a oferi vizitatorilor site-ului dvs. cea mai bună experiență posibilă.poate părea inutil să spui acest lucru, dar ar trebui să adaugi întotdeauna alt
atribuită fiecărei imagini pe care o folosești pe o pagină web. Chiar și în unele cazuri speciale în care nu este furnizat niciun text, atributul alt
ar trebui să fie încă prezent și lăsat necompletat.,atunci când un cititor de ecran întâlnește o imagine fără atributul alt
, acesta va spune pur și simplu vizitatorului site-ului „imagine”. Acest lucru lasă vizitatorul să se întrebe ce informații ar putea lipsi. Cu toate acestea, dacă atributul text alternativ este prezent, dar lăsat gol, ca acesta alt=""
, cititorul de ecran înțelege că imaginea trebuie omisă în întregime. Utilizați aceste cunoștințe pentru a spune tehnologiilor de asistență, cum ar fi cititoarele de ecran, ce imagini ar trebui să treacă pur și simplu., Dacă aveți imagini care sunt furnizate exclusiv în scopuri de design sau estetice – o astfel de imagine utilizată pentru a reda o bară orizontală – furnizați un atribut text alternativ gol, astfel încât tehnologiile de asistență să știe că ar trebui să ignore imaginea în întregime.
duplicați mesajul transmis de imagine
ce informații transmite imaginea? Încapsulează aceste informații într-o scurtă declarație și folosește-o ca alternativă text., Punctul dealt
text este de a transmite exact același sens pentru un vizitator care nu poate vedea o imagine ca imaginea în sine transmite un vizitator care poate vedea. În cazurile în care imaginea furnizează informații textuale, pur și simplu furnizați exact același text ca textul alt
.
spuneți vizitatorilor unde se duc imaginile legate
imaginile sunt adesea folosite ca link-uri către alte site-uri web. Acesta poate fi cazul în care utilizați imagini buton pentru link-uri, sau pur și simplu se poate lega o imagine într-un articol la sursa imaginii., Dacă conectați imagini la alte site-uri web, utilizați textul alternativ imagine pentru a spune utilizatorilor unde se duce linkul.
cazuri speciale
urmând instrucțiunile de mai sus, veți oferi alternative de text mai bune decât multe site-uri web comune. În timp ce aceste orientări vor acoperi marea majoritate a nevoilor de text alternative, există câteva cazuri speciale pe care ar trebui să le cunoașteți.
utilizați 125 de caractere sau mai puțin
multe tehnologii de asistență procesează textul în bucăți de 125 de caractere. Îmbunătățiți experiența utilizatorilor cititorului de ecran limitând textul alternativ la 125 de caractere., Dacă nu puteți tăiați alt
text la mai puțin de 125 de caractere, oferă o descriere extinsă pe o pagină separată și link-ul de la ea. De exemplu, dacă aveți o imagine a unei diagrame care nu poate fi rezumată în mai puțin de 125 de caractere, atribuiți imaginii un text alternativ scurt, cum ar fi „diagrama a ceva minunat” (dar spuneți de fapt vizitatorului ce lucru minunat este prezentat în diagramă)., Există două moduri diferite puteți suplimenta scurt text alternativ cu o descriere extinsă, care oferă o mulțime mai multe detalii:
- Imediat sub imagine, introduceți un link care spune ceva de genul o Descriere Extinsă a Minunat Diagrama și link către o pagină separată, cu o descriere extinsă.
- imediat sub sau lângă imagine adăugați o literă mare D și conectați-o la descrierea extinsă pe o pagină separată. Această legătură se numește D-Link și câțiva experți în accesibilitate pledează pentru utilizarea sa, dar preferăm și recomandăm metoda descrisă mai sus.,
un alt mod de a oferi o descriere extinsă în trecut a fost de a face uz delongdesc
atribut. Cu toate acestea, trebuie să știți că a fost învechit în HTML5 și nu este o modalitate bună de a oferi o descriere extinsă. Săriți longdesc
și utilizați una dintre cele două metode descrise mai sus pentru a oferi o descriere extinsă a unei imagini complexe.
furnizați un scurt rezumat pentru imaginile care au fost deja descrise
vor fi momente în care veți utiliza o imagine și o veți descrie în textul paragrafului din pagină., De exemplu, s-ar putea posta o imagine dintr-o excursie de pescuit recente și includ în textul paragraf pe pagina o descriere a imaginii, care este ceva de genul asta „am avut o mare de timp de pescuit acest week-end trecut și prins bas 7-lire vedeți în imagine!”Într-un astfel de caz, este încă important să oferiți o alternativă text la imagine, dar textul utilizat poate fi foarte scurt. În cazul exemplului nostru de pescuit, textul bun alt
ar putea arăta astfel: alt="weekend fishing trip"
.,
Puncte să-și Amintească
utilizarea Corectă a alt
atribut pot fi rezumate cu patru puncte-cheie:
- utilizați Întotdeauna
alt
atribut, chiar dacă vă lăsați-l necompletat. - păstrați scurt textul alternativ.
- duplicați informațiile transmise de imagine.
- spuneți vizitatorilor unde merg imaginile legate.acum știți cât de important este să oferiți o alternativă text pentru fiecare imagine de pe site-ul dvs. web. Mai bine, știți cum să utilizați textul alternativ în mod corespunzător, astfel încât să fie cât mai eficient posibil.,
Jon este un scriitor independent, pasionat de călătorii, soț și tată. El scrie despre tehnologii web precum WordPress, HTML și CSS.
Lasă un răspuns