Hands-on cu ARIA Elemente de start și navigație standard

Încercați să faceți site-ul dvs. mai accesibil? Vrei să fii primul în linie, pe măsură ce noile interfețe on-line vin pe piață? Nu căutați mai mult decât ARIA.

Acest set de standarde menținut de W3C (World Wide Web Consortium) vă oferă cele mai bune din ambele lumi prin adăugarea unui număr de atribute care permit ca HTML să fie extins în mod semnificativ. Aici vom trece prin ceea ce este ARIA, vom vedea cum poate beneficia un site web informativ și va trece printr-un caz de utilizare pas cu pas cu exemple de cod. Să începem!

Bazele ARIA

ARIA (sau, uneori, WAI-ARIA) este acronimul pentru un set de standarde de accesibilitate, numit Aplicațiile Rich Internet Accessible Initiative Accessible Initiative. Puteți să vedeți mai multe despre fundațiile ARIA în articolul meu anterior, dar să trecem peste câțiva stâlpi ai săi acum.

Definirea relațiilor non-tradiționale

Majoritatea site-urilor web sunt construite folosind HTML, care se referă în primul rând la elemente reciproc într-un mod ierarhic prin relațiile părinte-copil. Această structură este excelentă pentru definirea conținutului, dar este redusă atunci când vine vorba de definirea interfețelor utilizatorilor. De exemplu, în multe site-uri și aplicații web, o zonă de conținut este controlată de butoane dintr-un element frate - frații au același element părinte, dar în HTML nu au o relație directă între ele. Din acest motiv, devine dificil să se definească elementele de interfață utilizator (UI) care controlează ce piese de conținut utilizează tehnologii de asistență.

Acest lucru trece prin interfețe mai noi. De exemplu, dacă încercați să navigați pe un site web printr-un dispozitiv inteligent, devine dificil atunci când schimbările elementelor nu sunt vizibile.

ARIA vă permite să legați elementele HTML împreună utilizând atribute suplimentare pentru a reprezenta aceste tipuri de controale.

Clasificarea elementelor ne-rigide

Un alt neajuns al HTML este incapacitatea sa de a separa structura de intentie.

De exemplu, poate doriți să creați un element de imagine într-un buton pe care să îl puteți da clic. Cu toate acestea, HTML încă definește în mare măsură imaginea ca doar o imagine și tot ceea ce se întâmplă în altă parte.

Cu ARIA, intenția poate fi separată de un element, permițând ca imaginile să fie marcate ca butoane sau ca o legătură care să fie definită ca o sugestie. Acest lucru oferă mai mult control dezvoltatorului cu privire la UI, creând relații mai bine stabilite.

Crearea de zone de referință

Dincolo de marcarea elementelor din interfața de utilizare, ARIA oferă de asemenea acces la atributul de rol utilizat pentru a defini zonele unei pagini. De exemplu, puteți marca meniul principal ca navigație și zona de conținut a articolului dvs. ca conținut principal. Acest lucru facilitează deplasarea utilizatorilor în toate zonele importante ale site-ului dvs. și poate împiedica confuzia pentru cei care au structuri site-uri neobișnuite sau complexe.

Cutie de utilizare: Pagina de pornire pentru întreprinderi mici

Pentru a obține o experiență prin adăugarea ARIA către un site, vom lua o rețea wireframe a unui site care ar putea fi utilizat de o întreprindere mică și va implementa atributele noastre pas cu pas.

Coperta de pagină a paginii va fi marcată

Din motive de claritate, codul cu care vom lucra este dezbrăcat, cu clase CSS și orice funcționalitate de la un CMS eliminat.

Primul lucru pe care vom dori să-l facem este să ne despărțim scheletul în părți pentru a face ca adăugarea în ARIA să fie mai simplă. În imaginea de mai jos, veți vedea că am ales să rupă site-ul în cinci părți principale: 

• navigare
• conţinut
• bara laterală
• forme de contact
• elementele UI specializate

În cazul nostru, arată astfel:

Secțiunile cu care vom lucra

Atunci când rupeți site-ul dvs. în zone precum acest lucru, căutăm două lucruri. Primul este pentru elementele majore care pot fi definite de un reper ARIA: banner, navigație, principală, complementară, informații despre conținut, căutare și formă. Acestea reprezintă părțile necesare ale site-ului nostru și nimic inutil pentru utilizarea acestuia nu va fi marcat ca un reper (de exemplu, reclame).

Cel de-al doilea lucru pe care trebuie să îl căutați sunt elementele specifice care trebuie clarificate cu ARIA. În cele mai multe cazuri, acest lucru este destul de simplu (cum ar fi marcarea unei imagini ca imagine), dar pentru unele elemente de interfață UI, se poate obține un pic dificil.

Odată ce știm ce zone trebuie să pună în aplicare ARIA, putem începe să ne deplasăm în mod sistematic. Să începem cu navigarea site-ului.

Navigare

În exemplul nostru, veți observa că avem câteva tipuri de navigație. Primul este un meniu așa cum se vede în majoritatea site-urilor, care enumeră câteva pagini pentru site. Direct mai jos este un meniu mai mic care deține opțiuni pentru utilizatori.

Vrem să le marchem cu rol = „navigație“ astfel încât acestea să poată fi ușor selectate ca meniuri ale site-ului. Acest lucru duce la întrebarea: ar trebui grupate într-un punct de reper unic de navigație sau marcate ca două repere distincte?

Pentru a răspunde la această întrebare în propriile proiecte, puteți să vă puneți în mod obișnuit două întrebări:

1. Intenția pentru aceste meniuri este diferită? În exemplul nostru, meniul de sus navighează paginile coloanei site-ului, în timp ce meniul mai mic se concentrează asupra lucrurilor pe care le-ar putea avea nevoie un utilizator logat. Aceste intenții sunt diferite, deci este logic să le separăm.

2. Sunt meniurile în cadrul aceluiași element parental? Știu că acest lucru pare contraintuitiv, deoarece ARIA este proiectat pentru a ne ajuta să depășim aceste tipuri de restricții de relații, dar în acest caz este mai puțin despre ceea ce este posibil și despre ce este potrivit pentru utilizator. Având un singur meniu definit, dar cu o jumătate din acesta într-o locație și cealaltă jumătate în altă parte, face navigarea mai dificilă.

Pentru cazul nostru, vom trata navigațiile noastre ca două repere distincte. Așa că vom face unele modificări la cod. Pentru început, avem doar codul HTML de bază:

 
 
 
Acasă
 
Despre
 
Servicii
 
Locație
 
Contacteaza-ne
 
 
 
Logare
 
Cont
 
Setări
 
 

Acum o vom adnota cu câteva repere.

Următorul pas în definirea acestor repere este acela de a oferi utilizatorului o sugestie cu privire la intenția fiecărui meniu. Dacă le lăsăm pe amândouă ca navigație fără alte informații, facem lucrurile mai dificil de interpretat. Deci, să le adăugăm etichete semnificative folosind Aria-label atribut:

Dincolo de asta, vom dori să adăugăm un marcaj suplimentar de rol în meniul nostru pentru a permite utilizatorilor să știe că acesta este un meniu și să marcheze fiecare link în cadrul unui element de meniu:

Zona de continut

Acum, în zona de conținut. Aici vom marca containerul care conține întregul conținut principal rol =“principal“. Din nou, pentru comparație, iată codul nostru de pornire. 

 
  
 Lorem ... scelerisque ... 
 
  Gaseste-l 
 

Și iată cum arată după ce adăugăm "principal" Reper.

 
  
 Lorem ... scelerisque ... 
 
  Gaseste-l 
 
 

În acest conținut, vom continua să găsim orice element care are intenția care nu se potrivește cu definiția sa HTML.

În primul rând, vom avea grijă de imagine care acționează ca un buton prin adăugarea "buton" rol:

Această legătură care activează un modal este puțin mai dificilă, deoarece depinde de ceea ce este în modalitatea în sine. Pentru noi, vom spune că este o sugestie:

scelerisque

În cadrul conținutului nostru principal, avem și un formular de căutare. Acest lucru are un strat suplimentar de complexitate, deoarece este o formă de căutare care utilizează elemente HTML și se califică, de asemenea, ca punct de reper al căsuței de căutare. Vom marca acest lucru:

 
  Gaseste-l 
 

Dincolo de asta, puteți defini fiecare element cu eticheta ARIA adecvată. Pentru majoritatea site-urilor, aceasta poate fi o povară prea mare pentru procesul de dezvoltare, deși în majoritatea CMS-urilor poate fi automatizată. În cazurile în care nu poate fi, dacă definiția HTML a unui element corespunde intenției sale de utilizare, atunci poate fi considerată o prioritate scăzută atunci când se realizează implementări ARIA. Iată ce arată zona principală de conținut după efectuarea tuturor acestor modificări:

 
  
 Lorem ... scelerisque ... 
 
 
  Gaseste-l 
 
 
 

Bara laterală

Bara laterală a unui site poate lua mai multe forme. În cazul nostru, acesta oferă conținut suplimentar legat de site, cu o listă cu posturile asociate în partea de jos.

Iată marcajul de pornire pentru bara laterală:

Pentru a defini conținutul, vom dori să îl oferim "complementar" , permițând utilizatorilor să știe că informațiile din bara laterală reprezintă un conținut suplimentar legat de conținutul principal. Aceasta poate să arate astfel:

Postările asociate de mai jos ar putea fi considerate o formă de navigare, permițând utilizatorilor să exploreze în continuare postările site-ului. Vom încerca să o marchem cu a "navigare" și dați-i o etichetă adecvată, după cum urmează:

Bara laterală a fiecărui site este diferită și poate necesita o combinație diferită de roluri și repere. Dacă bara dvs. laterală are o publicitate, atunci este mai bine să nu marcați acel element. Dacă există un formular de căutare în bara dvs. laterală, atunci marcați-l și cu rolul corespunzător. Orice meniuri care apar într-o bară laterală trebuie să urmeze același model pe care l-am discutat în secțiunea de navigare: 

• A "navigare" Reper
• A "meniul" pentru containerul de meniu
• rolurile de "articol din meniu" pentru fiecare element imbricat

Iată cum arată bara noastră laterală finală:

Manipularea formularelor de contact

În cele din urmă, în partea de jos a paginii noastre este un formular de chemare la acțiune, care solicită numele utilizatorului și adresa de e-mail, cu un buton standard de trimitere de mai jos. Când vine vorba de forme, există trei aspecte care trebuie ținute în minte:

1. Dați formei rolul de reper al "formă": deoarece formularul este o parte importantă a site-ului, trebuie să îi ajutăm pe utilizatori să ajungă la acesta. Facem acest lucru oferindu-i un rol de reper

2. Atribuiți rolurile potrivite elementelor. Formularele sunt o zonă comună pentru intenții și definițiile HTML care nu sunt potrivite. Adăugați rolurile ARIA acolo unde este necesar, mai ales atunci când este vorba de casete de selectare, glisoare, vârfuri de instrumente și alte elemente care pot fi implementate în mai multe moduri.

3. Se potrivesc etichetele cu elementele corespunzătoare. HTML gestionează acest lucru într-un mod de bază, permițându-vă să utilizați element pentru a asocia o etichetă cu o intrare. Formele pot avea cu ușurință o structură mai complexă, care împiedică lucrul; din fericire putem rezolva asta cu Aria-labelledby atribut.

Să aruncăm o privire la ceea ce arată codul nostru actualizat:

 
 Casetă de text   Alegerea nr. 1 Alegerea nr. 2  Caseta de bifat