SVG-uri accesibile: modele perfecte pentru utilizatorii de cititoare de ecran
Publicat: 2022-03-10În timp ce graficele vectoriale scalabile (SVG) au fost introduse pentru prima dată la sfârșitul anilor 90, au cunoscut o renaștere masivă a popularității în ultimul deceniu datorită flexibilității lor extreme, fidelității ridicate și ușurinței relative într-o lume în care lățimea de bandă și performanța contează mai mult ca niciodată. . Progresele în JavaScript și introducerea interogărilor media CSS, cum ar fi @prefers-color-scheme și @prefers-reduced-motion, au extins funcționalitatea SVG-urilor cu mult dincolo de cazul lor inițial de utilizare a pur și simplu afișarea imaginilor vectoriale pe un site web.
Pe măsură ce tehnologia SVG avansează, înțelegerea noastră cu privire la modul în care proiectăm și dezvoltăm SVG-uri trebuie să avanseze, de asemenea. O parte a acestei progrese include luarea în considerare a impactului unor astfel de modele și coduri asupra oamenilor reali, adică utilizatorilor noștri finali.
Acest articol prezintă douăsprezece modele SVG distincte găsite „în sălbăticie” și fiecare descriere alternativă anunțată atunci când este accesată de diferite combinații de sisteme de operare, browsere și cititoare de ecran.
Desigur, următoarele exemple nu sunt menite să fie o listă exhaustivă a tuturor modelelor posibile utilizate în sfera digitală, dar evidențiază unele dintre modelele SVG mai populare sau omniprezente pe care le puteți întâlni. Continuați să citiți pentru a descoperi ce modele SVG ar trebui să evitați și care sunt cele mai incluzive!
Descrieri alternative de bază folosind eticheta <img>
Primul grup de patru modele utilizează eticheta <img> care leagă la un fișier SVG. Aceasta este o alegere bună pentru imaginile de bază, necomplicate de pe site-ul dvs. web, aplicație sau alt produs digital. Deși dezavantajul utilizării acestui model este că nu puteți controla cu ușurință multe elemente vizuale sau animații ca SVG în linie, acest model ar trebui să redă imagini mai ușoare și mai rapide și să permită o întreținere mai ușoară a SVG-urilor pe care le utilizați în mai multe locații.
Modelul #1: <img> + alt="[words]"
<img class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Modelul #2: <img> + role="img" + alt="[words]"
<img role="img" class="fox" alt="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Modelul #3: <img> + role="img" + aria-label="[words]"
<img role="img" class="fox" aria-label="What does the fox say?" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Modelul #4: <img> + role="img" + aria-labelledby="[ID]"
<p class="visually-hidden">What does the fox say?</p> <img role="img" aria-labelledby="caption1" class="fox" src="https://upload.wikimedia.org/wikipedia/commons/3/39/Toicon-icon-fandom-howl.svg"> Descrieri alternative de bază folosind eticheta <svg>
Al doilea grup de patru modele utilizează eticheta <svg> cu un fișier SVG inline. Deși adăugarea codului SVG direct în marcaj ar putea face ca pagina să fie puțin mai lentă la încărcare, acea ineficiență minoră va fi compensată prin a avea mai mult control asupra elementelor vizuale sau animațiilor imaginilor tale. Adăugând direct SVG-ul dvs. la HTML, aveți și mai multe opțiuni atunci când vine vorba de furnizarea de informații despre imagine utilizatorilor cititorului de ecran.
Modelul #5: <svg> + role="img" + <title>
<svg role="img" ...> <title>What does the fox say?</title> [design code] </svg> Modelul #6: <svg> + role="img" + <text>
<svg role="img" ...> <text class="visually-hidden" font-size="0">What does the fox say?</text> [design code] </svg> Modelul #7: <svg> + role="img" + <title> + aria-describedby="[ID]"
<svg role="img" ...> <title>What does the fox say?</title> [design code] </svg> Modelul #8: <svg> + role="img" + <title> + aria-labelledby="[ID]"
<svg role="img" aria-labelledby="fox8" ...> <title>What does the fox say?</title> [design code] </svg> Descrieri alternative extinse folosind eticheta <svg>
Ultimul grup de patru modele utilizează eticheta <svg> cu un fișier SVG inline, la fel ca cel de-al doilea grup. Cu toate acestea, în acest caz, extindem descrierile alternative simple cu informații suplimentare datorită complexității imaginii.
Aceasta ar fi o alegere bună de model pentru imagini mai complicate care au nevoie de mai multe explicații. Cu toate acestea, este important să rețineți că există unele persoane cu dizabilități - cum ar fi tulburările cognitive - care ar putea beneficia de faptul că aceste informații suplimentare de imagine sunt disponibile ușor pe ecran în loc să fie îngropate în codul SVG.
În funcție de tipul și cantitatea de informații pe care trebuie să le adăugați la SVG-ul dvs., ați putea lua în considerare o abordare complet diferită.
Modelul #9: <svg> + role="img" + <title> + <text>
<svg role="img" ...> <title>What does the fox say?</title> <text class="visually-hidden" font-size="0">Will we ever know?</text> [design code] </svg> Modelul #10: <svg> + role="img" + <title> + <desc>
<svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> Modelul #11: <svg> + role="img" + <title> + <desc> + aria-labelledby="[ID]"
<svg role="img" aria-labelledby="fox11 description11" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> Modelul #12: <svg> + role="img" + <title> + <desc> + aria-describedby="[ID]"
<svg role="img" ...> <title>What does the fox say?</title> <desc>Will we ever know?</desc> [design code] </svg> Vedeți complet CodePen [Comparație de modele SVG accesibile (versiunea Fox)](https://codepen.io/smashingmag/pen/dyvvbKj) de Carie Fisher.
Câștigători și învinși cu modele SVG
Prin rularea diferitelor cititoare de ecran pe diferite combinații de sisteme de operare și browsere, vedem tipare clare care apar în tabelul cu rezultate finale. Există câțiva câștigători și perdanți clari a modelelor SVG , plus câteva modele undeva la mijloc pe care le puteți implementa atâta timp cât știți și le puteți accepta limitările. Privind peste tabelul de rezultate, putem concluziona următoarele:
Descrieri alternative de bază folosind eticheta <img> (Grupul 1)
Cel mai bun din spectacol
- Modelul 2 :
<img> + role="img"+alt="[words]" - Modelul 3 :
<img>+role="img"+aria-label="[words]"
Utilizați prudență
- Modelul 4 :
<img>+role="img"+aria-labelledby="[ID]"
Nu se recomandă
- Model 1 :
<img>+alt="[words]"
Descrieri alternative de bază folosind eticheta <svg> (Grupul 2)
Cel mai bun din spectacol
- Modelul 5 :
<svg>+role="img"+<title> - Model 8 :
<svg>+role="img"+<title>+aria-labelledby="[ID]"
Utilizați prudență
- Model 7 :
<svg>+role="img"+<title>+aria-describedby="[ID]"
Nu se recomandă
- Modelul 6 :
<svg>+role="img"+<text>
Descrieri alternative extinse folosind eticheta <svg> (Grupul 3)
Cel mai bun din spectacol
- Model 11 :
<svg>+role="img"+<title>+<desc>+aria-labelledby="[ID]"
Notă : Deși acest model nu este perfect, deoarece a repetat descrieri alternative, nu a ignorat niciunul dintre elementele din testare, spre deosebire de modelele de „atenție”.
Utilizați prudență
- Modelul 9 :
<svg>+role="img"+<title>+<text> - Modelul 10 :
<svg>+role="img"+<title>+<desc> - Model 12 :
<svg>+role="img"+<title>+<desc>+aria-describedby="[ID]"
Nu se recomandă
- Niciunul dintre modelele din acest grup nu a picat complet testele.
Rezultatele testării
Vezi stiloul [Rezultatele testării](https://codepen.io/smashingmag/pen/YzZQBwG) de Carie Fisher.
Încheierea
Este important de reținut că o parte a interpretării rezultatelor testelor de model SVG este înțelegerea faptului că creatorii fiecărui cititor de ecran au un browser(e) recomandat(e) pe care le acceptă pe deplin. Acest lucru nu înseamnă că nu ar trebui sau nu ați putea folosi un cititor de ecran într-un browser diferit, aceasta înseamnă doar că, dacă o faceți, este posibil ca rezultatele să nu fie la fel de precise ca și cum l-ați folosi pe cel recomandat(e).
Testarea modelului pentru acest articol a inclus unele combinații de browsere și cititoare de ecran care pot intra în categoria „margini”, dar există și note despre combinațiile de sisteme de operare, browsere și cititoare de ecran recomandate pentru propria dvs. testare. Rezultatele acestor teste ar trebui să vă ajute să luați cea mai bună decizie de model SVG posibil, pe baza nevoilor și constrângerilor dvs. de model.
Vă reamintim că înainte de a vă stabili un model, vă rugăm să vă asigurați că cunoașteți elementele de bază despre cum și când să creați imagini accesibile și că înțelegeți pe deplin informațiile alternative necesare pentru diferitele tipuri de imagini.
Dacă aveți nevoie de ajutor suplimentar pentru a decide ce model să utilizați pentru mediul dvs., consultați articolul Good, Better, Best: Untangling The Complex World Of Accessible Patterns pentru a vă ajuta să navigați în apele dificile ale modelelor accesibile. Înarmați cu toate aceste informații și doar puțin efort, SVG-urile dvs. sunt pe cale să fie mai incluzive pentru toți.
Nota editorului : puteți afla cele mai bune practici privind accesibilitatea cu Carie în viitorul ei atelier online despre modele front-end accesibile — cu linii directoare, instrumente de testare, tehnologie de asistență și modele de design incluzive. Online și live.