Accesibilitatea site-ului Noțiuni de bază cu ARIA

Utilizând doar standard HTML, aplicațiile web moderne pot bloca utilizatorii cu nevoi de accesibilitate. 

HTML este limbajul predominant de markup online, fiind utilizat de aproape 83% din site-urile existente. Deși s-au înregistrat câteva modificări în cei 25 de ani de la crearea sa, iterații mai noi, cum ar fi HTML5 și AMP, lasă mult de dorit - mai ales când vine vorba de accesibilitate. Aici intră ARIA. În acest tutorial, voi vorbi despre ce este ARIA, de ce este util pentru site-ul dvs. și despre câteva moduri în care poate fi adăugat pe site-ul dvs..

Ce este ARIA??

ARIA, cunoscută și sub numele de WAI-ARIA, reprezintă aplicațiile Rich Internet Accessible Initiative ale Inițiativei Web. Documentul de specificații complete poate fi găsit aici. Rețineți că documentul complet al spec. Este destul de dens, așadar ar fi o idee bună să începeți prin a citi acest post și să verificați unele din celelalte resurse pe care le menționez mai jos. 

Scopul principal al ARIA este de a permite o structură semantică avansată în cadrul HTML ca o contrapondere la natura sintaxă-grele HTML. Cu alte cuvinte, HTML îi spune browserului unde merge lucrurile și ARIA îi spune cum interacționează.

Cine este responsabil pentru ARIA?

ARIA este un proiect găzduit de W3C (World Wide Web Consortium). Proiectul respectă aceleași standarde de actualizare și editare ca și celelalte inițiative ale acestora. Acestea oferă de asemenea un depozit GitHub al mai multor teste pe care le puteți rula pentru a vă asigura că pagina dvs. funcționează corect.

Ce este greșit cu markup-ul curent al site-ului meu?

Cele mai multe site-uri care au un design bine structurat și bine gândit fac destul de bine atunci când vine vorba de tehnologii adaptive (adică de cititoare de ecran). Cu toate acestea, având posibilitatea unui utilizator de a afla cum să utilizeze site-ul dvs. și care să fie ușor de utilizat sunt lucruri diferite. Utilizatorii cu vizibilitate redusă reprezintă aproape 2% din populație, iar pentru ei, diferența poate însemna economisirea unei cantități semnificative de timp și a activității de detectivi atunci când încearcă să îndeplinească sarcini online de bază. Poate fi diferența dintre oferirea unei experiențe spectaculoase vizitatorilor și oferirea unui labirint pentru navigarea acestora.

Dincolo de mijloacele tradiționale de accesibilitate, ARIA își găsește drumul în tehnologii care oferă noi perspective asupra interacțiunii standard. Un număr tot mai mare de sisteme de voce, navigare agregată (cum ar fi computerele încorporate în mașină, de exemplu) și alte inovații pun ARIA în utilizare, profitând de capacitățile sale semantice crescute.

Bine, dar ce face?

În general, ARIA leagă elementele într-un mod semnificativ din punct de vedere semantic. Oferă utilizatorului o semnificație suplimentară în ceea ce privește interacțiunea. Iată câteva exemple din lumea reală despre cum ar putea fi folosit:

1. Asocierea elementelor non-imbricate: Cu HTML simplu, browserul utilizatorului poate vedea relații bazate numai pe relațiile părinte / copil. În unele situații, cu toate acestea, este posibil să dorim o serie de butoane paralele cu conținutul din ierarhia HTML. Cu ARIA, putem defini ce tip de controler este fiecare buton și ce element controlează în altă parte a documentului.
2. Declarați elementele interactive: În timp ce HTML oferă o mulțime de elemente pentru interactivitate, ARIA definește mai multe zeci, permițând descrieri mai detaliate despre ceea ce poate face fiecare element al paginii dvs. În plus, acestea pot fi atribuite etichetelor HTML care nu ar fi utilizate în mod obișnuit pentru un astfel de scop, dar ar putea avea sens în cazul dvs. specific. De exemplu, puteți utiliza funcția
3. pentru o serie de casete de selectare pe care preferați să nu le compuneți din elemente de formă.
4. Notificări privind actualizarea zonelor live: O altă caracteristică pe care ARIA o oferă este definirea unei zone de conținut live. Atunci când o zonă de conținut este definită în acest fel, ARIA va notifica utilizatorul ori de câte ori se modifică conținutul din acel element. Acest lucru poate fi util atunci când vă asigurați că utilizatorii cu vizibilitate redusă știu că ceva sa schimbat pe pagina dvs..

Adăugarea ARIA la paginile dvs. Web

Am vorbit despre ce poate face ARIA, așa că acum să ne uităm la unele dintre cele mai comune exemple. Vom începe fiecare secțiune cu o scurtă afirmație a scopului pe care căutăm să-l realizăm, urmat de un eșantion de cod de realizare a acestuia.

Crearea unei etichete alternative cu ARIA

Când vine vorba de etichetarea alternativă, majoritatea dezvoltatorilor sunt familiarizați cu Alt atribut frecvent utilizat pe Etichete. Această etichetă servește unui scop important: descrierea imaginii la care este atașată pentru o mai mare accesibilitate (sau ca o tactică comună de SEO, în funcție de perspectiva dvs.). 

ARIA oferă un atribut similar numit Aria-label care poate fi atașat la orice element HTML, îmbunătățind accesibilitatea nu numai pentru imagini, ci și pentru secțiuni de site, controale ale formularului și multe altele. Iată un exemplu de cum arată:

    
O descriere text a imaginii, vizibilă pe ecran

Definirea elementelor UI specifice ARIA

HTML oferă deja un număr de elemente pentru crearea paginilor web, însă accentul lor principal este de a defini în general o zonă și de a prezenta utilizatorului structura site-ului. ARIA furnizează câteva duzini de elemente suplimentare care se concentrează mai mult asupra modului în care este utilizat un element, cum ar fi un cronometru, o indicație de instrument sau o bara de progres.

Un exemplu de utilizare aici este o sugestie care ar putea fi găsită pe un formular. Există o serie de moduri de a crea una, variind de la un link care declanșează un anumit JavaScript la un element care creează un modal atunci când se deplasează. Piesa lipsă aici este că, în ciuda modului în care ar putea funcționa pentru utilizatorii cu deficiențe de vedere, utilizatorii cu vizibilitate redusă s-ar putea să nu știe nici măcar că există o sugestie.

Puteți defini o sugestie folosind ARIA cum ar fi:

Definițiile ARIA disponibile

Pentru a extinde aceste elemente ale UI, iată o scurtă listă a unora dintre cele mai interesante "roluri" care pot fi definite. Lista completă este disponibilă în documentul de specificație referit.

• căutare
• stindard
• prezentare
• Bara de instrumente
• stare
• articol din meniu
• Buturuga
• dialog
• legătură

Stabilirea relațiilor în afara structurii părinte / copil

Acum, să ne extindem la un punct despre care am vorbit mai devreme: structura forțată a HTML. În timp ce relația părinte / copil este bună pentru a decide cum ar trebui să fie ordonate lucrurile, aceasta nu este suficientă atunci când sunt necesare conexiuni mai importante. Un exemplu în acest sens sunt elementele frățești. Unele biblioteci au adăugat abilitatea ca frații sau alte forme de relații de element să fie traversate, dar acest lucru se întâmplă de obicei în JavaScript sau într-o altă limbă în afara marcajului.

ARIA ne dă posibilitatea de a defini aceste relații chiar în marcare, făcând mai ușor gruparea elementelor de meniu, crearea de navigație nestandard și atașarea controalelor la zonele de elemente care ar fi dificil de făcut în mod normal.

Să aruncăm o privire asupra modului în care am putea folosi acest lucru pentru a conecta anumite controale la o zonă de conținut:

 
 Continutul tutorialului 

Acest fragment spune că nextbutton.jpg imaginea este un buton, care este un control al tutorialului div de mai jos.

Crearea elementelor "live" în ARIA

Ultima caracteristică a ARIA pe care o vom acoperi aici este arie-live atribut. În timp ce majoritatea celorlalte caracteristici ale ARIA se ocupă de conexiunile semantice, aceasta se ocupă direct de ideea de a da utilizatorilor notificări privind conținutul sau schimbările de elemente.

Pentru mulți dintre cei cu viziune redusă, s-ar putea să nu fie imediat clar că interacțiunea cu site-ul dvs. a provocat o schimbare în altă parte a paginii. Acest lucru poate fi valabil mai ales pentru schimbări subtile, cum ar fi mici blurbi de text care se pot schimba, dar rămân relativ la aceeași lungime. Prin utilizarea acestui atribut, de fiecare dată când conținutul este modificat în cadrul elementului definit, utilizatorul dvs. va fi anunțat.

Putem adăuga acest atribut unui element ca acesta:

 Conținutul care se actualizează, adică. ghidate 

Realizarea unui loc mai bun pentru toți utilizatorii

Cu puțin peste 2% din populația americană care poartă o anumită formă de etichetă cu vizibilitate redusă, îmbunătățirea accesibilității site-ului dvs. poate duce la o creștere drastică a locației site-ului dvs. Pentru cei care au site-uri care ajung în mai multe țări, acest număr devine și mai mare. Pe lângă accesibilitate, ARIA oferă de asemenea o modalitate pentru interfețele non-browser de a utiliza site-ul dvs., cu un număr de dispozitive bazate pe voce care oferă deja suport.

Implementarea ARIA vă ajută utilizatorii și vă poate ajuta traficul, așa că ajungeți la el!

Mi-a fost dor de orice detalii sau aveți întrebări suplimentare? Lasă un comentariu mai jos!

Dacă doriți să vă scufundați în documentația completă ARIA sau să încercați instrumentul oficial de testare, consultați linkurile de mai jos:

• ARIA Practici de autorizare
• Document de specificație complet ARIA
• Testarea exemplului instrumentului de testare