Încercați să vă faceți site-ul mai accesibil? Sau poate doriți să faceți mai ușor traversarea site-ului în general utilizând browsere și alte interfețe? Folosind ARIA, poți să le faci pe amândouă. Să aruncăm o privire la ceea ce este ARIA și cum poate beneficia un site de comerț electronic. De asemenea, vom trece prin câteva exemple pas cu pas.

Ce este ARIA??

WAI-ARIA se referă la aplicațiile Rich Internet Accessible Initiative-Accessible Rich Internet. Această inițiativă ia forma unui set de linii directoare și atribute care sunt menținute de W3C. Folosind aceste atribute, putem crea relații între elementele site-ului nostru care nu pot fi exprimate numai prin HTML. Cea mai importantă pentru utilizarea noastră aici este că putem defini relații de element în afara relației părinte-copil și conectăm mai clar elementele UI pentru utilizatorii noștri.

În acest moment, ar putea fi o idee bună să verificați primerul inițial pe ARIA pentru a vă spăla pe unele dintre fundațiile sale.

Adăugarea ARIA la eCommerce

Anterior, am vorbit despre modul de aplicare a ARIA pe un site web general care seamănă cu o pagină comună de afaceri mică. De data aceasta, vom analiza mai atent modul în care ARIA poate îmbunătăți experiența utilizatorilor pentru site-urile mari de comerț electronic.

Ne vom concentra pe patru domenii cheie ale eCommerce care prezintă situații unice: pagini de produs, pagini de categorii (sau pagini de agregate de produse), navigație pe mai multe niveluri și navigație fațetată. Vom folosi aceste două cadre pentru a ne ghida prin proces:

O machetă de produs foarte de bazăExemplu de machetă a paginii cu afișare de produse

Pregătirea pentru ARIA

În cazul majorității site-urilor Web, adăugarea ARIA este un proces destul de simplu. Definiți bucățile site-ului dvs., împărțiți-le în repere și elemente și adăugați codul necesar.

Vom urma un proces similar cu site-ul nostru de eCommerce, dar acum avem un nou nivel de complexitate. Cu complexitatea care vine cu site-urile de comerț electronic, ARIA poate deveni o gaură de iepure în multe cazuri. Deși este important să îmbunătățiți cât mai mult posibil accesibilitatea site-ului dvs., din păcate, din păcate, vom întâlni adesea constrângeri de afaceri. Din acest motiv, vom dori să facem o planificare mai bună în avans, acordând prioritate fiecărei adăugări ARIA noastre.

Făcând această prioritizare, putem asigura că cele mai importante aspecte ale site-ului nostru sunt îmbunătățite în primul rând, ceea ce face ca experiența utilizatorului să fie cât mai bună posibil în timpul disponibil.

Să lăsăm o privire la unele pagini de produs.

ARIA pentru paginile de produs

O pagină captivă pentru orice site de eCommerce, aceste pagini prezintă în mod obișnuit un produs, variațiile disponibile și o modalitate de a adăuga elementul într-un cărucior. Fiecare dintre aceste elemente interactive trebuie luată în considerare separat.

Pentru pagina noastră de produse, lăsați-o să fie fragmentată în felul următor: informații despre produsele noastre, elemente interactive care afectează produsul, butonul de adăugare în coș și o secțiune de conținut extinsă.

Dacă ar fi trebuit să acordăm prioritate implementării pe această pagină, am dori să o grupăm astfel:

1. Informații despre produse de bază, elemente interactive, butonul de adăugare în coș
2. Produs extins pentru produse

Principalul factor de jucat aici este ceva despre care am vorbit într-un articol anterior: ARIA ajută la definirea intenției unui element. În cazul conținutului extins, majoritatea elementelor HTML care sunt utilizate au elemente cu semnificație și intenție semantică care se potrivesc. Acest lucru înseamnă că, deși este util să punem informații suplimentare ARIA dacă este posibil, este probabil mai puțin important decât completarea celorlalte trei domenii.

Informatii despre produs

Să începem prin adăugarea ARIA la informațiile despre produsele noastre principale. Acest lucru este destul de simplu datorită simplității elementelor folosite aici. Codul arată astfel:

 
 
  
 
 
O geantă frumoasă
 
Dimensiune sac:
100x150mm
  Maro Negru   Adaugă în coș 
 

Pentru început, vom adăuga un rol principal div și o relație între imagine și titlul produsului. 

 
  
 
 
O geantă frumoasă
... 
 

Elemente interactiv de produs

Aceasta este locul în care paginile de produs pot deveni puțin complicate. Produsele de pe un site de comerț electronic pot avea câteva tipuri diferite de variații prezente. Dincolo de tipurile disponibile, numărul acestora care poate fi utilizat simultan adaugă un alt nivel de complexitate. În exemplul nostru, avem trei elemente care intră în joc: dimensiunea, culoarea și cantitatea.

Să aruncăm o privire asupra modului în care puteți marca acest lucru. Iată codul pentru elementele de selectare și de selectare îmbunătățite ARIA:

  Maro Negru  

Adaugă în coș Buton

Butonul de pe coș este similar cu cel al unui buton standard, dar vom ieși din calea noastră pentru al eticheta mai clar decât alte butoane:

Adaugă în coș

Produs extins de conținut

În cele din urmă, zona conținutului extins este tratată la fel ca o zonă cu conținut tipic. În funcție de paginile dvs. de produse, cu toate acestea, ar fi o idee bună să separați reperele principale de conținut de reperele suplimentare ale conținutului. Taburile adaugă și un strat suplimentar la cod aici. Iată cum am face acest lucru în exemplul nostru:

 
 
Informatiile produsului
 
 
 Mai multe informații despre produs ... 
 

Adăugarea ARIA la categoriile Pagini

În timp ce paginile de produse pot fi considerate, în majoritatea privințelor, o formă alternativă de conținut, paginile categoriilor de site-uri, numite și Pagini de afișare a produselor (PLP-uri), sunt o fiară complet diferită. Acestea funcționează ca o structură de navigație mare, permițând utilizatorilor să sorteze sute sau chiar mii de produse.

Acest lucru le face din ce în ce mai complexe, devenind tot mai mult adăugate straturi suplimentare de conținut și filtre (vom vorbi despre navigația și filtrele fatete în secțiunea următoare). Să aruncăm o privire asupra celor două zone principale ale PLP în afara filtrelor: blocurile de produse și paginarea.

Aici este codul nostru de start:

Pagina cu listele de produse
 
 
Sortarea culorilor
 Roșu verde negru 
Dimensiune Sortare
 Mare mic 
 
 
 
O geantă frumoasă
  Adaugă în coș 
... 
 
 1 2 3 ... Ultimul 

Manipularea paginării

Paginarea este numele dat link-urilor mici din partea de jos a listelor noastre de produse aici. De obicei, ele sunt reprezentate prin numere sau săgeți, dar pot veni în diferite alte forme. În partea HTML a lucrurilor, legăturile de paginare arată la fel ca legăturile regulate. Vom spune că a noastră controlează listele de produse fără a redirecționa către o altă pagină.

Pentru a face cunoscut faptul că controlează o zonă de conținut în acest fel, trebuie să o declarăm ca un controlor, să definim ceea ce controlează și apoi să marcheze zona respectivă ca fiind live. Iată cum arată în cazul nostru:

... 
 

Atunci când creăm zona noastră live, folosim "politicos" stabilind că ARIA pune la dispoziție. Dacă modificările dvs. sunt pertinente și trebuie să fie abordate rapid de către utilizator sau trebuie să acordați prioritate între mai multe zone live, puteți utiliza valoarea „Asertiv“ de asemenea.

Marcarea elementelor repetitive

O provocare unică care apare cu paginile de destinație a produselor este complexitatea complexă de navigație din listele de produse. Din perspectivă vizuală, poate fi suficient de ușor să grupezi informațiile, folosind indicii vizuale pentru a determina ce informații se aplică pentru ce produs.

A face acest lucru cu ARIA are câteva straturi mai mult decât aplicațiile anterioare pe care le-am acoperit. Marcarea unui buton "cumpără acum" un buton standard poate crea confuzie atunci când există 20 de aceste butoane pe o pagină. Pentru a rezolva acest lucru, va trebui să creați conexiuni clare între fiecare produs și elementele sale conexe.

Iată cum vom face acest lucru:

 
 
O geantă frumoasă
  Adaugă în coș 
... 

În timp ce acest lucru ajută puțin la clarificarea relațiilor pentru utilizator, nu este încă cea mai bună implementare. O modalitate mai bună ar fi generarea dinamică a unei etichete arie prin concatenarea elementului titular de produs cu o expresie suplimentară, cum ar fi "adăugați în coș".

Utilizarea ARIA cu navigare facială

Navigarea facială se referă la filtrele și opțiunile care sunt afișate frecvent pe site-urile de eCommerce, permițându-vă să restrângeți rezultatele căutării. Acestea vin în multe arome - de la dimensiuni la culori și dincolo. Pentru exemplul nostru, vom face două ipoteze:

1. Navigarea noastră facială actualizează produsele live pe pagină. Acest lucru nu este întotdeauna cazul, deoarece, uneori, site-urile de eCommerce ar putea genera o nouă pagină când se aplică un filtru, dar vom lucra ca și cum site-ul actualizează conținutul live.

2. Navigarea noastră fațadă permite selectarea mai multor filtre. Nu toate site-urile de eCommerce fac acest lucru și există cazuri în care acestea nu ar trebui să fie permise. Cu toate acestea, acest lucru creează un strat suplimentar de complexitate în afara domeniului de aplicare al acestui articol.

Configurarea controalelor

HTML-ul din filtrele noastre este similar cu cel al paginării, care apare în cod ca link-uri de bază. Cu toate acestea, pentru utilizările noastre, intenția filtrelor este de a modifica informațiile care sunt în prezent pe pagină. Din această cauză, vom dori să marcăm întregul container în jurul filtrelor, făcând clar că acesta este un controler pentru o altă zonă a paginii:

Definirea zonelor vii

La fel ca paginarea, aceste actualizări se întâmplă în direct pe pagină. Din această cauză, vom dori să marcați conținutul principal pe pagina noastră ca fiind "live". Rețineți că am făcut acest lucru anterior în secțiunea de paginare, dar vom repeta pasul aici pentru consecvență.

Codul ar trebui să arate astfel:

 
 
O geantă frumoasă
  Adaugă în coș 
... 

Testarea implementărilor

Implementările noastre sunt acum toate în vigoare, așa că să le punem prin câteva teste. Instrumentele mele preferate pentru acest lucru includ Instrumentele de dezvoltare a accesibilității Google sau Pluginul dinamic al Asistenților IBM, însă, în funcție de scara proiectului, poate fi necesar să creați propriul script de testare.

Dacă aveți nevoie de un instrument ce funcționează în afara Chrome sau pur și simplu nu preferați cei doi menționați mai sus, W3C are o listă cu alte instrumente de accesibilitate disponibile.

Efectuarea comerțului electronic mai accesibil

Cu aceste noi adăugiri la setul dvs. de instrumente ARIA, acum ar trebui să puteți marca în mod corespunzător aproape orice site de eCommerce. Pentru a vă asigura cea mai bună experiență de utilizare cu un site de eCommerce, nu uitați să vă păstrați navigația cât mai simplă posibil și să vă exprimați în mod clar intenția.

Mai aveți întrebări pe această temă? Mi-a fost dor de ceva important? Spune-mi în comentariile de mai jos!