Un ghid complet pentru instrumentele de accesibilitate

Învățarea să construiască site-uri web accesibile poate fi o sarcină descurajantă pentru cei care abia încep să implementeze practici accesibile. Am adunat o gamă largă de instrumente de accesibilitate, de la bookmarklet de unică folosință la aplicații complete, pentru a vă ajuta să începeți să construiți site-uri web mai accesibile.

ARIA

Sondajul WebAIM Million a constatat că paginile de pornire cu ARIA prezent au înregistrat în medie cu 41% mai multe erori detectabile decât cele fără ARIA. ARIA este un instrument esențial pentru crearea de aplicații web complexe, dar specificația este strictă și poate fi dificil de depanat de către cei care nu folosesc tehnologia de asistență în mod regulat. Instrumentele ne pot ajuta să ne asigurăm că folosim ARIA corect și că nu introducem mai multe erori în aplicațiile noastre.

TPGi a creat un bookmarklet WAI-ARIA care scanează pagina dvs. pentru a se asigura că toate elementele și rolurile și atributele ARIA date sunt valide. La activarea bookmarklet-ului, pagina este scanată pentru orice erori și se va deschide o nouă filă cu rezultatele. Rezultatele includ numărul total de roluri valide, orice erori ARIA detectate și fragmente de cod de unde au fost găsite erori, astfel încât să vă puteți depana cu ușurință pagina.

Un lucru care nu a fost testat în mod explicit în marcajul de mai sus este prezența unor roluri ARIA duplicate. Anumite roluri de reper au nume care sună ca și cum s-ar putea aplica mai multor elemente, dar ar trebui să fie folosite o singură dată pe pagină, cum ar fi banner sau contentinfo . Adrian Roselli a creat un bookmarklet simplu bazat pe CSS pentru a verifica dacă vreunul dintre aceste roluri ARIA a fost duplicat. Activarea bookmarklet-ului va adăuga un contur roșu oricărui element ofensator.

NerdeRegion este o extensie Chrome care înregistrează toate rezultatele oricăror regiuni aria-live. Nu vă puteți da seama de ce cititorul dvs. de ecran anunță ceva în mod neașteptat? NerdeRegion vă poate permite să urmăriți anunțurile marcate cu timp și elementul sursă din care provin, toate într-un panou în DevTools. Deoarece pot exista erori și inconsecvențe în ceea ce privește modul în care regiunile aria-live sunt anunțate cu diferite cititoare de ecran, NerdeRegion poate fi un instrument excelent pentru a afla dacă o problemă este posibilă cauzată de codul dvs. sau de combinația de dispozitiv.

Instrumente automate de testare

Această clasă de instrumente poate fi folosită de dezvoltator sau tester pentru a rula teste automate pe rezultatul codului dvs., observând erori care ar putea să nu apară evidente în codul sursă. Există multe servicii plătite de înaltă calitate și alte instrumente dincolo de ceea ce am menționat aici, dar ne-am concentrat pe instrumente cu oferte complete gratuite pentru a reduce barierele la intrare. Toate instrumentele enumerate pot fi rulate pe pagini care nu sunt pe internetul public, permițându-le să fie mai ușor încorporate într-un flux de dezvoltare. Este important să rețineți că testarea accesibilității este complicată și necesită întotdeauna testare manuală pentru a înțelege contextul complet al site-ului, dar aceste instrumente de testare automată vă pot oferi un avans solid.

O mulțime de unelte folosesc miez de topor sub capotă, așa că poate fi redundant să folosești o combinație de unelte. În cele din urmă, tipul de instrument pe care îl alegeți depinde mai mult de tipul de interfață de utilizare pe care îl preferați și de nivelul de exhaustivitate al rezultatelor. De exemplu, Lighthouse, instrumentul încorporat în Google Chrome, utilizează o selecție parțială de reguli axe-core, așa că dacă reușiți să obțineți o scanare curată cu axe DevTools, nu ar trebui să rulați și o scanare Lighthouse.

Axe DevTools este disponibil ca extensie Chrome sau extensie Firefox și apare ca un panou în instrumentele pentru dezvoltatori. Puteți testa o pagină întreagă sau doar o parte a unei pagini, iar toate problemele detectate sunt sortate în funcție de gravitate și vin cu fragmente de cod pentru o depanare mai ușoară. Axe vă permite, de asemenea, să detectați mai multe erori decât alte instrumente automate, cu funcția de teste inteligente ghidate. Testele ghidate inteligente identifică zonele de testat și fac cât mai mult lucru posibil, înainte de a pune întrebări testatorului pentru a genera un rezultat. Axe vă permite, de asemenea, să salvați și să exportați rezultate, ceea ce este util pentru rezolvarea erorilor ca parte a unui proces de dezvoltare mai lung și mai cooperant.

Accesibility Insights rulează și pe axe-core, dar are câteva caracteristici care îl diferențiază de axe DevTools. Poate fi rulat pe diverse platforme, inclusiv Android, Windows sau ca extensie de browser. Toate versiunile Accessibility Insights includ un instrument asemănător unui inspector pentru a căuta informații despre elemente individuale, precum și o modalitate de a efectua verificări automate. Extensia web conține și o funcție de evaluare, care are o combinație de teste automate, ghidate și manuale pentru a vă permite să generați un raport complet.

WAVE by WebAIM a fost o parte integrantă a trusei mele de instrumente. Disponibil sub formă de extensie, precum și ca un serviciu de testare în masă și un API, consider că acest instrument este cel mai bun pentru a-mi verifica munca pe măsură ce dezvolt datorită simplității și vitezei sale. Totul este încărcat ca un panou pe partea laterală a paginii dvs. și puteți obține o vedere holistică a erorilor derulând prin pagină. Dacă este afișată o eroare în panoul lateral, dar nu sunteți sigur unde se află în DOM, puteți dezactiva stilurile pentru a o localiza în marcaj. Funcția de titlu și de reper a WAVE este unul dintre lucrurile mele preferate la el, deoarece se asigură că semantica documentului meu este corectă pe măsură ce construiesc.

SiteImprove are o extensie Chrome gratuită, pe lângă ofertele lor de servicii plătite. La fel ca WAVE, rulați extensia pe o pagină și listează erori într-un panou din partea laterală a paginii, inclusiv filtre pentru lucruri precum nivelul de conformitate, severitatea și responsabilitatea. Filtrul de severitate este deosebit de util, deoarece testarea automată tinde întotdeauna să producă rezultate fals pozitive.

Te-ai gândit vreodată să automatizezi testele de accesibilitate ale codului sursă cu GitHub Actions? Indiferent dacă nu ați ajuns încă să vă gândiți la GitHub Actions sau dacă aveți nevoie doar de puțin ajutor pentru a configura un flux de lucru adecvat, tutorialul lui Adrian Bolonio este pentru dvs. Vă arată pas cu pas cum să vă automatizați testele de accesibilitate cu biblioteci precum axe, pa11y, Lighthouse și teste unitare direct în depozitul dvs. GitHub.

Veți învăța cum să vă configurați depozitul astfel încât acțiunile GitHub să fie executate de îndată ce creați sau actualizați o cerere de extragere în ramura principală. Dacă oricare dintre acțiunile GitHub găsește vulnerabilități de accesibilitate, cererea de extragere se va bloca și va dezactiva îmbinarea până când veți rezolva erorile găsite. Un mic detaliu care face o mare diferență.

Culori

Erori de text cu contrast scăzut au fost găsite pe 86,4% dintre paginile de pornire anul trecut. Dezvoltatorii au adesea un control limitat asupra unei palete de culori, așa că este important să încercați să stabiliți o paletă de culori accesibilă cât mai devreme posibil în proces.

Când începeți să proiectați o paletă de culori, un instrument de selectare a culorilor din browser poate fi util. Are My Colors Accessible este un instrument care vă poate ajuta să găsiți o paletă de culori accesibilă. Modul de bază calculează raportul de contrast între oricare două culori. Dimensiunea fontului și greutatea fontului textului dvs. pot afecta raportul de contrast necesar în funcție de nivelul de conformitate, iar acest instrument prezintă în mod util toate standardele diferite pe care le îndeplinește. De asemenea, dispune de glisoare pentru gama HSL, astfel încât să puteți modifica oricare dintre culori, rezultatele fiind actualizate automat pe măsură ce faceți ajustări. Modul Paletă vă permite să comparați fiecare culoare dintr-o paletă una cu cealaltă și să afișeze raportul de contrast și standardele îndeplinite, ceea ce este util pentru a determina modul în care puteți combina diferite culori împreună. Efectuarea oricăror ajustări de culoare actualizează, de asemenea, linkul permanent, permițându-vă să partajați cu ușurință combinații de culori cu echipa dvs. Dacă preferați o interfață diferită pentru selectarea culorilor, Atul Varma a construit un instrument similar care folosește un selector de culori în loc de glisoarele pentru gama HSL.

Geenes încearcă să facă totul prin construirea unei game complete de nuanțe/nuanțe pentru fiecare grup de culori pe care îl adăugați, permițându-vă să proiectați un sistem complet de culori în loc de o paletă limitată. Pe lângă faptul că oferă rapoarte de contrast, Geenes vă permite, de asemenea, să aplicați paleta la diferite machete și să emulați diferite forme de daltonism. Puteți încerca gratuit majoritatea funcțiilor și puteți debloca mai multe palete cu o donație.

Anumite instrumente vă pot ajuta să rezolvați probleme specifice de accesibilitate legate de culoare. Butoanele în special pot fi dificile, deoarece nu numai că trebuie să vă faceți griji cu privire la culoarea textului cu culoarea de fundal, trebuie să luați în considerare și fundalul butonului cu fundalul paginii și culoarea conturului de focalizare cu ambele fundaluri. Proiectul ButtonBuddy al lui Stephanie Eckles explică aceste cerințe într-un limbaj simplu și vă ajută să alegeți culori pentru aceste părți individuale.

Unele combinații de culori pot îndeplini, din punct de vedere tehnic, cerințele de contrast atunci când sunt văzute de persoane fără daltonism, dar ar putea pune probleme pentru anumite tipuri de daltonism și vedere slabă. Who Can Use aplică un filtru vizual pentru a emula diferite tipuri de daltonism și apoi calculează un raport aproximativ de contrast al culorii.

Dacă doriți să testați combinațiile de culori în contextul unui site existent, Stark este o extensie pentru selectarea culorilor pentru Chrome, care vă permite să simulați anumite tipuri de daltonism. În plus, Anna Monus a creat un articol util al instrumentelor pentru daltonism deja încorporate în Chrome. Deși acest tip de emulare nu poate înlocui niciodată pe deplin testarea cu utilizatori reali, ne poate ajuta să facem alegeri inițiale mai bune.

Uneori, ca dezvoltatori, începem să lucrăm la un proiect în care ar putea fi nevoie să proiectăm pe măsură ce mergem și să începem să scriem cod fără o paletă completă de mărci prestabilită. Odată ce dezvoltarea a început, poate fi plictisitor să continui importarea paletelor de culori înainte și înapoi în instrumente externe. Există multe opțiuni pentru verificarea contrastului de culoare într-un mediu de cod . Alex Clapperton a dezvoltat un instrument CLI în care treceți în două culori și redă raportul de contrast și standardele de trecere chiar în terminal. BBC a publicat un verificator de contrast de culoare JavaScript care ia două culori și determină dacă îndeplinește sau nu standardul dorit. Un instrument ca acesta poate fi inclus în baza de cod cu testele dvs. sau poate fi implementat în biblioteca sistemului de proiectare, cum ar fi Storybook, PatternLab și așa mai departe.

A11y Color Tokens face un pas mai departe și vă permite să generați automat jetoane de culoare complementare în CSS sau SASS. Treci într-o culoare și raportul dorit pentru a genera o nuanță sau o nuanță a acelei culori care îndeplinește cerințele. Dacă trebuie să verificați rapid raportul de contrast al ceva, Chrome și Firefox afișează acum informațiile despre contrastul de culoare și în selectoarele de culoare ale instrumentelor de dezvoltare respective. Dacă niciunul dintre aceste instrumente nu vă convine, Stephanie Walter a acoperit multe alte opțiuni de instrumente legate de culoare în postarea ei de blog despre accesibilitatea culorilor.

Compatibilitate

Construirea pentru tehnologia de asistență poate adăuga adesea un alt nivel de complexitate atunci când vine vorba de depanare. Deoarece tehnologia de asistență este în esență un alt strat al unei interfețe deasupra browserului, acum trebuie să ne preocupăm de combinațiile de browser și tehnologie de asistență. O eroare poate fi prezentă fie în browser, fie în tehnologia de asistență sau poate fi prezentă numai într-o anumită combinație. Este o idee bună să păstrați această listă de instrumente de urmărire a erorilor la îndemână atunci când încercați să remediați o anumită problemă. Unele dintre acestea sunt publice, astfel încât să puteți vedea dacă alții se confruntă cu eroarea pe care o aveți, dar altele oferă doar un mijloc de a raporta erori în privat.

Nu toate browserele și combinațiile de cititoare de ecran funcționează bine împreună și nu toate funcțiile de accesibilitate sunt acceptate în mod egal între browsere. Aceste instrumente vă pot ajuta să verificați dacă întâmpinați o eroare pe o anumită combinație de dispozitive. Accesibilitatea HTML5 este o listă de funcții HTML mai noi și dacă implementarea implicită a browserului este sau nu acceptată în mod accesibil . În mod similar, Asistența pentru accesibilitate oferă o listă de roluri ARIA și suportul acestora în cele mai populare combinații de browser și cititor de ecran.

Documentarea accesibilității

Accesibilitatea este încă o idee ulterioară în multe echipe de design UX. O strategie ușoară, dar foarte eficientă pentru a vă ajuta să adoptați o mentalitate de accesibilitate vine de la Elise Livingston și echipa ei de la Qualtrics . Au început să adauge documente de accesibilitate la toate documentele de proiectare înainte de a le preda ingineriei. Nu numai pentru a îmbunătăți accesibilitatea produselor, ci și pentru a vedea potențialele probleme de accesibilitate mult mai devreme în procesul de proiectare.

Elise sugerează abordarea documentației de accesibilitate în doi pași: mai întâi, definirea comportamentului tastaturii, apoi specificarea etichetelor semantice care pot fi înțelese de tehnologia de asistență. Dacă vrei să încerci, Elise a rezumat tot ce trebuie să știi despre abordare într-un articol. O oportunitate grozavă de a vă regândi procesul actual.

Managementul focusului

Gestionarea concentrării este o parte necesară, dar adesea dificilă, pentru a face aplicații complexe accesibile. Trebuie să luăm în considerare că ordinea de focalizare este logică, că focalizarea este mutată corect pe orice componente personalizate și că fiecare element interacționabil are un stil de focalizare clar.

Acest bookmarklet după Level Access etichetează fiecare element focalizat de pe pagină, astfel încât să puteți verifica dacă ordinea de focalizare se potrivește cu ordinea de citire. Pentru utilizatorii Firefox, Inspectorul de accesibilitate al Firefox a adăugat această caracteristică începând cu versiunea 84.

În bazele de cod complexe, în care diferite componente sau coduri terță parte ar putea să-și miște atenția în mod neașteptat, acest mic fragment de Scott Vinkle vă poate ajuta să vedeți ce element are în prezent focalizarea. Dacă mă confrunt cu mișcarea focalizării de către alte părți ale aplicației mele, uneori îmi place să înlocuiesc console.log cu console.trace pentru a determina exact ce funcție mută focalizarea.

Pentru a testa toate stilurile de focalizare pe o pagină web, putem folosi scriptul lui Scott O'Hara ca punct de plecare. Parcurgerea fiecărui element poate deveni greoaie după un timp, așa că un script care să roteze fiecare element ne poate ajuta să ne asigurăm că stilurile noastre de focalizare arată coerente și funcționează în contextul paginii.

Setarea unui tabindex pozitiv pentru a încerca să remedieze ordinea de focalizare este o problemă comună de accesibilitate. Elementele care au un tabindex pozitiv vor forța browserul să le acceseze mai întâi. Deși din punct de vedere tehnic, aceasta poate să nu fie o eroare, aceasta este adesea neașteptată și poate cauza mai multe probleme decât rezolvă. Bookmarklet tabindex al lui Paul J. Adam vă permite să evidențiați toate elementele cărora li se aplică atributul tabindex.

Utilizabilitatea aspectului

Ordinea de citire a documentului poate să nu sincronizeze uneori cu ceea ce s-ar putea aștepta un vizualizator, dacă un aspect se bazează prea mult pe proprietatea CSS Grid sau Flexbox. Adrian Roselli a codificat un bookmarklet pentru a ține evidența ordinii de citire, pentru a vă ajuta să vă asigurați că site-ul dvs. respectă ghidul de secvență semnificativă.

WCAG conține un criteriu de spațiere a textului în care tot conținutul ar trebui să funcționeze în continuare atunci când sunt aplicate anumite setări de text. Pentru a testa acest lucru, Steve Faulkner a creat un bookmarklet care aplică automat setările necesare pentru spațierea textului întregului text de pe o pagină. Evitarea lucrurilor precum înălțimile fixe și permiterea depășirii nu numai că vă face site-ul mai accesibil, ci vă asigură că orice conținut pe care îl introduceți în site-ul dvs. nu va rupe aspectul, lucru pentru care editorii dvs. de conținut vă vor mulțumi.

Jared Smith a creat un bookmarklet pentru a vă transforma cursorul într-o casetă de 44×44 pixeli, astfel încât să îl puteți trece peste comenzile dvs. pentru a vă asigura că acestea îndeplinesc criteriul de dimensiune țintă recomandat .

Linters

Linters sunt o clasă de instrumente care detectează erori prin scanarea codului sursă înainte ca aplicația să fie rulată sau construită. Folosind linters, putem remedia erori mai mici chiar înainte de a rula sau de a construi codul, economisind timp valoros QA ulterior.

Mulți dezvoltatori cunosc și folosesc deja ESLint într-o anumită calitate. În loc să înveți instrumente noi, este posibil să primești un avans în testarea accesibilității prin includerea unui nou plugin în fluxul de lucru existent. Eslint-plugin-jsx-a11y este un plugin ESLint pentru elementele dvs. JSX, unde orice erori va fi afișată pe măsură ce scrieți codul. Scott Vinkle a scris un ghid util despre configurarea acestuia.

Deque a apărut cu axe Linter, disponibil ca aplicație Github sau extensie VS Code. Axe Linter verifică fișierele React, Vue, HTML și Markdown cu regulile de bază, fără nicio configurație, astfel încât este ușor să porniți și să rulați, deși sunteți binevenit să vă transmiteți propriile opțiuni. O caracteristică utilă este că face distincția între WCAG 2 și WCAG 2.1, ceea ce este util dacă încercați să îndepliniți un anumit standard.

Markup

Web-ul este construit pentru a fi rezistent. Dacă ați întrerupt marcajul, browserul va face tot posibilul să corecteze orice greșeală. Cu toate acestea, acest lucru poate avea efecte secundare neintenționate, atât din punct de vedere al stilului, cât și din punct de vedere al accesibilității. Rularea rezultatelor prin validatorul HTML W3C poate ajuta la identificarea unor lucruri precum etichete rupte, atribute aplicate elementelor care nu ar trebui să le aibă și alte erori HTML. Deque a creat un bookmarklet W3C HTML Validator bazat pe același motor care vă permite să verificați marcajul pe localhost sau pagini protejate prin parolă la care validatorul obișnuit nu le poate ajunge.

Dacă sunteți mai mult o persoană vizuală, proiectul lui Gael Poupard a11y.css este o foaie de stil care verifică posibilele riscuri în cadrul marcajului dvs. Disponibil atât în ​​format de extensie, cât și de bookmarklet, puteți personaliza limba, precum și nivelul de sfat afișat. În mod similar, sa11y este un instrument care poate fi instalat ca bookmarklet sau integrat în baza de cod. Sa11y este proiectat special pentru a vedea rezultatul conținutului CMS . Afișează orice avertismente într-un limbaj non-tehnic, astfel încât editorii de conținut să poată înțelege și să facă corecțiile necesare.

Nivelul de lectură

Un site accesibil începe cu conținut accesibil. Accesibilitatea cognitivă a fost un accent major al proiectului WCAG 3 în curs de desfășurare și este menționată în prezent în Criteriul de succes 3.1.5, care sugerează că autorii urmăresc ca conținutul să fie înțeles de un nivel de lectură secundar inferior (clasa a 7-a-9).

Editorul Hemingway calculează nivelul de citire al conținutului dvs. pe măsură ce îl scrieți, astfel încât să puteți edita pentru a vă asigura că este ușor de înțeles. Panoul din lateral oferă sugestii despre cum vă puteți îmbunătăți conținutul pentru a-l face mai lizibil. Dacă site-ul dvs. a fost deja publicat, Juicy Studio a produs un instrument de lizibilitate în care trimiteți o adresă URL la formularul furnizat și conținutul site-ului dvs. este analizat și evaluat folosind trei algoritmi diferiți la nivel de citire. Există, de asemenea, o explicație utilă cu privire la ceea ce presupune fiecare dintre aceste scoruri. Cu toate acestea, o limitare a acestui instrument special este că ia în considerare tot textul redat pe pagină, inclusiv lucruri precum navigarea și textul de subsol, care pot denatura rezultatele.

Suite de testare și integrare continuă

Dezavantajul majorității instrumentelor automate de testare este că necesită ca oamenii să le ruleze în browser. Dacă lucrați la o singură bază de cod mare, puteți încorpora testarea accesibilității în procesul de testare existent sau ca parte a fluxului dvs. continuu de integrare. Când scrieți teste personalizate, aveți conștientizarea aplicației dvs. pe care instrumentele de testare automată nu o au, permițându-vă să efectuați testare personalizată și cuprinzătoare într-un mod mai scalabil.

Încă o dată, axe-core apare ca o bibliotecă open-source care stă frecvent la baza majorității acestor instrumente, așa că dacă un instrument funcționează sau nu pentru dvs. se va baza probabil pe cât de bine se integrează cu codul dvs., mai degrabă decât pe orice diferență în rezultatele testării. . Marcy Sutton a publicat un ghid independent de cadru pentru începerea scrierii de teste automate pentru accesibilitate. Ea acoperă diferența dintre testele unitare și testele de integrare și de ce ați putea dori să alegeți unul față de celălalt în diferite scenarii.

Dacă aveți deja un cadru de testare care vă place, există șanse mari să existe deja o bibliotecă care încorporează axe-core în el. De exemplu, Josh McClure a scris un ghid care folosește topor de chiparos, iar Nick Colley a produs o versiune cu aromă de Jest în topor de glumă.

Pa11y este un instrument care oferă o interfață configurabilă în jurul testării, care este disponibilă și într-o versiune CI. Numeroasele sale opțiuni de configurare vă pot permite să rezolvați probleme complexe care pot apărea în timpul testării. De exemplu, funcția de acțiuni vă permite să treceți o serie de acțiuni înainte de a rula testele și poate fi utilă pentru testarea ecranelor care necesită autentificare înainte de a accesa pagina.

Preferintele utilizatorului

Există multe interogări media noi pentru a ajuta la detectarea sistemului de operare și a preferințelor browserului utilizatorului. În zilele noastre, dezvoltatorii detectează adesea aceste setări pentru a seta valorile implicite pentru lucruri precum preferințele de mișcare și modul întunecat, dar acest lucru poate duce și la erori care sunt dificil de reprodus dacă nu aveți aceleași setări.

Magica11y este un set de funcții care vă permite să determinați preferințele utilizatorilor dvs. Trimiteți pagina de documentație către testeri non-tehnici sau încorporați-le în aplicația dvs., astfel încât să puteți reproduce mediile utilizatorului cu mai multă acuratețe.

Încheierea

Se estimează că testarea automată a accesibilității poate detecta doar 30% din toate erorile de accesibilitate. Chiar dacă instrumentele continuă să se îmbunătățească, nu vor înlocui niciodată includerea persoanelor cu dizabilități în procesul dumneavoastră de proiectare și dezvoltare. Un proces de accesibilitate sustenabil și holistic ar putea implica ca întreaga echipă să folosească instrumente pentru a detecta cât mai multe dintre aceste erori posibil la începutul procesului, în loc să lase totul pentru testeri și utilizatori cu dizabilități să găsească și să raporteze aceste probleme mai târziu.

Aveți nevoie de și mai multe unelte? Proiectul A11y și Stark au liste de instrumente suplimentare de accesibilitate atât pentru dezvoltatori, cât și pentru utilizatori! Sau nu ezitați să lăsați orice sugestie în comentariile de mai jos, ne-ar plăcea să aflăm ce instrumente includeți în fluxul dvs. de lucru.