Sfaturi de testare a accesibilității pentru WordPress

În lumea de astăzi, numele jocului este incluziunea. Și în timp ce accesibilitatea web nu este un concept nou, în ultimii ani accesibilitatea web a devenit mai accesibilă în sine.

În esență, accesibilitatea web este practica de a proiecta și construi un site web pentru a fi funcțional pentru cât mai mulți utilizatori. Utilizatorii nevăzători vor interacționa cu un site web în mod diferit față de utilizatorii care au vedere, sau daltonic sau cineva cu abilități motorii afectate.

Lansate inițial ca versiunea 2.0 în 2008 și dezvoltate de World Wide Web Consortium (W3C), Web Content Accessibility Guidelines (WCAG) reprezintă standardul de aur pentru accesibilitatea web. Versiunea actuală, WCAG 2.1, prezintă cele mai bune practici în spațiul de accesibilitate web în 4 categorii diferite: perceptibil, operabil, ușor de înțeles și robust. Se anticipează că următoarea versiune, 2.2, va fi lansată la sfârșitul anului 2022 pentru a defini în continuare liniile directoare existente și pentru a adăuga câteva linii directoare noi.

În plus, accesibilitatea este înrădăcinată în comunitatea WordPress și se angajează să încorporeze cele mai bune practici de accesibilitate în software-ul în sine. Unii dezvoltatori WordPress merg chiar și dincolo de temele și pluginurile lor. De exemplu, tema Total a WPExplorer menține accesibilitatea în prim-plan, atât de mult încât dezvoltatorul AJ face adesea îmbunătățiri regulate de accesibilitate.

Accesibilitatea WordPress este atât de importantă și nu este atât de dificil de navigat ca cândva. Când lucrați la un proiect de reproiectare a site-ului web sau chiar dacă adăugați noi funcții la site-ul dvs. existent, iată câteva elemente de luat în considerare în timpul proceselor de proiectare și construire, care vă vor ajuta site-ul să se conformeze standardelor actuale de accesibilitate.

Design și construcție inițială

Standardele de accesibilitate web ar trebui luate în considerare pe toată durata unui proiect WordPress. Deși procesele de testare post-build vor detecta probabil orice erori care au fost omise în versiunea inițială, este întotdeauna cel mai bine să construiți site-ul cât mai „curat” posibil prima dată. În această fază a proiectului dvs. de site, luați în considerare următoarele:

Contrast de culoare

Unul dintre elementele web cele mai ușor de testat pentru accesibilitate sunt culorile. WCAG 2.1 desemnează rapoarte specifice de contrast de culoare pentru oricare 2 culori de pe un site web (prim-plan și fundal). Raportul de contrast trebuie să fie de cel puțin 4,5:1 pentru text de dimensiune normală (sub 18 pt) și 3:1 pentru text mai mare (18 pt și peste).

Dar de unde știi care este raportul de contrast al culorii? WebAim, un lider de încredere în accesibilitatea web de peste 20 de ani, a creat un instrument excelent pentru verificarea raportului de contrast al culorilor tale. Adăugați un cod hexadecimal pentru culoarea primului plan și un cod hexadecimal de fundal și instrumentul va calcula raportul de contrast. Dacă raportul nu este suficient de mare, valoarea fiecărei culori poate fi ajustată printr-un glisor pentru a ajuta la determinarea combinațiilor de trecere în cadrul aceleiași culori.

Din fericire, schimbarea și experimentarea cu diferite opțiuni de culoare pe site-ul dvs. este un proces relativ simplu. Generatorul Gutenberg nativ al WordPress vă permite să schimbați cu ușurință culorile unui întreg bloc de conținut sau să vizați în mod specific orice număr de cuvinte specifice. De asemenea, puteți face ajustări în panoul de teme pentru a face modificări globale de culoare.

Culori de rezervă

În zilele noastre, majoritatea site-urilor sunt proiectate cu o mulțime de imagini. Dar din mai multe motive, unii utilizatori pot dezactiva imaginile sau stilurile de pe site-ul dvs. pentru a obține informațiile de care au nevoie mai rapid sau mai ușor.

Imaginați-vă că aveți un panou cu o imagine mare și text alb deasupra. Când imaginile sunt dezactivate într-un browser web, fundalul site-ului este implicit alb. Acest text alb este acum invizibil pe fundalul alb. Dacă ar fi conținut important, cum ar fi un îndemn la acțiune sau o propunere de valoare?

Pentru a rezolva aceste probleme, asigurați-vă că adăugați culori de rezervă la toate panourile de pe site-ul dvs. cu text deasupra imaginilor. În exemplul anterior, schimbarea culorii de rezervă a panoului respectiv în negru ar rezolva problema, textul alb ar fi vizibil. Dacă nu sunteți sigur ce culoare să utilizați ca culoare de rezervă, instrumentul de contrast al culorilor Web Aim este un ghid excelent.

Opțiuni multiple de navigare

Designul excelent al meniului poate fi o caracteristică remarcabilă pe un site, dar este, de asemenea, important să includeți mai multe opțiuni de navigare. Unii utilizatori pot găsi mai rapid informațiile pe care le caută dacă navigarea pe site a fost prezentată într-un alt mod.

O hartă a site-ului cu link în subsolul unui site web poate fi o soluție excelentă. Acest lucru permite utilizatorilor să vadă toate paginile disponibile într-o zonă și ar putea îmbunătăți experiența utilizatorului. Pluginul WP Sitemap Page este o opțiune solidă pentru a adăuga cu ușurință un simplu sitemap care poate lista pagini, postări de blog, studii de caz, articole din portofoliu și multe altele.

O altă opțiune ar fi să adăugați o funcționalitate de căutare pe site-ul dvs., astfel încât un utilizator să poată căuta rapid site-ul dvs. complet pentru un anumit cuvânt cheie sau expresie. În mod implicit, WordPress include un widget de căutare de bază pe care îl puteți utiliza în bara laterală sau subsol, dar există și un bloc de căutare în Gutenberg (precum majoritatea celorlalți constructori de pagini) și adesea dezvoltatorii de teme vor construi o casetă de căutare sau o pictogramă în anteturile temei. În plus, puteți personaliza și îmbunătăți funcționalitatea de căutare WordPress cu o varietate de plugin-uri utile.

Formular de feedback privind accesibilitatea

În mod ideal, subsolul site-ului dvs. ar trebui să fie conectat la un formular de feedback privind accesibilitatea. Chiar dacă luați cât mai mulți pași de accesibilitate, există întotdeauna loc de îmbunătățire, pe măsură ce liniile directoare și tehnologia evoluează pentru a se adapta mai bine utilizatorilor.

Includerea unei pagini cu un formular de feedback de accesibilitate permite utilizatorilor să trimită comentarii sau preocupări suplimentare cu privire la accesibilitatea site-ului dvs., dacă ceva lipsește și le limitează vizita (nu uitați să utilizați un formular WordPress accesibil). De asemenea, îi informează că îți pasă de experiența lor web. Apoi puteți utiliza acest feedback pentru a vă îmbunătăți site-ul pentru acel utilizator și viitorii utilizatori care au nevoie de acomodații similare. Ascultarea comunității și adaptarea atunci când este necesar este o parte critică a procesului.

Procese de testare post-construcție

Odată ce cea mai mare parte a site-ului dvs. este construită, este timpul să începeți o rundă mai aprofundată de testare a accesibilității. Aceasta ar trebui să includă testarea automată și testarea manuală. Testarea automată este o resursă excelentă și economisește timp pentru a detecta anumite probleme. Cu toate acestea, accesibilitatea este o preocupare bazată pe om, iar AI nu este capabilă să recunoască toate nuanțele prezente. Prin urmare, este la fel de important să testați manual anumite elemente ale site-ului.

Testare automată

Există o varietate de instrumente excelente de testare automată pentru a promova un flux de lucru fără probleme de accesibilitate. Este important să rețineți că trecerea testării automate nu este suficientă pentru a face un site accesibil, dar este un punct de plecare excelent.

Pentru a vedea dacă site-ul dvs. trece standardele de accesibilitate de bază, instrumentul WAVE este o colecție de instrumente automate de evaluare care scanează în esență o pagină web și raportează eșecurile WCAG și elementele care necesită investigații suplimentare. Cu ajutorul unei extensii de browser, instrumentul WAVE va indica defecțiuni evidente de accesibilitate în roșu. Ele sunt împărțite în erori și erori de contrast. Erorile sunt de obicei legate de codificarea site-ului dvs. Erorile de contrast sunt cauzate atunci când schema de culori nu respectă standardele de contrast (revizuite mai devreme în articol).

Odată ce sunteți gata să rezolvați orice erori de contrast de pe site-ul dvs., există opțiuni de plugin precum Equalize Digital Accessibility Checker, care pot simplifica procesul de ajustare în backend-ul site-ului dvs. Versiunea gratuită a pluginului va verifica automat pagina și postările de bază pentru a raporta erori regulate și erori de contrast pe fiecare pagină. Actualizarea la versiunea pro permite scanarea tipurilor de postări personalizate. Pluginul facilitează identificarea erorilor din cod și efectuarea modificărilor după cum este necesar.

Testare manuală

După cum sa menționat, există limitări în instrumentele și procesele legale actuale disponibile pentru testarea automată. Instrumentul WAVE și Equalize Checker sunt resurse excelente pentru scanarea automată și pot economisi mult timp. Dar IA pe care le creează oamenii nu au nevoie de aceleași acomodari ca utilizatorii umani reali cu dizabilități.

Este important să revizuiți manual site-ul și să utilizați unele dintre instrumentele pe care un utilizator cu dizabilități le poate utiliza pentru a vedea dacă navigarea și colectarea de informații sunt posibile. Câteva aspecte care trebuie verificate manual includ capabilitățile de mărire a paginii, navigarea cu tastatura, cititorul de ecran și textul alternativ.

Testarea de mărire a paginii ar trebui să verifice dacă o pagină poate fi mărită la 200% fără a pierde conținut sau funcționalitate. Acest lucru ar trebui să fie posibil folosind numai capacitățile native de zoom ale browserului și fără alte tehnologii de asistență. De asemenea, veți dori să vă asigurați că mărirea nu necesită apoi utilizatorului să deruleze în ambele direcții (sus-jos și stânga-dreapta).

Unii utilizatori nu pot (sau preferă să nu folosească un mouse pentru a naviga pe un site web. În schimb, vor folosi tastatura pentru a naviga, folosind adesea tasta TAB și alte câteva taste pentru a vă deplasa între elemente. Pentru testarea navigării cu tastatura , trebuie să vă asigurați că elementele interactive de pe site-ul dvs. au un contur de focalizare vizibil atunci când o tastatură vizează acel element. De asemenea, verificați toate funcțiile de trecere cu mouse-ul pentru a vă asigura că TAB dezvăluie orice conținut ascuns. Deși acest proces poate fi descurajator, începeți cu paginile cheie și încercați să le treceți prin TAB prin fiecare. Puteți accesa corect tot conținutul și linkurile?

Testarea cititorului de ecran poate fi cea mai dificilă dintre toate, deoarece tehnologia este mai de nișă. Cea mai bună modalitate de a verifica accesibilitatea site-ului dvs. pentru utilizatorii cititorului de ecran este să rulați efectiv prin site-ul dvs. cu un cititor de ecran. Este clară ierarhia paginilor dvs. web? Folosiți corect anteturile și indicați anumite elemente după cum este necesar pentru cititoarele de ecran?

Testarea manuală poate consuma mult timp și este dificil să vă asigurați că site-ul dvs. este accesibil pentru toate instrumentele de asistență disponibile pentru utilizare. Cu toate acestea, este un pas incredibil de important, deoarece aceste locuri de cazare ar fi altfel trecute cu vederea.

În lumea de astăzi, incluziunea este cea mai bună politică. Un site web accesibil înseamnă că mai mulți vizitatori pot obține informații despre compania dvs. și pot contacta. Deși nu există încă cerințe specifice pentru site-ul web conform ADA, dacă unii utilizatori nu pot accesa informațiile de pe site-ul dvs. de care au nevoie pentru a face următorii pași, pierdeți potențiali clienți sau clienți.

Utilizați informațiile prezentate în acest articol ca punct de plecare pentru călătoria dvs. de accesibilitate. Rețineți că accesibilitatea web este un proces continuu, deoarece standardele și liniile directoare sunt actualizate frecvent pentru a servi mai bine comunității. Abordați această lume cu o minte deschisă și înțelegând că poate nu este un proces deschis și închis. La sfârșitul zilei, totul este despre îmbunătățirea experienței utilizatorului pentru toți utilizatorii tăi.