Share
În lumea confuză a aplicațiilor web, ARIA vă poate ajuta să îmbunătățiți accesibilitatea și ușurința utilizării pentru creațiile dvs. HTML nu este capabil să se ocupe de multe tipuri de relații între elementele de pe pagină, dar ARIA este ideal pentru aproape orice fel de configurare cu care puteți să veniți. Să aruncăm o privire la ceea ce este ARIA, cum se poate aplica aplicației dvs. web și câteva rețete rapide pe care le puteți utiliza pentru site-urile dvs..
ARIA, numită și WAI-ARIA, reprezintă aplicațiile Rich Internet Accessible Initiative-Accessible Rich Internet. Această inițiativă, actualizată de W3C, are ca scop să ofere dezvoltatorilor un set nou de scheme și atribute pentru a face creațiile lor mai accesibile. Acesta vizează în mod specific acoperirea lacunelor inerente lăsate de HTML. Dacă nu sunteți familiarizat cu ceea ce face deja, ar trebui să aruncați o privire la grundul nostru pe ARIA. Ați putea fi, de asemenea, interesat de piesele noastre de pe ARIA pentru pagina de pornire și ARIA pentru eCommerce.
Pe scurt, însă, ARIA are trei caracteristici principale asupra cărora ne vom concentra pe:
Accentsconagua
arie-live atributul oferă cititorilor de ecran și altor dispozitive un ascultător când se modifică conținutul paginii. Acest lucru permite o comunicare mai ușoară a schimbărilor de conținut pe ecran.Înainte, am analizat adăugarea ARIA la elementele comune ale paginilor de eCommerce și ale paginilor de pornire ale site-ului. Cu aplicațiile web, cu toate acestea, fiecare diferă drastic de ultimele. Formele și funcțiile se schimbă între fiecare aplicație și adesea chiar între versiuni ale aceleiași aplicații. Din acest motiv, vom trata aplicațiile noastre aici ca rețete într-o carte de bucate, mai degrabă decât o conversie cu ridicata a unei pagini.
Când vine vorba de aplicațiile web, intenția unui utilizator este mai greu de discernut într-un sens generalizat. Cu eCommerce, indiferent de site-ul pe care sunteți pe, este probabil că vizitatorii caută să cumpere un produs sau serviciu. Aplicațiile Web au o varietate de scopuri, astfel încât, în schimb, să ne concentrăm asupra creării unor controale nuanțate care să fie accesibile și ușor de utilizat.
Să intrăm în unele dintre aceste tipuri de control.
Primul control la care ne uităm este o valoare afișată actualizată printr-o apăsare de buton. Aceste tipuri de controale sunt frecvent observate în cazul în care un element afișează o cantitate care poate fi ajustată prin butoanele etichetate cu "+' și '-', dar poate lua mai multe forme, cum ar fi butoanele săgeată care vă permit să faceți cicluri de stadii predefinite.
O implementare standard poate lăsa unele lacune în înțelegerea pentru utilizator. Nu este clar ce elemente afectează butoanele, cum le afectează și când se schimbă valoarea elementului.
Mai jos, vom folosi ARIA pentru a crea o conexiune între butoane și elementul de afișare a valorii utilizând Aria-controale atribut. Apoi, vom folosi butoanele clare prin utilizarea Aria-label și HTML . În cele din urmă, vom folosi aria alerta rol și arie-live atribut pentru a permite utilizatorului nostru să știe când valoarea este actualizată.
Să aruncăm o privire la ceea ce arată codul:
Când echipați un site cu ARIA, este comun să folosiți "accesibilitate progresivă". Ideea din spatele acestui termen este că luarea unui site sau a unei aplicații web de la forma sa de bază la accesibilă este o sarcină descurajantă. Pentru a face față acestei situații într-un mod care face încă mișcare, puteți implementa noi caracteristici progresiv și iterativ.
Pentru un buton de instrucțiuni cu un pop-up sau un modal asociat, aceasta înseamnă că putem rezolva problema în două etape, rulând fiecare după cum putem. În acest caz, instrumentul despre care vorbim este imaginea obișnuită a unui mic semn de întrebare care deschide informații suplimentare atunci când este suspendat.
Pentru a permite utilizatorilor să știe că imaginea marcajului de întrebări este de fapt o sugestie, am definit-o folosind un rol adecvat, cum ar fi:
Cu toate acestea, există câteva probleme cu această implementare. Utilizatorii ar putea să nu știe că plasarea cursorului peste butonul de instrucțiuni inițiază un popup cu informații suplimentare. Iată cum putem adăuga acest lucru la codul nostru:
În locul unei sugestii bazate pe hover, este, de asemenea, obișnuit ca o aplicație web să utilizeze formulare în care fiecare intrare are propriul sfat asociat.
Fără marcarea suplimentară ARIA, poate fi dificil să se spună care sunt instrumentele care se aplică la ce intrare pentru un utilizator. A nu avea această relație în loc poate face inutil textul dvs. helper în unele cazuri.
Pentru a corecta acest lucru, vom împacheta sfaturile noastre în interiorul elementelor proprii. Fiecare dintre acestea poate fi imbricate în apropierea intrărilor aferente, au relațiile stabilite cu ARIA și apoi pot fi declanșate cu JavaScript (sau doar CSS dacă sunteți crafty).
Iată cum ar putea să arate:
"Serviciul nostru este în prezent în așteptare", "Contul dvs. este suspendat" și alertele legate de stare sunt utilizate în mod obișnuit printre aplicațiile web și afișează informații importante pentru utilizatori. Fără ARIA, ei pot fi îngropați în informațiile de pe o pagină și pot provoca o varietate de probleme.
Folosind ARIA alerta rol și arie-live , putem să ne asigurăm că utilizatorii noștri sunt conștienți de orice problemă imediat ce ajung pe o pagină.
Putem configura acest tip de avertizare de stare cum ar fi:
Sistemul este offline!
În cele din urmă, să aruncăm o privire la un alt element de control comun utilizat în aplicațiile web: bara de instrumente. Pentru scopurile noastre, vom marca un bara de instrumente care funcționează astfel: aplicația noastră web prezintă o cantitate mare de date orientată într-un tabel. Deasupra acestui tabel, bara de instrumente are mai multe butoane care permit utilizatorilor să sorteze tabelul în diverse moduri. Aceste butoane includ opțiuni clasice de sortare, cum ar fi De la A la Z și Z la A.
Din punct de vedere relațional, acestea lasă unele probleme legate de accesibilitate. În primul rând, nu este clar că acele butoane afectează masa - vom rezolva acest lucru folosind Aria-controale atribut. De asemenea, nu este clar faptul că butoanele sunt asociate între ele, ceea ce poate fi o informație utilă pentru utilizatorii noștri. Pentru a defini acest lucru, vom folosi Bara de instrumente rol. În cele din urmă, un utilizator nu știe neapărat care buton a fost apăsat ultima dată. Pentru a corecta acest lucru, vom folosi arie presat atribut.
Atunci când utilizați arie presat atribut, este important să rețineți că va trebui să actualizați aceste elemente în timp ce utilizatorul interacționează cu ele. Aceasta va necesita schimbarea atributelor prin JavaScript sau jQuery.
Iată cum arată codul barei de instrumente:
Cu această serie de noi scheme de control și relații sub centură, sunteți pe cale de a vă face propria aplicație web pe deplin accesibilă! După ce ați adăugat aceste marcări noi, gândiți-vă cum puteți aplica aceste atribute altor părți ale interfeței dvs. de utilizator pentru a maximiza utilitatea creației dvs..
Există atribute, roluri sau alte caracteristici ale ARIA despre care doriți să știți? Sau poate aveți câteva întrebări cu privire la propriile implementări sau corecții pentru acest articol? Luați legătura cu secțiunea de comentarii de mai jos sau etichetați pe kylejspeaker pe Twitter!
