Cum să începeți să vă testați site-ul web cu un cititor de ecran

Nu există nicio îndoială cu privire la importanța construirii site-urilor web accesibile. Este un subiect constant de discuție în comunitatea de web design. Și, după părerea mea, cei mai mulți designeri vor să o facă corect.

Accesibilitatea ne afectează pe toți într-un fel sau altul. Indiferent dacă este vorba de cuvintele specifice folosite într-o postare pe blog sau de capacitatea de a naviga de la o pagină la alta, contează.

Dar dacă nu ești cineva care se bazează pe tehnologia de asistență, cum ar fi un cititor de ecran, poate exista o deconectare. Este prea ușor să treci cu vederea modul în care o anumită caracteristică afectează utilizatorii. Acest lucru este probabil pentru că nu l-am testat în acest context.

Recunosc că m-am luptat în acest domeniu. Și pun pariu că există o mulțime de alți designeri care au și ele. Privilegiul meu de utilizator văzător care navighează cu mouse-ul nu m-a determinat întotdeauna să iau în considerare câteva aspecte importante ale accesibilității.

Adevărat, testez cu instrumente automate. Mă asigur că fonturile sunt lizibile, contrastul culorilor respectă standardele WCAG, iar imaginile utilizează atributul ALT. Toate acestea sunt lucruri bune. Cu toate acestea, ele nu reprezintă experiența completă a utilizării unui site web.

Deci, cum ducem lucrurile la următorul nivel? Testarea site-ului dvs. cu un cititor de ecran este o modalitate excelentă de a începe. Să aruncăm o privire de începător asupra a ceea ce este implicat. De acolo, voi împărtăși ceea ce am găsit în timpul experimentului meu.

Găsiți o aplicație de citire a ecranului

Primul pas al procesului este să găsiți o aplicație de citire a ecranului potrivită. Poate că nu trebuie să mergeți foarte departe, deoarece unele sisteme de operare includ unul implicit.

Utilizatorii Mac au acces la VoiceOver, în timp ce utilizatorii Windows pot accesa Narator. În plus, există câteva alte opțiuni disponibile pentru aproape fiecare sistem de operare. Din partea mea, merg cu aplicația open-source NVDA. Este gratuit de utilizat (susținut de donații) și se numără printre cele mai populare opțiuni.

Indiferent de aplicația pe care o alegeți, este important să aveți o înțelegere de bază a modului în care funcționează. În plus, poate fi necesar să faceți câteva modificări în prealabil. De exemplu, veți dori să vă asigurați că puteți înțelege ceea ce se citește. De asemenea, poate doriți ca software-ul să evidențieze conținutul pe măsură ce este citit, făcându-l mai ușor de urmărit.

WebAIM a creat câteva ghiduri utile pentru configurarea diferitelor cititoare de ecran în scopuri de testare. Vă vor pune într-o poziție bună pentru a vedea cât de accesibil este site-ul dvs.

Deplasarea în jur

Acum că aveți la dispoziție un cititor de ecran de încredere, este timpul pentru testare! Pentru a obține un gust al experienței utilizatorului, încercați să parcurgeți diferitele părți ale site-ului dvs. prin intermediul unei tastaturi cu cititorul de ecran activat.

Unele comenzi de la tastatură sunt mai universale decât altele. De exemplu, tasta TAB vă va duce la diverse legături și controale de formular, în timp ce ENTER vă va duce la destinația unui link. Majoritatea par să folosească tastele săgeți pentru a trece de la o linie la alta.

Cu toate acestea, pot exista unele comenzi speciale care sunt specifice unei aplicații de citire a ecranului. Acestea permit navigarea între titluri, repere, cum ar fi anteturi și subsoluri etc. Pentru asta, veți dori să consultați documentația acesteia.

De asemenea, merită remarcat faptul că este nevoie de practică pentru a naviga eficient pe un site web în acest fel. Primele încercări pot fi puțin incomode. Dar odată ce înțelegi diferitele comenzi, lucrurile ar trebui să devină mai intuitive.

Experiența mea cu un cititor de ecran

Doar pentru a elibera aerul – nu sunt un utilizator expert de citire de ecran. Cunoștințele mele sunt în cel mai bun caz rudimentare. Dar experiența mea cu NVDA a fost lămuritoare.

Am folosit câteva pagini ale site-ului web al companiei mele ca teren de testare. Și ceea ce am găsit nu au fost neapărat defecte majore. Textul putea fi citit și site-ul putea fi navigat.

Mai degrabă, am descoperit câteva supărări – lucruri care ar fi de înțeles să frustreze utilizatorii. Să trecem în revistă câteva exemple:

Un glisor care întrerupe

Într-un interviu cu expertul în accesibilitate Taylor Arndt, ea a menționat carusele/prezentările de diapozitive ca fiind caracteristici care pot afecta accesibilitatea. Testarea cu un cititor de ecran aduce acest lucru în prim plan.

Caruselul automat pe care l-am folosit era navigabil, dar avea un obicei urât de a se anunța de fiecare dată când următorul diapozitiv apărea la vedere. Acest lucru a făcut foarte dificil pentru cititorul de ecran să ajungă foarte departe în alte secțiuni ale paginii înainte de a fi întrerupt.

Am găsit o soluție destul de simplă. Plugin-ul WordPress pe care îl folosesc (Soliloquy) are o opțiune de a schimba regiunea live ARIA la o setare mai puțin agresivă. Acest lucru, împreună cu utilizarea navigației manuale pentru carusel, a scăpat de pacoste.

Text repetitiv

Utilizarea atributului ALT cu imagini este un sfat comun de accesibilitate. Dar pentru imaginile pur decorative, furnizarea de text descriptiv poate fi redundantă. M-am întâlnit cu asta în câteva ocazii diferite.

Listările de postări pe blog au fost principalul vinovat. Atât titlul postării, cât și atributele ALT ale imaginii prezentate au fost identice, ceea ce înseamnă că cititorul de ecran le-a citit de două ori. Rezultatul este că chiar și o listă de postări relativ scurtă face o UX dureroasă.

Punctul de conflict este că blocul de postări WordPress pe care l-am folosit nu are o opțiune pentru a lăsa atribute ALT goale. Astfel, poate fi necesară o soluție.

Descoperiți cum funcționează accesibilitatea site-ului în practică

Construirea de site-uri web care aderă la standardele WCAG se simte satisfăcătoare – și este ceea ce ar trebui să facem noi ca designeri web. Dar bifarea casetelor dintr-o listă de lucruri de făcut nu spune întreaga poveste.

Înțelegerea mai bună a modului în care alții vor experimenta munca ta necesită puțin efort suplimentar. Testarea cu un cititor de ecran oferă o cale pentru a obține mai multe informații. Și, deși acesta nu este în niciun caz un ghid complet, sper că va ajuta să vă stârnească interesul și să experimenteze.

După cum am descoperit, chiar dacă un articol este considerat a fi accesibil prin litera unui standard, asta nu înseamnă că este ușor de utilizat. Acesta este motivul pentru care merită să sapi puțin mai adânc. Poate fi diferența dintre un site care este doar utilizabil sau unul care oferă cea mai bună experiență posibilă.

Notă: După cum am menționat mai sus, sunt un începător când vine vorba de această tehnologie. Dacă aveți sfaturi pentru cititoare de ecran, nu ezitați să mă contactați prin Twitter.