ARIA este o abreviere a accesibile Rich Internet Applications (accesibil rich Internet Applications), utilizarea acestui standard face posibilă pentru a face site-ul mai accesibil persoanelor cu handicap, cum ar fi ascultarea sau viziune. Să vedem ce dezvoltatorii pot face pentru a face viața mai ușoară.
O modalitate de a utiliza acest standard - adaugarea de markup ARIA în HTML. Tu, probabil, familiarizat cu elemente HTML semantice, cum ar fi nav. buton sau antet. Este ușor de înțeles de ce puteți utiliza aceste elemente. Ele dau mai mult sens și conținutul paginii, putem folosi o combinație a acestor elemente de marcare și ARIA. Cu toate acestea, pentru utilizarea în comun este necesar să se ia în considerare câteva lucruri.
Rolurile ARIA sunt adăugate la elementele de limbaj HTML ca atribute. Acestea determină tipul de element și indică scopul, pe care îl deservește. În exemplul următor, elementul este identificat ca un banner:
Un alt exemplu este rolul informației a raportat că elementul conține informații despre conținutul paginii.
Notificarea va arata astfel:
rol = „alert“ de lucru pe deplin cu articolele din DOM dinamic adăuga sau modifica afișajul, cum ar fi display: none pentru a afișa: bloc
Elemente întinde (cum și div), în cele mai multe cazuri nu este necesar să specificați un rol = „prezentare“, deoarece nu este un obiect în disponibilitatea copac (arborele de accesibilitate) browser. Dar elemente semantice, cum ar fi H1 - h6 are sens.
atribute ARIA
Atributele ARIA sunt puțin diferite de rolurile ARIA. De asemenea, au adăugat la aspectul, dar există deja o anumite atribute gama ARIA. Toate atributele folosite prefix aria- și sunt împărțite în două grupe: de stat și proprietăți.
- Valorile atributelor schimba starea, ca rezultat al interacțiunii utilizatorului.
- Valorile atributelor, proprietăți, tind să rămână neschimbate.
EXEMPLU atribut ARIA-stat este verificat-arie. utilizate în elemente, cum ar fi casetele de selectare și butoanele radio.
De fapt, utilizarea atributului ARIA în buton radio nativ de legare în mod inutil tipul de intrare = „radio“ și aria-verificat automat.
Proprietățile de atribute ale acestei propoziții arie-etichetă. Acest atribut este utilizat atunci când eticheta elementului de formular nu este vizibil pe pagina (acesta poate fi dictat de proiectare sau pur și simplu nu are sens). Pentru cazurile în care textul etichetei se vedea atributul fit-arie labelledby. Este, de asemenea, utilizat ca valoarea anterioară a atributului se potrivește cu valoarea id-ul tag-ul.
Acest lucru poate fi realizat într-un element de figură.
normele ARIA
Înainte de a grăbi în luptă, amintiți-vă că din mai multe motive, nu este necesar să se adauge ARIA pentru fiecare element.
Încercați să facă cele mai multe elemente HTML semantice
Semantica implicite ARIA se referă la semantica aplicate la elementele din browser. Astfel de elemente ca nav. articol și butonul au pus deja în jos rolurile rol = „navigație“. rol = „articol“ și = „butonul“ rol, respectiv. Înainte de apariția elementelor HTML semantice a fost extins de marcare în funcție de tipul
. Acum putem folosi în loc de div nav și nu avem nevoie să adăugați la elementul semantic al rolului = „navigare“. deoarece acest rol este deja implicit. Puteți verifica prezența tabelul W3C și absența ARIA atributelor pentru elementul dorit.
Un element poate avea doar un singur rol
Un element care nu poate fi mai multe roluri. Conform definiției, rolul este:
Principalul tip de indicator. Această asociere semantică permite instrumente pentru a afișa și a sprijini interacțiunea cu obiecte într-un mod adecvat la așteptările utilizatorului în raport cu celelalte obiecte de același tip.
Nu pot fi două roluri în elementul HTML. Toate rol semantic într-un fel și în conformitate cu definiția de mai sus, un element care nu poate fi de două tipuri. Ați putea fi un buton antet? Nu, doar unul dintre cei doi. Alege rolul pe care descrie cel mai bine funcția elementului.
Nu modificați semantica nativ
Nu ar trebui să folosească un rol care nu îndeplinește elementul semantica, ca un rol adăugat rescrieri element de semantica native. De exemplu:
Cu toate acestea, a doua regulă ARIA permite, dacă este necesar, folosiți elemente imbricate.
Cum altfel poți face markup mai accesibil?
Profitați la maximum de elemente semantice
Acesta este dotat cu experiență, dar dacă te gândești la funcționalitatea pe care le construi, vă poate da o idee bună despre modul de utilizare a elementelor care sunt potrivite pentru scopurile tale mai bine decât un div sau interval. În practică, puteți utiliza elemente HTML ale unei liste de pe site-ul W3C. pentru a deveni mai bine familiarizat cu ele.
Unul dintre exemplele mele preferate este tag-ul blockquote. care este adesea utilizat în alte scopuri. Există și alte elemente similare care servesc scopuri specifice:
- q - este utilizat pentru a indica referințe bibliografice cu litere mici, cum ar fi referințe bibliografice într-un paragraf de text.
- cite - este folosit pentru a cita munca de creație cu textul, de exemplu, versetele.
Aici este un exemplu folosind ambele elemente:
Există mai multe elemente ale HTML, nu s-ar putea lua în considerare, inclusiv mai multe altele noi, deci încă o dată recomandat pentru a evalua posibilitățile.
Atributul alt
Acesta este adesea uitat o parte din structura, care poate afecta grav disponibilitatea, mai ales în cazul cititoarelor de ecran. Acest atribut a apărut în caietul de sarcini, deoarece HTML2 și descrise după cum urmează:
Textul este utilizat în locul imaginii în cazul în care imaginea nu este disponibil din cauza oricăror restricții sau preferințe ale utilizatorului.
Oamenii de multe ori umple atributul alt nu este informativ, de exemplu, scrie text, cum ar fi „câine“ pentru fotografiile dvs. de câine joacă în parc. Din păcate, textul nu atrage nicio imagine pentru deficiențe de vedere. Abordarea următoare este mai adecvat:
Rețineți că atributul alt nu este configurat pentru același element lucru și figcaption. Scopul Alt este de a crea un text alternativ pentru imagine. figcaption și este doar titlul potrivit pentru figură. Dacă vom dezvolta exemplul anterior în figcaption următorul text:
exemplul de marcare folosind HTML semantic și ARIA, axat pe accesibilitate
Dacă te uiți la exemplele din acest articol, v-ați aștepta să vedeți ca referință următoarele:
- folosi HTML semantic pentru imagine și legendă
- destinate utilizării cita elementul
- Adăugați atributul Alt
- utilizarea unuia dintre atributele ARIA
concluzie
Rolurile ARIA și atributele oferă un efect imens atunci când conținutul site-ului dvs. este procesat de cititoare de ecran și alte tehnologii de asistență. Odată cu proliferarea tehnologiei de asistență trebuie să ia în considerare integrarea ARIA în codul nostru ca o practică obișnuită.
materiale suplimentare