Share
Rezolvarea provocării de a crea un site accesibil sau de a face accesibil un site existent poate uneori să fie o sarcină dificilă. Poate fi greu să înțelegi exact Cum un utilizator cu viziune redusă, de exemplu, ar putea utiliza un site Web. Firește, poate fi dificil pentru noi să fim fericiți că site-urile noastre sunt accesibile.
În acest post vă voi arăta că accesul la testare nu trebuie să fie o sarcină dificilă. Vă voi îndruma prin instrumentele și procesele pe care le folosim la Envato pentru a ne menține platformele utilizabile pentru cei care au toate nivelele de abilități și pentru a vă asigura că accesibilitatea se află în fața minții noastre atunci când vă oferim noi caracteristici.
Acest articol face parte din Accesibilitatea Web: Ghidul complet de învățare, unde am colectat o serie de tutoriale, articole, cursuri și cărți electronice, pentru a vă ajuta să înțelegeți accesibilitatea web de la început.
Unul dintre cele mai importante instrumente pe care le folosim atunci când judecăm accesibilitatea noastră este Google Lighthouse. Farul este un instrument pentru a evalua măsura în care un site respectă cele mai bune practici din industrie - fie că este vorba de performanță, SEO, sau, în cazul nostru, de accesibilitate.
Farul poate fi rulat fie prin interfața online, fie prin intermediul instrumentelor pentru dezvoltatorii Chrome. Un avantaj semnificativ al utilizării Farului este faptul că ne permite să știm exact ce se bazează Google atunci când decide ce accesibilitate ei credeți că site-ul nostru va fi.
Pentru a accesa Lighthouse prin intermediul instrumentelor pentru dezvoltatorii Chrome:
Rularea Farului prin intermediul instrumentelor de dezvoltare Chrome.Odată ce ați rulat, vom obține o ruptură în cazul în care site-ul nostru ar putea fi îmbunătățit pentru a deveni mai accesibil. De exemplu, rezultatele de pe pagina de căutare ThemeForest arată astfel:
Rezultatele farurilor pentru pagina de căutare ThemeForest.Farul ne oferă o listă de zone unde este pagina noastră nu considerate accesibile, precum și o listă a controalelor manuale pe care le putem efectua pentru a ne asigura că accesibilitatea este cea mai bună. Dacă un anumit control nu are sens, Lighthouse oferă link-uri inline pentru a citi mai multe despre ce ar trebui făcut.
Din raportul de mai sus, pot vedea că ar trebui să căutăm să îmbunătățim contrastul nostru de culoare pentru a satisface mai bine persoanele cu deficiențe de vedere. De asemenea, văd că ar trebui să fiu capabil să filă pe pagină într-un mod care are sens în context, precum și alte verificări.
Un alt instrument fantastic pe care îl folosim la Envato este pa11y (numit după abrevierea obișnuită pentru accesibilitate, "a11y".) Pa11y ne permite să setăm un nivel predefinit de specificații de accesibilitate - Secțiunea 508, WCAG 2.0 A, AA sau AAA - aceste specificații.
Când se execută, pa11y ne oferă o listă a specificațiilor de accesibilitate pe care le întâlnim și pe cele pe care nu le îndeplinim încă, precum și o recomandare privind modul de respectare a fiecărui standard. Avantajul utilizării pa11y este că ne permite să fim absolut siguri de respectarea specificațiilor WCAG, precum și să ne dăm pași concreți pentru a deveni mai conformi.
Pagina de rezultate a paginii.La Envato, rulați automat înainte ca fiecare nouă bucată de cod să fie instalată pe platformele noastre utilizând pa11y-ci. Cu toate acestea, pa11y poate fi rulat, de asemenea, folosind aplicația desktop Koa11y.
Koa11y interfață.Un domeniu în care excelează instrumentele pentru dezvoltatori de la Firefox constă în verificarea accesibilității conținutului site-ului nostru. Acest lucru ne permite să luăm în considerare modul în care un cititor de ecran citește conținutul nostru unui utilizator.
Pentru a activa inspectorul de accesibilitate în Firefox:
Activarea panoului de acces în instrumentele de dezvoltator Firefox.Odată activată, o fișă de accesibilitate devine disponibilă pentru noi. Acest lucru ne permite să vedem site-ul nostru ca un cititor de ecran ar putea să-l citească cu voce tare.
Inspector de accesibilitate pentru Firefox Aria-rol este listat în stânga, în acest caz, fie secțiune, legătură sau grafic. Nu fiecare element trebuie să aibă un nume, dar atributul este o modalitate bună de a indica ceva unui utilizator - putem include un nume, asigurându-ne că conținutul textual, o imagine Alt etichetă sau an Aria-label atributul este prezent. Putem, de asemenea, să plasăm cursorul peste acest rol și să lăsăm Firefox să evidențieze elementul corespunzător în marcare.
Navigarea pe acest arbore este utilă doar pentru a obține o înțelegere a ceea ce arată site-ul nostru, fără să ne distragă nimic din conținut. Este, de asemenea, o modalitate excelentă de a înțelege cum ar putea apărea o nouă caracteristică utilizatorilor noștri.
Un alt nivel util al controalelor pe care le folosim la scrierea codului se face prin scrierea de coduri. Linting ne permite să fim alertați automat la bucăți de cod care sunt garantate că sunt inaccesibile. Utilizăm un subset de reguli de tip linting de tip Microsoft pentru a ne linge tipul. De asemenea, folosim pachetul eslint-plugin-jsx-a11y pentru a ne lăsa JavaScript.
Un linter ar putea să mă avertizeze, de exemplu, că am uitat să includ un Alt eticheta pe următoarea imagine:
Un alt exemplu ar putea fi un avertisment pentru includerea unui element care ar putea distrage atenția celor care utilizează cititoare de ecran:
Linting oferă feedback instantaneu pentru a ne permite să facem schimbări rapide pe măsură ce mergem pentru a ne asigura că produsul final este cât mai accesibil posibil.
Utilizăm o serie de extensii de browser pentru a obține o mai bună simțire a modului în care un utilizator ar putea experimenta site-ul nostru pe măsură ce îl creăm, astfel încât să putem face ajustări pe măsură ce mergem. Acestea sunt câteva extensii de excepție pe care le-am semnalat ca fiind deosebit de utile.
Spectrul vă permite să vedeți site-ul dvs. în același mod ca și cele cu diferite forme de orbire coloră. Cu aceasta putem vedea părți ale site-ului nostru care pot avea un contrast scăzut față de fundal sau legături ale căror stări active sunt prea asemănătoare cu stările lor pasive.
ThemeForest prima pagina vazuta de cineva cu Achromatopsia.Textul întunecat și textul de lumină vă permit să vizualizați site-ul în modul cu contrast ridicat - un mod de multe ori folosit de cei care necesită un nivel ridicat de accesibilitate. Cu aceasta vedem dacă părțile site-ului nostru sunt prea aglomerate sau prea mici pentru a fi văzute eficient în acest mod.
Pagina principală ThemeForest văzută în culori inverse.Aceasta este disponibilă numai pentru cei cu un Mac, dar merge mai departe în a trăi un site ca un utilizator cu viziune redusă. VoiceOver citește textul selectat la comandă. Îi iau pe unii obișnuiți, dar odată învățați, este ușor de folosit. Pe Web, VoiceOver are cel mai bun suport pentru Safari, dar poate fi folosit cu întregul sistem de operare Mac OSX.
Activați VoiceOver cu CMD + F5. Odată activată, unele funcții convenabile pe care le puteți activa pot fi găsite prin:
Asigurarea accesibilității site-ului dvs. este absolut utilă. Este adesea văzută ca o sarcină care este fie prea dificilă, fie că a fost lăsată prea târziu pentru a fi realizată. Nici una dintre acestea nu este adevărată și cu siguranță nu sunt ceea ce am găsit la Envato. Folosind tehnici și instrumente, cum ar fi cele descrise mai sus, este nevoie de multă muncă și ghiciți să lucrați pentru a construi un site accesibil, oferindu-ne încrederea că produsul final va fi prietenos cu toate utilizatorii noștri.
Accentsconagua