Accesibilitatea web: de ce standardele W3C sunt adesea ignorate

Publicat: 2022-03-11

Termenul du jour este accesibilitatea web - în opinia mea, unul dintre cele mai frecvent înțelese și prost aplicate aspecte ale designului web. Concepția greșită comună este că accesibilitatea este concepută exclusiv pentru persoanele cu dizabilități. De fapt, toată lumea beneficiază de conținut accesibil , iar audiența dvs. va crește prin obținerea accesului la conținut accesibil pe diferite platforme sau în moduri diferite, deoarece vă pot folosi conținutul cu mai puține constrângeri.

Din păcate, mulți dezvoltatori web nu își fac conținutul accesibil și nu respectă regulile de accesibilitate web; astfel, mulți oameni se confruntă cu dificultăți inutile în utilizarea design-urilor și a se bucura de conținut. În cazuri extreme, anumite grupuri de utilizatori nu pot folosi deloc un astfel de site web în mod eficient.

Construirea de conținut accesibil ar trebui să fie a doua natură pentru orice dezvoltator, designer sau creator de conținut, la fel cum se ia în considerare rampele, scările și ascensoarele pentru un arhitect care proiectează o clădire nouă.

Să aruncăm o privire mai atentă la ceea ce se află în culise și de ce atât de mulți dezvoltatori par să treacă cu vederea standardele de accesibilitate web fără un motiv întemeiat.

1. Ce înseamnă „Design accesibil”?

Conținutul accesibil este conținut pe care toată lumea îl poate folosi . Nu cunoaștem toate aspectele modului în care utilizatorii accesează conținutul nostru, așa că trebuie să proiectăm din timp ținând cont de accesibilitate.

După cum am subliniat mai devreme, acest lucru nu se referă la persoanele cu dizabilități, reprezentând aproximativ 15% din populația lumii. În viața reală, utilizatorii ajung adesea să nu consume conținut și să interacționeze cu dispozitivele exact în același mod cum s-a imaginat în timpul dezvoltării. Conținutul accesibil este, de asemenea, necesar din motive legale în multe jurisdicții. Citiți „Factori juridici și politici în dezvoltarea unui caz de afaceri pentru accesibilitatea web pentru organizația dvs.” pentru informații suplimentare despre conformitatea cu accesibilitatea.

Luați în considerare următoarele scenarii în timp ce vă gândiți la conținut accesibil pentru utilizatori care ar putea fi:

Nu pot auzi bine. 360 de milioane de oameni din întreaga lume au dizabilități de auz. Conținutul audio trebuie să aibă transcripții, iar videoclipurile trebuie să aibă subtitrări.
Nu pot vedea bine. Se estimează că 285 de milioane de persoane au deficiențe de vedere în întreaga lume: 39 de milioane sunt orbi și 246 au vedere slabă. Utilizatorii cu deficiențe de vedere folosesc cititoare de ecran (care citesc conținutul folosind vorbirea sintetizată), afișaje braille reîmprospătabile (conținutul ecranului apare pe afișajul braille, iar utilizatorul poate naviga și interacționa cu dispozitivul lor folosind tastele de pe afișaj) sau înaltă -modul de contrast.
Afectat de dislexie. Persoanele cu dislexie întâmpină dificultăți în citirea și înțelegerea conținutului, în special, de exemplu, text justificat sau cu majuscule.
Suferind de limitări fizice. Nu toți oamenii pot folosi toate dispozitivele. De exemplu, navigarea prin conținut trebuie să fie disponibilă nu numai pentru utilizatorii de mouse, ci și pentru utilizatorii care nu pot folosi un mouse.
Utilizarea dispozitivelor mobile. Adaptați-vă conținutul pentru ecrane mici. Permiteți utilizatorului să mărească sau să mărească dimensiunea fontului.

2. Cum să asigurați o bună accesibilitate web

Oamenii folosesc moduri foarte diferite de a naviga și de a consuma conținut. Există utilizatori care trebuie să fie sprijiniți de instrumente software suplimentare care îi ajută să acceseze mai ușor conținutul. Aceste instrumente, cunoscute sub numele de tehnologii de asistență, variază de la cititoare de ecran la ecrane tactile și indicatori de cap.

Cu toate acestea, aplicația și tehnologia de asistență trebuie să discute între ele. Nu tot ceea ce este scris în HTML este pe deplin de înțeles pentru tehnologiile de asistență. Pentru a ajuta la „traducerea” conținutului din „limbaj tehnic” într-un limbaj mai citit de om, au fost create standarde API de accesibilitate suplimentare.

Această diagramă de bază de accesibilitate web ar trebui să vă ofere o idee mai bună despre cum funcționează tehnologiile de asistență.

Pentru a ilustra modul în care funcționează, să ne uităm la un exemplu de cod simplu:

 <a href="#” class=”button”>Delete</a>

Acest cod simplu, pentru cei care folosesc cititorul de ecran, nu înseamnă mare lucru. Este chiar înșelător și se citește doar ca un link cu textul „ Șterge ”. Pentru a ajuta utilizatorii să înțeleagă ce fel de metodă este folosită pentru a efectua acțiunea, putem folosi atributele ARIA (Aplicații de internet îmbogățite de asistență) (specificate la https://www.w3.org/TR/wai-aria/) pentru a depășește rolul inițial. Schimbăm sensul unui link către un buton adăugând atributul role="button" . În acest fel, cititorii de ecran îl vor citi ca pe un buton, nu ca pe un link. Ceea ce este mai potrivit.

Pe scurt, atribuiți ARIA:

Oferă sau îmbunătățește semantica elementelor non-semantice sau alte elemente semantice,
Se asigură că conținutul dinamic (în direct) este încă accesibil.
Oferă rolul de a descrie tipul de widget definit (meniu, element arborescent, glisor, indicator de progres etc.).
Oferă rolul de a descrie structura paginii web (titluri, regiuni și tabele).
Oferă starea widget-urilor (verificat, are pop-up etc.).
Oferă proprietăți pentru drag-and-drop care descriu sursele de glisare și ținte de plasare.

Ce este accesibilitatea în web design?

Ori de câte ori proiectați un conținut, gândiți-vă la două lucruri: cum este perceptibil conținutul și cum este operabil . Să examinăm câteva exemple pentru a ilustra accesibilitatea în designul web.

Să presupunem că veți crea un element derulant selectat personalizat. Iată ce trebuie luate în considerare atunci când proiectați elementul:

Marcați diferite stări: activat, dezactivat, doar pentru citire.
Marcați elementul când ajunge la starea de focalizare/hover.
Marcați fiecare element de opțiune când ajunge la starea de focalizare/hover.
Asigurați-vă că conținutul este încă lizibil atunci când doar textul este mărit până la un nivel de 200%.
Asigurați-vă că există suficient contrast între text și fundal. Ajută persoanele cu vedere moderat scăzută sau pe dispozitive în condiții extreme de iluminare, de exemplu, expuse la lumina directă a soarelui sau pe un afișaj cu luminozitate scăzută, să citească conținutul.

Un alt exemplu ar putea fi selectarea unei culori pentru a descrie o stare. Iată lucrurile pe care trebuie să le luați în considerare atunci când proiectați o secțiune în care utilizatorul va putea alege o culoare:

Există oameni care au dificultăți în a distinge anumite culori. Deci verde nu înseamnă verde pentru toți vizitatorii tăi. Pentru a o remedia, adăugați o descriere pentru fiecare culoare care descrie scopul.
Marcați fiecare element când ajunge la starea de focalizare/hover.
Asigurați-vă că există suficient spațiu între elemente, astfel încât fiecare element să poată fi activat cu ușurință, de exemplu, pe dispozitive cu o fereastră de vizualizare mai mică.

3. Testarea accesibilității: de unde să începem?

Nu există o singură modalitate de a verifica și de a vă asigura că conținutul web este pe deplin accesibil. Trebuie utilizate mai multe tehnici pentru a verifica și a remedia problemele de accesibilitate. Puteți începe prin a defini problemele , soluțiile și prioritățile .

Probleme definitorii

În timp ce lucrați la probleme de accesibilitate, încercați întotdeauna să creați un bilet pentru fiecare problemă cu un titlu clar. Acest lucru ar trebui să simplifice înțelegerea problemei și să ajute la definirea unei priorități.

Exemplu prost: utilizatorul nu poate folosi tastatura de pe pagină.

Exemplu bun: nu se poate utiliza navigarea cu tastatura în meniul principal.

Exemplul prost duce la un caz care va fi destul de greu de închis în scurt timp. Discuțiile pe mai multe subiecte pot începe și în secțiunea de comentarii, deoarece titlul biletului este prea generic.

Exemplul bun indică exact problema și se concentrează doar pe un singur lucru: navigarea cu tastatura în meniul principal.

Prioritizează problemele de accesibilitate web

Prioritățile sunt importante deoarece definesc care probleme trebuie rezolvate mai întâi. De exemplu, WCAG este împărțit la trei niveluri de conformitate: A, AA, AAA, ceea ce înseamnă că ar trebui să începeți de la un nivel minim A, dar asta nu înseamnă automat că nivelurile AA și AAA sunt doar „plăcut de avut”. Toate nivelurile sunt importante și este important să nu prioritizați presupunând că doar nivelul A este suficient.

Cu toate acestea, nivelurile WCAG (sau orice alte linii directoare) pot fi destul de greu de înțeles uneori și, pentru a le simplifica puțin, puteți lua în considerare și următoarele definiții prioritare:

Critice – Probleme care împiedică utilizatorii să folosească o aplicație. Nu există soluții disponibile.
Major – Probleme care fac utilizarea unei aplicații dificilă și/sau dezorientatoare, dar nu blochează capacitatea utilizatorului de a finaliza operația.
Minor – Probleme care sunt enervante, dar care nu împiedică utilizarea sau îmbunătățiri care ar putea fi aduse aplicației.
Informații – Nu respectă cele mai bune practici. Recomandări generale pentru îmbunătățiri.

Soluții

Niciunul dintre liniile directoare – prin care mă refer la WCAG, Secțiunea 508 sau ADA – nu vă va oferi o soluție directă în ceea ce privește codul tehnic pentru modul în care ar trebui rezolvată o problemă specificată. Ele definesc doar comportamentul așteptat. Cu toate acestea, WCAG a definit în plus proceduri de testare care ar trebui să ajute la înțelegerea modului de reproducere a problemei și există un grup comunitar de monitorizare automată WCAG, o comunitate W3C care se concentrează pe dezvoltarea unor reguli de încredere pentru testarea accesibilității web, atât automate, cât și semi-automatizate.

Un exemplu pentru tehnica WCAG G4 („Permiterea ca conținutul să fie întrerupt și repornit de unde a fost întrerupt”):

Procedura de testare

Pe o pagină cu conținut în mișcare sau derulare,

Utilizați mecanismul oferit în pagina web sau de către agentul utilizator pentru a întrerupe conținutul în mișcare sau derulare.
Verificați dacă mișcarea sau derularea s-au oprit și nu repornesc de la sine.
Utilizați mecanismul furnizat pentru a reporni conținutul în mișcare.
Verificați dacă mișcarea sau derularea a reluat din punctul în care a fost oprită.

rezultate asteptate

Nr. 2 și Nr. 4 sunt adevărate.

După cum vedem, nu există soluții tehnice, ci un comportament așteptat definit. Modul în care dezvoltatorii web îl implementează depinde de ei.

Ghid de accesibilitate web și standarde W3C

Urmărirea standardelor web de bază ar trebui să fie punctul dvs. de plecare:

Cel mai comun este Ghidul de accesibilitate a conținutului web cunoscut sub numele de WCAG. WCAG 2.0 este „un standard tehnic stabil, de referință. Are 12 linii directoare care sunt organizate în 4 principii: perceptibil, operabil, ușor de înțeles și robust. Pentru fiecare ghid, există criterii de succes testabile, care sunt la trei niveluri: A, AA și AAA.”
Techniques for WCAG 2.0 este un ghid cuprinzător pentru autorii de conținut web.
Cerințe pentru utilizatori de accesibilitate media W3C — Acest document prezintă cerințele de accesibilitate pe care le au utilizatorii cu dizabilități în ceea ce privește audio și video pe web.
Actul privind comunicațiile și accesibilitatea video din secolul al XXI-lea — CVAA este împărțit în două titluri sau secțiuni mari. Titlul I abordează accesul la comunicații pentru a face produsele și serviciile care utilizează bandă largă accesibile complet persoanelor cu dizabilități. Titlul II al actului de accesibilitate deschide noi terenuri pentru a facilita vizionarea programelor video de la televizor și de pe internet pentru persoanele cu dizabilități.
Secțiunea 508 – cerințe de accesibilitate pentru tehnologia informației și comunicațiilor (TIC) care se aplică tuturor agențiilor federale atunci când dezvoltă, achiziționează, întrețin sau utilizează tehnologia electronică și informațională.
Accesibilitatea site-urilor web în conformitate cu titlul II al Americans with Disabilities Act (ADA) — Acolo, veți afla cum cerințele de nediscriminare ale titlului II din ADA se aplică site-urilor web ale guvernelor de stat și locale.

Testarea accesibilității web: Cum știu dacă conținutul meu este accesibil sau nu?

Iată punctele de control de bază, fundamentale, care ar trebui să vă ajute să vă faceți conținutul web mai accesibil încă de la pasul unu:

Validați codul HTML. Asigurați-vă că structura HTML nu are erori, deoarece tehnologiile de asistență pot avea probleme la interpretarea conținutului paginii.
Testați doar cu o tastatură. Asigurați-vă că toate elementele acționabile sunt accesibile folosind numai tastatura. De asemenea, trebuie să puteți efectua toate acțiunile folosind o tastatură, de exemplu, trimiterea unui formular.
Testați cu instrumente de testare a accesibilității și validatori. Utilizați instrumente care scanează și verifică potențialele erori de accesibilitate.
Conținut dinamic. Notificați utilizatorii cititorului de ecran despre modificările dinamice, de exemplu atunci când rezultatele căutării s-au modificat.
Nu vă bazați pe culori pentru a descrie sensul. Folosiți culoarea împreună cu descrierea, de exemplu, avertisment [cutie galbenă].
Nu îndepărtați conturul la focalizare. Aceasta este o caracteristică eliminată în mod obișnuit folosind outline: 0; Nu faceți asta, deoarece utilizatorii de tastatură își vor pierde orientarea pe pagină. Puteți lua în considerare eliminarea conturului de focalizare pentru utilizatorii care nu sunt cu tastatură, dar oferiți întotdeauna o schiță de focalizare pentru utilizatorii de tastatură.
Mesaje de eroare. Spuneți întotdeauna utilizatorului cum să corecteze o eroare. Nu spuneți doar că datele sunt nevalide.
Ordinea tabulatorului. Asigurați-vă că navigarea bazată pe file respectă convențiile stabilite în interfața grafică cu utilizatorul. Cel puțin, ar trebui să urmeze direcția de citire a limbii implicite a aplicației. În engleză, de exemplu, ordinea de citire este de sus în jos, de la stânga la dreapta; în arabă este de sus în jos, de la dreapta la stânga.
Zoom. Asigurați-vă că conținutul paginii este încă lizibil în timp ce măriți textul cu până la 200%.
Opriți imaginile. Mai poți folosi pagina într-un mod confortabil? Există texte alternative pentru toate imaginile?
Cititor de ecran. Testați pentru a vedea dacă puteți citi și naviga prin conținut folosind cel puțin un cititor de ecran, de exemplu, VoiceOver, Windows Narrator sau NVDA.
Mod contrast ridicat. Verificați dacă conținutul este încă lizibil în timp ce treceți la modul cu contrast ridicat.
Marimea fontului. Asigurați-vă că dimensiunea fontului de pe pagină are dimensiunea nu mai mică de 10 px.

4. Greșeli frecvente în accesibilitatea web

Cea mai frecventă greșeală este aceea de a nu identifica cerințele de accesibilitate înainte de dezvoltare . Din păcate, cu cât accesibilitatea ulterioară va fi o parte a dezvoltării, cu atât va fi mai greu să implementezi soluții.

Iată o listă cu unele dintre cele mai frecvente greșeli pe care dezvoltatorii le fac atunci când implementează accesibilitatea:

Nu există posibilitatea de a naviga prin conținut folosind doar o tastatură .
Folosirea greșită a proprietății de contur CSS. În cele mai multe cazuri, outline: 0; este folosit, ceea ce înseamnă că conturul din jurul fiecărui element acționabil nu mai este vizibil. Nu utilizați outline: 0; sau outline: 0 !important; . Utilizatorul va pierde capacitatea de a vedea elementul focalizat în prezent în timp ce navighează prin conținut, cu excepția cazului în care există o altă alternativă la aceasta, de exemplu, folosind proprietatea CSS de border .
Pierderea focalizării de la elementul curent, de exemplu, din cauza manipulărilor DOM sau folosind metoda blur() . Acest lucru se întâmplă adesea pentru aplicațiile cu o singură pagină.
Nu există notificări pentru utilizatorii cititorului de ecran că ceva s-a schimbat, de exemplu, conținutul a fost descărcat utilizând XMLHttpRequest API și au fost redate noi modificări în UI, dar utilizatorul nu a fost notificat. Acest lucru se întâmplă adesea cu aplicațiile cu o singură pagină.
Selector de date inaccesibil. În multe cazuri, sunt folosite strângeri de date inaccesibile. Utilizatorii nu pot naviga prin opțiunile calendarului folosind tastatura.
Utilizarea extensiilor care pretind că remediază automat problemele de accesibilitate . Folosiți-le cu atenție și verificați rezultatele. Folosirea greșită a acestora poate crea mai multe probleme decât soluții.
Adăugarea la elementul tabindex a atributului cu un număr de index mai mare de 0. Scopul utilizării tabindex cu un index mai mare de 0 este în principal de a „corecta” calea de navigare. Cu toate acestea, luați în considerare mai degrabă modificarea structurii HTML pentru a obține calea naturală de navigare. Manipularea acestuia folosind tabindex poate duce la probleme de întreținere și la o cale de navigare imprevizibilă.
Ierarhie greșită a titlurilor. Din păcate, se vede încă destul de des, dar ierarhia antetului nu este construită corect, de exemplu, <h1> , <h5> și <h2> . Utilizatorii cititorului de ecran folosesc anteturi pentru a naviga prin secțiuni, iar structura necorespunzătoare este confuză, deoarece este greu de înțeles contextul.
Lipsește suport cu contrast ridicat. Există oameni care își folosesc software-ul în modul de contrast ridicat. Asigurați-vă că conținutul dvs. este încă perceptibil.
Folosind o soluție CAPTCHA inaccesibilă. Din păcate, toate CAPTCHA-urile cunoscute de mine sunt fie inaccesibile, fie foarte greu de utilizat.
Prea multe și/sau animații care nu pot fi întrerupte. Redarea automată a videoclipurilor, a reclamelor sau a caruselelor de imagini distrag foarte mult atenția.
Bucăți mari de text. Text care este condensat într-un singur bloc foarte mare, fără spații, virgule sau puncte. Foarte greu de citit. Împărțirea în bucăți mai mici, mai multe paragrafe și subtitluri ajută la o mai bună organizare a conținutului textului.
Probleme de zoom. Asigurați-vă că conținutul este încă lizibil și navigabil atunci când măriți până la 200%.
Bazându-se pe culori. De foarte multe ori starea unui element este marcată doar de o culoare, de exemplu, o stare de avertizare este marcată doar de un glonț galben; această culoare nu este percepută în același mod pentru persoanele daltoniste.
Ținte mici pe care se poate face clic/atinge. Zonele pe care se poate face clic/atinge sunt adesea prea mici. Făcându-l mai mare, utilizatorii pot să le activeze mai ușor.

Dar cum îmbunătățesc accesibilitatea web?

Definirea problemelor este un lucru. Repararea este cu totul alta și de multe ori nu atât de ușor pe cât pare. Acest lucru se datorează faptului că implementările API-ului de accesibilitate nu sunt consecvente și uneori trebuie să găsim soluții alternative sau chiar să acceptăm faptul că ceva nu va funcționa deloc atunci când încercăm să remediem problema.

În ceea ce privește instrumentele, nu există un singur instrument care să poată verifica toate combinațiile posibile, dar, ca un bun început, aceste instrumente ar trebui să ajute:

Serviciul de validare a marcajului W3C — Doar pentru a vă asigura că conținutul HTML nu are erori. Dacă structura HTML are erori, atunci rezultatul este imprevizibil și nu poate fi procesat corespunzător, în special prin diferite tehnologii de asistență.
https://www.w3.org/WAI/ER/tools/ — O listă de programe sau servicii online care vă ajută să determinați dacă conținutul web respectă regulile de accesibilitate.
Și instrumentul meu, ASLint https://www.aslint.org/, vă ajută să găsiți probleme de accesibilitate.

Rețineți întotdeauna că niciun instrument de accesibilitate nu poate înlocui testarea manuală , deoarece nu toate scenariile pot fi complet sau deloc automatizate, de exemplu, verificarea raportului de contrast de luminanță pe elemente cu position: fixed; .

Concentrați-vă pe problemele care blochează utilizarea aplicației dvs., de exemplu, utilizatorul nu poate naviga prin meniu folosind tastatura.

De ce este important să faceți conținut accesibil

Toată lumea vrea să-și răspândească conținutul cât mai larg posibil. Accesibilitatea ajută în acest domeniu, la multe niveluri, de la atingerea unui public mai mare până la îmbunătățirea experienței utilizatorului pentru toți utilizatorii. În plus, accesibilitatea nu este doar pentru ceea ce ați putea considera în mod tradițional persoane cu dizabilități. Fie că este o persoană care îmbătrânește și trece prin schimbările fizice care le însoțesc, o persoană care face jogging într-o zi însorită și care are nevoie de reglarea automată a contrastului pe telefon sau un părinte cu mâinile pline de pungi de cumpărături care dorește să trimită un mesaj text prin voce, accesibil tehnologia este o tehnologie pe care toți utilizatorii o pot folosi din când în când.

Ca un bonus suplimentar, efectul pozitiv este că conținutul accesibil care îndeplinește pe deplin standardele WCAG 2.0 este mai ușor de accesat cu crawlere și de înțeles de motoarele de căutare și care poate avea un efect semnificativ asupra poziției unui site. Astfel, designul accesibil poate genera trafic suplimentar pe site.

În cele din urmă, iată câteva statistici pe care trebuie să le luați în considerare:

Peste un miliard de oameni din întreaga lume se confruntă cu un anumit tip de dizabilitate.
Îmbătrânirea populației. Între 2015 și 2030, se estimează că numărul persoanelor în vârstă – cei cu vârsta de 60 de ani sau peste – din lume va crește cu 56%, de la 901 milioane la peste 1,4 miliarde.
Designul universal este cheia. Designul universal se referă la un spectru larg de idei și practici pentru producerea de servicii, produse și medii care sunt în mod inerent accesibile și utilizabile de către oameni de toate abilitățile.
Tipuri de dizabilități: Există cinci categorii mari de dizabilități, inclusiv vizual, mobilitate, vorbire, cogniție și auz.

Cu toții avem nevoie de servicii de înaltă calitate. Să le livrăm și pe ele .