Imaginea ta nu este probabil decorativă

Publicat: 2022-03-10
Rezumat rapid ↬ Plasarea imaginilor pe web-ul modern este foarte intenționată, ajutând la comunicarea scopului general al unei pagini sau al unei vizualizări. Aceasta înseamnă că aproape fiecare imagine pe care o declarați trebuie să aibă o descriere alternativă.

Atributul alt al elementului img poate fi „nulat”, adică acțiunea de a-l seta la un șir gol în loc de o descriere text. Anularea unei descrieri alternative înseamnă că nu există informații între ghilimele de deschidere și cele de închidere. Dacă există un spațiu gol, acesta nu va fi considerat nul:

  
<img alt="" src="/images/cat.jpg" />
Această imagine a fost anulată.
  
<img alt=" " src="/images/dog.jpg" />
Această imagine nu a fost anulată.

Ce înseamnă „decorativ”?

Anularea unei imagini indică faptul că aceasta este doar în scop decorativ.

În acest context, decorativ înseamnă că imaginea nu comunică vizual informații care sunt importante pentru înțelegerea scopului paginii sau vizualizării și de ce imaginea este inclusă ca parte a acesteia.

Decorativ nu înseamnă că imaginea conține conținut care este considerat decor.

„

De exemplu, un site web care vinde tapet va dori să aibă descrieri alternative pentru mostrele de tapet:

 <a href="/products/umbrella?variant=73849024783051"> <img alt="Small red and white illustrated umbrellas on a teal background." src="/images/73849024783051.png" /> </a>

Un alt exemplu ar putea fi site-ul web al unui muzeu, unde prezentarea unei piese din colecția lor ar putea beneficia atât de o descriere alternativă, cât și de o legenda:

 <figure role="figure" aria-label="View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds."> <img alt="A tile painting, composed of 33 Delft tiles forming a view of the port of Rotterdam. Set in a modern mahogany frame, with gilded inscription on bottom border." src="/collection/w0895/2005-1057.png" /> <figcaption> View of Rotterdam, by Cornelis Boumeester. Date: about 1700–20. Accession Number: 2005.1057. In Dutch homes, tiles typically served utilitarian purposes, such as covering the walls of kitchens, utility rooms, passageways, and fireplace surrounds. </figcaption> </figure>

Asigurați-vă că descrierea alternativă include și semne de punctuație!

De ce ați dori să faceți o imagine decorativă?

Tehnologia de asistență va trece peste imaginile anulate și nu va anunța prezența lor. Motivele pentru care doriți să faceți acest lucru sunt în mare parte istorice.

Tehnici vechi de aranjare

Tehnicile timpurii de dezvoltare web s-au bazat pe imagini pentru a le ajuta să garanteze un aspect consistent în diferite sisteme de operare, browsere și versiuni de browser. Cel mai comun exemplu în acest sens a fost un spacer.gif , un pixel transparent de 1×1 care a fost întins la diferite dimensiuni pentru a împinge conținutul în poziție.

Trei spacer.gifs întinse au fost folosite pentru a crea o marjă exterioară pentru textul „Bine ați venit pe pagina mea de pornire”.
Trei spacer.gifs întinse au fost folosite pentru a crea o marjă exterioară pentru textul „Bine ați venit pe pagina mea de pornire”. (Previzualizare mare)

Această tehnică ar folosi de obicei multe imagini de spațiere pentru a crea un design vizual. Fără o modalitate de a reduce prezența lor, aceste imagini ar aglomera ceea ce tehnologia de asistență a anunțat și ar face confuză și consumatoare de timp navigarea și acțiunea asupra conținutului web.

Tehnici vechi de proiectare

Înainte de a exista proprietăți CSS, cum ar fi box-shadow , dezvoltatorii au trebuit să folosească tehnici care tăiau stilul decorativ pentru a-l face să funcționeze cu conținut de înălțime sau lățime nedeterminată. Această tehnică a fost numită scalare în 9 felii, termen care se referă la cele 9 secțiuni de conținut pe care ar trebui să le creați.

Textul, „Tehnica de scalare în 9 felii a folosit imagini de fundal repetate pentru conținut cu o lățime sau înălțime flexibilă.” înconjurat de coloane și rânduri pentru fiecare dintre cele patru laturi ale sale. În fiecare dintre cele patru colțuri este o zonă pătrată. În zonele pătrate și coloanele și rândurile sunt pictograme generice de imagine. Pictograma imagine se repetă în coloane și rânduri, demonstrând cum poate fi placată o textură.
Tehnica de scalare în 9 felii (previzualizare mare)

La fel ca imaginile cu distanțiere, scalarea în 9 secțiuni a folosit mai multe imagini pentru a crea efectul vizual dorit. Și, la fel ca imaginile de distanță, singura modalitate de a elimina dezordinea creată de aceste imagini a fost să le marcheze ca decorative.

Mai multe după săritură! Continuați să citiți mai jos ↓

Anunturi redundante

Există un scenariu rar în care o imagine este repetată pe o pagină sau pe o vizualizare, iar plasările sale repetate nu oferă niciun context suplimentar. Ar trebui să aveți grijă să marcați o imagine decorativă în această situație, deoarece lipsa unui anunț pentru o imagine vizibilă poate fi confuză pentru cineva cu vedere slabă care utilizează un cititor de ecran.

Pictograme suplimentare

Linkurile și butoanele care folosesc pictograme ar trebui să aibă întotdeauna un nume accesibil care comunică funcționalitatea. Dacă designul încorporează și o pictogramă, designul pictogramei nu trebuie să fie comunicat.

 <button type="button"> <img src="icon-print.svg" alt="" /> Print </button>

Dacă componenta folosește doar o pictogramă, imaginea în sine ar trebui utilizată pentru a crea numele accesibil:

 <button type="button"> <img src="icon-print.svg" alt="Print." /> </button>

Rețineți că o etichetă de text vizibilă este tehnica preferată. O etichetă text vizibilă poate fi tradusă și comunică scopul mai direct.

Habar nu am ce face acest buton.

Utilizare contemporană

Tehnicile moderne de aspect și stil CSS înseamnă că plasarea imaginii este acum foarte intenționată. Aceasta înseamnă că, dacă se folosește o imagine, cel mai probabil va avea nevoie de o descriere alternativă.

Descrierile alternative ar trebui să comunice scopul imaginii . Aceasta include conținutul imaginii, dar poate include și motivul pentru care este inclusă în context pe pagină sau vizualizarea în care a fost inclusă. Acesta este unul dintre motivele pentru care descrierile alternative ale imaginii nu vor putea fi niciodată complet automatizate.

Alte moduri de afișare a imaginilor

Există alte câteva moduri de a afișa o imagine pe o pagină sau vizualizare. Este important să vă asigurați că este furnizată o descriere alternativă dacă imaginea conține conținut semnificativ - indiferent de tehnica utilizată.

Elementul de picture

Elementul de picture nu are un rol implicit, adică prezența lui nu comunică niciun scop tehnologiei de asistență. Aceasta înseamnă că nu poate fi folosit pentru a descrie semantic prezența unei „imagine”.

Elementul picture este un container pentru elementele source și img . Utilizați atributul alt al elementului img pentru a oferi o descriere alternativă pentru elementul picture părinte.

 <a href="/product/9091866/color/3"> <picture> <source type="image/avif" /> <img alt="A black ankle-length boot with metal eyelets, yellow stitching, and a padded collar and tongue." src="9091866-3.png" /> </picture> </a>

Imagini de fundal

Putem folosi CSS pentru a declara o imagine ca fundal pe un element HTML. Acesta este cel mai adesea folosit pentru a adăuga un sentiment de textura unui design.

Cu toate acestea, o altă tehnică populară este utilizarea unei background-image pentru a plasa o imagine în așa fel încât dezvoltatorul să nu aibă control asupra dimensiunii imaginii pe care cineva o încarcă. background-image , combinat cu alte proprietăți, cum ar fi background-size va asigura că conținutul de dimensiune necunoscută este afișat fără a întrerupe designul.

Vedeți Pen [Imaginea de fundal ca exemplu de imagine din prim plan](https://codepen.io/smashingmag/pen/OJprPwK) de Eric Bailey.

Vedeți imaginea de fundal a stiloului ca exemplu de imagine în prim-plan de Eric Bailey.

Într-un scenariu ca acesta, vechiul nostru prieten spacer.gif ar putea fi util din nou!

SVG în linie

SVG poate fi afișat fie prin conectarea la acesta prin atributul src într-un element img , fie prin plasarea codului SVG în linie în pagină sau vizualizare.

Dacă utilizați SVG inline, trebuie să utilizați elementul title (și potențial desc ) al SVG în locul unui atribut alt .

 <svg role="img" aria-labelledby="icon-bookmark-desc" xmlns="https://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <title>Bookmark.</title> <path d="M19 21l-7-5-7 5V5a2 2 0 012-2h10a2 2 0 012 2z"/> </svg>

Experiență echivalentă

În designul și dezvoltarea web modernă, afișarea unei imagini este un act extrem de intenționat. Descrierile alternative ne permit să explicăm conținutul imaginii și, făcând acest lucru, să comunicăm de ce merită inclusă .

Doar pentru că o imagine afișează ceva fantezist nu înseamnă că nu merită descrisă. Anunțarea prezenței sale asigură că oricine, indiferent de abilitate sau circumstanță, poate înțelege pe deplin experiența ta digitală.

Citiți suplimentare despre SmashingMag:

  • Accesibilitate în Chrome DevTools
  • Un ghid complet pentru instrumentele de accesibilitate
  • Imagini accesibile pentru când contează cel mai mult
  • SVG-uri accesibile: modele perfecte pentru utilizatorii de cititoare de ecran
  • Proiectare cu mișcare redusă pentru sensibilități la mișcare
  • Citiți mai multe articole despre accesibilitate, utilizare și UX.