Cum să faci un audit de bază al accesibilității

Publicat: 2017-08-09

Deci ați învățat multe despre accesibilitate în ultima vreme, dar acum doriți să vă verificați singur site-ul și să vedeți unde trebuie să vă îmbunătățiți. Cum faci asta? Este timpul pentru un audit de accesibilitate! În acest tutorial, vă voi arăta frânghiile unui audit de accesibilitate de bază care vă va pune pe drumul spre a avea un site mai accesibil.

După cum vă veți aminti din seria mea de prezentare generală, un site web accesibil este perceptibil, operabil, ușor de înțeles și robust. Testarea pentru a vă asigura că site-ul dvs. atinge toți cei patru piloni ai accesibilității nu implică codificare, așa că nu vă faceți griji. Este posibil să instalăm o extensie Chrome sau două, dar îmi veți mulțumi mai târziu. Să începem!

NOTĂ: Acest tutorial presupune că știți cum să utilizați Chrome Inspector sau oricare dintre instrumentele de bază pentru dezvoltatori ale browserului sunt furnizate.

Perceptibil

aspect prin volanta de auditare a accesibilității femeie în ochelari de soare cu tabletă

Începeți cu perceptibil, deoarece dacă site-ul dvs. nu poate fi perceput de utilizator, acesta nu știe că există. Aici ne vom concentra pe trei lucruri: alternative de text, subtitrări și culoare.

Pentru fiecare imagine de pe site-ul dvs. care este mai mult decât decorativă (adică este o parte vitală a informațiilor, nu doar o îmbunătățire), imaginea ar trebui să aibă un atribut alt . Puteți verifica acest lucru inspectând codul sursă al imaginii și căutând atributul. Dacă este acolo, grozav! Acum trebuie să ne asigurăm că valoarea atributului este utilă. Un atribut alt ar trebui să descrie imaginea într-un mod care să informeze utilizatorii cu deficiențe de vedere. Aceasta NU este o oportunitate de a introduce cuvinte cheie SEO în site-ul dvs. Fă-ți descrierea scurtă, la obiect și utilă. Descrierile mai lungi ar trebui salvate pentru conținutul site-ului în sine.

Mersul împreună cu imaginile este conținut video și audio. În ambele cazuri, va trebui să furnizați un fel de subtitrăre sau transcriere a conținutului. Videoclipurile dvs. ar trebui să aibă activată subtitrările sau să fie pre-subtitrate. Testarea pentru aceasta este la fel de simplă ca începerea unui videoclip pe site-ul dvs. și verificarea subtitrărilor.

În cele din urmă, trebuie să ne testăm culorile. Pentru a face acest lucru, vom instala o extensie Chrome care activează un mod în tonuri de gri. Odată instalat, încărcați din nou site-ul și activați extensia. Observați zonele greu de citit. Acestea sunt problemele tale dintr-o perspectivă contrastantă. De acolo, dezactivați tonul de gri și utilizați verificatorul de contrast de culoare Snook pentru a vă verifica scorurile. Va trebui să folosiți inspectorul pentru a vă prinde valorile hexadecimale dacă nu le aveți la îndemână. Amintiți-vă, orice valoare mai mică de 4,5 (sau 3,0 pentru text mare) este o problemă.

Operabil

Următorul pas este să vă asigurați că site-ul este operabil. Aceasta înseamnă că vom testa funcționalitatea tastaturii. Pentru a face acest lucru, deschideți site-ul dvs. Odată ce pagina este încărcată, apăsați tasta Tab. Ce se întâmplă? Să sperăm că va apărea un link de ignorare. Dacă nu, ar trebui să aveți cel puțin o schiță în jurul primului link de pe pagină. În mod ideal, veți avea stări :focus personalizate, dar minimul ar trebui să fie ceea ce oferă browserul. De acolo, apăsați în continuare tasta Tab pentru a vă asigura că mergeți de la un link la altul, în ordinea în care apar pe pagină. Dacă concentrarea continuă să sară, ai o problemă cu indexul de file care trebuie rezolvată. Pluginurile de formulare sunt adesea vinovate aici.

aspect prin volanta de verificare a accesibilității om în flanel pe telefonul mobil într-o carcasă

De inteles

În continuare, vom verifica site-ul dvs. pentru a ne asigura că este lizibil. La urma urmei, dacă un utilizator nu vă poate citi conținutul, ce rost are să îl aveți? Cerințele de aici sunt destul de simple: limba site-ului dvs. poate fi determinată cu cod? Pentru a verifica, deschideți inspectorul și priviți eticheta principală <html> . Are un atribut lang ? Dacă da, ești clar. De asemenea, veți dori să vă asigurați că oricăror segmente care sunt într-o altă limbă au aplicat atributul lang.

Există și alte verificări de nivel AAA privind lizibilitatea, dar acestea depășesc domeniul de aplicare al unui audit de bază. În general, totuși, veți dori să vă păstrați conținutul la un nivel de lectură de clasa a 6-a, cu excepția cazului în care publicul țintă este de un nivel superior de educație.

Celelalte aspecte importante ale substabilității site-ului dvs. gravitează în jurul mesajelor de eroare și schimbării contextului. Mai precis, lipsa acestuia. Când un utilizator se concentrează sau activează o intrare, nu ar trebui să aibă loc o schimbare semnificativă. Pagina nu ar trebui să sară decât dacă utilizatorul este avertizat într-un fel (o pictogramă săgeată, text de ajutor etc.). Acestea sunt genul de lucruri pe care le-ați fi observat când testați cu tastatura.

Când testați formularele dvs., același lucru se poate spune despre mesajele de eroare. Erorile ar trebui să fie afișate clar utilizatorului și să rămână pe ecran, astfel încât să poată corecta erorile. Este ceva ce chiar și site-urile mari greșesc tot timpul. Ei uită să pună accentul pe partea din pagină care are o eroare sau măcar să o marcheze cumva. Testați formularele pentru erori și asigurați-vă că mesajele sunt clare. Folosirea unui plugin de formulare solide vă va ajuta foarte mult, dar nu vă bazați pe plugin pentru a vă face toată munca. De asemenea, veți dori să vă asigurați că nu utilizați doar o culoare (de obicei roșie) pentru a semnifica o eroare. Textul propriu-zis „Eroare” este foarte important, mai ales pentru persoanele cu daltonism roșu/verde.

Dincolo de erori, formularele și intrările dvs. ar trebui să aibă instrucțiuni clare. Parcurgeți fiecare intrare de pe site-ul dvs. și asigurați-vă că este foarte clar ce ar trebui să facă utilizatorul. De exemplu, formularele de căutare ar trebui să aibă ceva în afară de o lupă. O simplă etichetă „căutare” va fi suficientă. Asigurați-vă că utilizatorii dvs. știu ce să facă cu elementele interactive. Nu presupune niciodată.

Robust

layout prin destop de audit al accesibilității volantului cu grafice și notebook în fața tastaturii

În cele din urmă, site-ul dvs. trebuie să fie robust. Acest lucru înseamnă că site-ul poate fi utilizat cu tehnologii de asistență, cum ar fi cititoarele de ecran. Dacă site-ul tău este bine format cu HTML, ar trebui să fii bine. Rețineți că unele browsere moderne, inclusiv Chrome, vor remedia erorile HTML de bază sau cel puțin vor încerca să le repare. Cea mai rapidă modalitate de a testa robustețea site-ului dvs. este să încărcați site-ul în Safari și să activați VoiceOver, un cititor de ecran încorporat. Dacă site-ul dvs. nu funcționează, va trebui să rezolvați aceste probleme.

Încheierea

Acest tutorial de audit a fost rapid, dar acesta este ideea. Nu durează atât de mult pentru a vă asigura că site-ul dvs. este accesibil, iar instrumentele necesare sunt minime. Important de reținut este că vrei să te pui în pielea cuiva care nu are abilitățile pe care le iei de la sine înțeles ca utilizator obișnuit. Păstrați această mentalitate, iar auditurile dvs. se vor asigura că site-urile dvs. sunt mai accesibile.

În cazul în care ați ratat-o, consultați această serie despre accesibilitate:

  • O introducere în accesibilitate: partea 1
  • O introducere în accesibilitate: partea 2
  • O introducere în accesibilitate: partea 3