Ce sunt atributele Aria în HTML și de ce sunt acestea importante?

Designerii web care sunt noi în HTML pot întâlni un set de atribute necunoscute. Prefixate cu cuvântul ARIA, aceste atribute apar peste tot pe web, dar scopul lor poate fi un mister pentru noii utilizatori.

Atributele ARIA servesc un scop important în accesibilitatea site-urilor dvs. web. Ele descriu atât conținutul unui element dat, cât și modul în care un element se raportează la o pagină sau la celelalte elemente din jurul acesteia.

Adăugarea acestor atribute importante pe site-ul dvs. vă va asigura că toți vizitatorii beneficiază de aceeași experiență, indiferent de tehnologia pe care o folosesc.

Ce sunt atributele ARIA?

ARIA este un acronim pentru Accesible Rich Internet Applications. În HTML modern, în special în aplicațiile bogate în JavaScript, nu este întotdeauna evident imediat pe baza sintaxei ce rol au elementele individuale.

Dificultatea de a discerne rolurile poate fi o problemă atunci când utilizatorii vizualizează site-ul folosind instrumente de accesibilitate, cum ar fi cititoarele de ecran. Neavând HTML semantic adecvat, este posibil ca utilizatorul final să nu poată naviga pe un site atunci când folosește instrumente de accesibilitate.

În timp ce modalitatea preferată de a rezolva această problemă este să utilizați elementele semantice adecvate în HTML5, acest lucru nu este întotdeauna practic sau posibil. Aici intervin atributele ARIA pe elementele HTML. Aceste atribute ajută la definirea rolului și atributelor elementului dvs. într-un mod pe care instrumentele de accesibilitate pot fi procesate.

De ce sunt importante atributele ARIA?

Pe scurt, atributele ARIA fac posibil ca utilizatorii cu dizabilități să utilizeze site-ul dvs. Aceste roluri și atribute definesc informații suplimentare despre diverse elemente de pe site-ul dvs. care altfel ar putea să nu fie ușor disponibile.

Există o mare varietate de atribute ARIA pe care le puteți atribui. Ar trebui să le folosiți oriunde care necesită context suplimentar pentru a permite documentului să aibă sens într-un mod non-vizual.

De exemplu, luați în considerare un site care are o navigare principală compusă din a element învelit într-o element, mai degrabă decât a element:

<divclasă="nav">
<ul>
<li>Acasăli>
<li>Magazinli>
<li>Despreli>
ul>
div>

Puteți folosi atributele ARIA pentru a ajuta utilizatorii să navigheze. Adăugarea atributelor rol și aria-label la element permite cititorului de ecran și tehnologiilor de asistență să știe unde este meniul dvs.

<divclasă="nav">
<ulrol="navigare"aria-etichetă="Principal">
<li>Acasăli>
<li>Magazinli>
<li>Despreli>
ul>
div>

Deși în majoritatea cazurilor ar trebui să utilizați elementele adecvate, acest lucru s-ar putea să nu fie întotdeauna posibil în limitele constrângerilor pe care le faceți. Dacă, de exemplu, site-ul dvs. necesită utilizarea unei bare de progres, dar doriți un design pe care bara standard nu îl permite.

În acest scenariu, puteți crea un set personalizat de elemente pentru a afișa bara de progres. Pentru un cititor de ecran, totuși, aceste elemente vor arăta ca o mizerie amestecată; nu va putea oferi informații utile vizitatorilor site-ului dvs.

Prin stabilirea rolului wrapper-ului la bara de progres, și adăugând aria-valuenow, aria-valuemin, și aria-valoaremax atribute pentru wrapper, puteți indica în continuare progresul.

În epoca modernă, construirea de site-uri web accesibile este mai importantă ca niciodată. Sunt mai multe biblioteci de componente React construite având în vedere accesibilitatea.

Nu numai că un site web accesibil vă poate ajuta la clasarea căutării pentru mai multe motoare de căutare majore, dar vă asigură că nu eliminați un grup potențial de utilizatori din baza dvs. de utilizatori.

Adăugarea atributelor ARIA adecvate pe site vă va asigura că prezentați informațiile tuturor utilizatorilor. Rezultatul final va fi un site care salută toate publicurile și prezintă cât mai aproape de aceeași experiență tuturor.

Ce atribute ARIA ar trebui să folosesc?

Există o mulțime de atribute diferite de care ar trebui să le folosești pe site-ul tău. În general, aceste atribute se încadrează în două categorii diferite. Primul este atributele widget care descriu de obicei un element interactiv personalizat.

Cealaltă categorie de care trebuie să fii conștient este atributele relației. Acestea sunt atribute care transmit informații către tehnologiile de asistență despre modul în care un anumit element se relaționează cu restul site-ului sau cu alte elemente.

Când vine vorba de a lua în considerare ce atribute ARIA ar trebui să includeți, răspunsul simplu este cât mai multe posibil. Oriunde unde elementul pe care îl utilizați nu descrie rolul pe care îl îndeplinește elementul, ar trebui să utilizați atributul rol.

Dacă aveți un câmp cu o etichetă, acel câmp ar trebui să aibă aria-labeledby atribut. Atâta timp cât atributele pe care le utilizați au sens, vă faceți site-ul mai accesibil doar adăugându-le.

Atributele widgetului reprezintă categoria mult mai mare. Conține majoritatea atributelor ARIA pe care va trebui să le adăugați la un site standard. În exemplul anterior al barei de progres personalizate, aria-valuenow, aria-valuemin și aria-valuemax sunt toate atribute widget. Ele descriu starea sau stările posibile ale elementului pe care se află.

Există o mulțime de atribute diferite pe care le puteți folosi pentru a descrie starea unui element. Una dintre cele mai comune este aria-etichetă. Acest atribut aplică elementului pe care îl plasați o etichetă care este vizibilă numai pentru tehnologiile de asistență.

O altă pereche comună de atribute ARIA care se încadrează în această categorie sunt aria-ascunsă și aria-invalid. Acestea pot comunica starea curentă a unui element și dacă un cititor de ecran ar trebui să-l citească utilizatorului. Acest lucru este util pentru o varietate de dispozitive diferite cu propriile cititoare de ecran.

Atributele relației

Spre deosebire de atributele widget, atributele de relație oferă tehnologiilor de asistență indicații despre relația și utilizarea unui element cu alte elemente din jurul acestuia. Cel mai comun dintre acestea este atributul rol. Rolul specifică ce scop servește un element într-un site.

Dacă setați rol atribuit lui navigare, va fi imediat identificat ca un wrapper de navigare.

Unele atribute de relație definesc modul în care un element se raportează la alte elemente din jurul său. The aria-labeledby atributul, de exemplu, arată ce element acționează ca o etichetă pentru acest element. Acest lucru poate fi util atunci când utilizați machete care au sens vizual, dar au etichete pentru controale de formular specifice după ele în fluxul de documente.

Deși există mai puține atribute de relație decât atributele widget, aceste atribute au adesea o importanță mai mare. Ele pot descrie adesea fluxul și controlul unui document și pot oferi detalii suplimentare despre modul în care un utilizator poate naviga pe site-ul dvs.

Aceste atribute sunt de o importanță deosebită atunci când proiectați formulare și elemente de navigare pe site-ul dvs.

De ce este atât de important să includeți atribute ARIA în HTML

Atributele ARIA servesc unui scop simplu și necesar pe site-ul dvs. Acestea servesc pentru a se asigura că site-ul este accesibil tuturor utilizatorilor, indiferent de utilizarea software-ului de accesibilitate. Pentru utilizatorii cu dizabilități, deținerea acestor atribute pe site-ul dvs. poate face site-ul utilizabil.

Metoda preferată de lucru cu tehnologia de asistență este utilizarea elementelor semantice adecvate. Atunci când acest lucru nu este posibil, totuși, atributele ARIA fac posibilă funcționarea liberă fără ca utilizatorii să piardă din conținut.