O privire în standardele web ARIA și accesibilitatea aplicațiilor HTML
O rețea cu adevărat deschisă și incluzivă are nevoie de tehnologii care să permită utilizatorilor cu handicap să se bazeze pe tehnologii de asistență pentru a se bucura de conținut web dinamic și de aplicații web moderne. Standardele web W3C de accesibilitate web vizează să populeze webul cu aplicații Rich Internet accesibile (ARIA), pe care utilizatorii cu dizabilități le pot utiliza eficient.
ARIA este unul dintre numeroasele standarde și ghiduri de accesibilitate publicate de Inițiativa accesibilității web (WAI). Oferă un marcaj suplimentar care poate fi ușor inserat în documente HTML. WAI-ARIA este un cross-platform soluție cross-dispozitiv care vizează platforma web deschisă, astfel încât nu cred că nu numai cu privire la site-uri, dar, de asemenea, despre jocuri, divertisment digital, asistență medicală, mobile și alte tipuri de aplicații.
În acest articol vom examina modul în care puteți adăuga accesibilitatea documentelor dvs. HTML cu ajutorul standardelor WAI-ARIA.
Cadrul ARIA
Sintaxa HTML nu permite întotdeauna dezvoltatorilor să descrie elementele în mod corespunzător, să-și identifice rolurile și să specifice relațiile dintre ele. În timp ce aceasta este rareori o problemă pentru vizitatorii care dețin în totalitate simțurile, poate împiedica utilizatorii tehnologiei asistate să înțeleagă ce se întâmplă pe ecran și să exploreze opțiunile lor.
Acesta este punctul în care ARIA vine în ajutorul nostru, deoarece face posibilă definirea scopului diferitelor elemente cu ajutorul lui reperul rolurilor, și descrie natura lor aria-atribute prefixate. Aria-atributele prefixate au două tipuri: proprietăţi care descriu caracteristici care sunt mai puțin susceptibile de a se schimba pe tot parcursul ciclului de viață al paginii și statele care oferă informații despre lucruri care se pot modifica frecvent din cauza interacțiunii utilizatorilor.
Roluri de referință
Roluri de referință sunt cele mai cunoscute forme ale Modelului rolurilor ARIA (altele sunt Rolurile Abstract, Rolurile Widget și Rolele Structurii Documentului). Rolurile de referință permit dezvoltatorilor să identifice persoane mari perceptibile pe pagina web pe care utilizatorii tehnologiei de asistență ar dori să le acceseze rapid.
Există 8 tipuri de roluri ARIA de referință și trebuie adăugate ca atribute tagurilor HTML corelate.
rol =”stindard”
Rolul banner-ului este destinat să fie utilizat în principal pentru conținut care are legătură cu întregul site, nu numai cu paginile individuale. De obicei, este adăugat ca atribut în antetul principal al site-ului pentru logo și alte informații importante la nivel de site. Este important să puteți utiliza rolul de banner o singură dată în orice documente sau aplicații HTML.
rol =”principal”
Principalul rol de referință este legat de conținutul principal al documentului. Nu poate fi folosit de mai multe ori pe nicio pagină HTML. De obicei, este urmată de Rolul de navigare este menit să fie utilizat pentru a indica o zonă care conține elemente de navigație, cum ar fi linkuri și liste de pe un site. Rolul complementar al reperelor descrie un conținut suplimentar care este legat de conținutul principal al site-ului. Trebuie să fie plasat la nivelul similar în ierarhia DOM ca Rolul contentinfo informează agenții utilizator despre prezența unei regiuni în care pot fi găsite diferite tipuri de metadate, cum ar fi informații despre drepturile de autor, declarații legale și de confidențialitate. Este de obicei folosit pentru subsolul unui site. Rolul reperului formei indică o formă care așteaptă introducerea de către utilizator. Pentru formularele de căutare pe care ar trebui să le utilizați Rolul de căutare este destul de explicativ, este destinat să ajute tehnologiile de asistență să identifice funcționalitatea de căutare a unui site Web. Puteți utiliza rolul de reper al aplicației pentru o regiune pe care doriți să o declarați ca o aplicație web, și nu ca un document web. Nu este recomandat să-l includeți în site-urile tradiționale, deoarece indică tehnologii de asistență pentru trecerea de la modul normal de navigare la modul de navigare în aplicații. Ar trebui să folosiți acest rol important numai cu mare grijă. În timp ce rolurile vă permit să definiți semnificația etichetelor HTML, stările și proprietățile oferă utilizatorului informații suplimentare despre cum să interacționați cu ele. Ambele state și proprietăți sunt marcate cu aria-atribute prefixate cu sintaxa aria- *. Cele mai cunoscute atribute ARIA sunt, probabil, proprietatea cerută de arie și starea verificată de arie. Aria-necesară este a proprietate deoarece este o caracteristică permanentă a unui element de intrare (adică utilizatorul trebuie să-l umple), în timp ce aria-checked este a stat deoarece o casetă de selectare poate schimba frecvent valoarea sa datorită interacțiunii cu utilizatorul. Statele și proprietățile obțin uneori valori token (un set limitat de valori predefinite), de exemplu, proprietatea aria-live poate avea 3 valori diferite: de pe, politicos, încrezut. Sintaxa din acest exemplu arată astfel: În alte cazuri, valorile ariilor prefixate sunt reprezentate de siruri de caractere, numerele, numere întregi, Referințe ID sau adevarat fals valorile. Utilizați atributele de relație pentru a indica relațiile dintre diferite elemente de pe site-ul dvs., care nu pot fi determinate în alt mod din structura documentului. De exemplu, După ce setați un rol ARIA reper pentru o zonă perceptibilă pe pagina HTML, acesta poate ajuta la tehnologiile de asistare foarte mult dacă schimbați stările prefixat-ARIA și proprietățile elementelor copilului, în conformitate cu evenimentele de pe ecran. Acest lucru poate fi crucial în cazul în care utilizatorii trebuie să interacționeze cu site-ul, de exemplu completarea unui formular sau executarea unei interogări de căutare. Principiul general al designului de accesibilitate este acela că starea curentă a interfeței cu utilizatorul trebuie întotdeauna percepută de tehnologiile de asistență. De exemplu, dacă utilizatorul alege o opțiune într-o formă, trebuie să apară și selectată pentru tehnologii de asistență. Acest lucru poate fi realizat cu ușurință prin utilizarea stării selectate ariei cu următoarea sintaxă: W3C WAI-ARIA Ghidul practicii de creație vă poate oferi multe alte idei minunate despre cum să armonizați corect interfețele vizuale și accesibile ale site-ului dvs.. Utilizarea rolurilor și atributelor ARIA poate fi uneori redundantă. Când utilizați etichete semantice ale HTML5, cum ar fi De exemplu, este inutil să utilizați formă rolul de reper pentru a defini Deci, dacă ați adăugat deja ascuns Atributul HTML la o intrare de formular, este inutil să adăugați Aria-ascuns stat, deoarece browser-ul îl include în mod implicit.. Acesta din urmă a fost adăugat la specificațiile W3C în scopul cartografierii principal ARIA rol de reper la un element HTML semantic. rol =”navigare”
rol =”complementar”
rol = „principal“. Articolele înrudite, articolele populare, cele mai recente comentarii sunt exemple tipice de conținut autonom complementar.rol =”contentinfo”
rol =”formă”
rol = „căutare“ in schimb.rol =”căutare”
rol =”cerere”
State și Proprietăți
Sintaxa atributelor prefixate Aria
Cum se utilizează statele ARIA și proprietățile
1. Construiți relații între elementele cu atribute de relaționare
Aria-labelledby proprietatea identifică elementul care etichetează elementul curent.Aria-labelledby - printre multe alte lucruri - poate lega rubricile în regiunile de reper ARIA în felul următor:Acesta este un titlu
Conținut principal… 2. Sincronizați statele și proprietățile cu ciclul de viață al elementului
3. Se potrivesc interfețele vizuale și accesibile
.Nu utilizați prea mult ARIA
sau , browserele web moderne adaugă semantica ARIA corespunzătoare în mod implicit. În acest caz, nu are sens să se stabilească separat rolurile ARIA. element. In loc de sintaxa este perfect suficient pentru a utiliza doar . De asemenea, este inutil să folosim atributele native ale HTML împreună cu atributul ARIA corespunzător.
