Cele mai frecvente probleme de accesibilitate ale unui site web și cum să le identifici
Un site web poate funcționa perfect pentru echipa care îl administrează și, cu toate acestea, poate crea dificultăți serioase pentru unii utilizatori.
Problema este că multe bariere de accesibilitate nu sunt evidente atunci când navighezi cu mouse-ul, vezi clar ecranul și folosești site-ul exact așa cum a fost testat intern.
Schimbă puțin perspectiva.
Încearcă să finalizezi o achiziție fără mouse. Folosește doar tasta Tab. Mărește pagina la 200%. Uită-te la un formular și imaginează-ți că etichetele câmpurilor sale sunt citite de un cititor de ecran.
Site-ul începe să arate diferit.
Iată câteva dintre problemele care merită verificate mai întâi.
Imagini fără text alternativ
O imagine de produs, o diagramă, o pictogramă sau un banner pot transmite informații pe care un utilizator nu le poate accesa dacă imaginea nu are o alternativă text corespunzătoare.
WCAG 2.2 impune existența unor alternative text pentru conținutul non-text atunci când acesta transmite informații sau are o funcție. Imaginile pur decorative sunt tratate diferit și pot fi ignorate de tehnologiile asistive.
O greșeală foarte frecventă apare aici. O echipă verifică dacă alt atributul există și consideră problema rezolvată.
Calitatea textului contează la fel de mult.
Dacă imaginea prezintă un produs, descrierea ar trebui să ofere informațiile relevante pentru acel produs. Dacă imaginea este un grafic, simpla mențiune „grafic” nu ajută utilizatorul să înțeleagă datele prezentate.
Cum să verifici
Începe cu paginile care conțin multe imagini. Pagina principală, paginile de produse, articolele de pe blog și paginile de destinație sunt locuri bune de unde poți începe.
Instrumentul Wawsome Accessibility Checker poate identifica problemele detectabile automat, cum ar fi textul alternativ lipsă sau inadecvat pentru imagini.
Pentru imaginile care au deja alt text, este necesară în continuare o verificare umană.
Contrast insuficient
Textul gri deschis pe un fundal alb poate părea subtil într-un design. Pentru o persoană cu deficiențe de vedere, acesta poate deveni greu de citit.
Problema apare adesea în textul secundar, în câmpurile de tip placeholder, butoane, meniuri și elemente în stări dezactivate sau inactive.
WCAG include criterii pentru contrastul textului, precum și pentru anumite elemente grafice și componente ale interfeței cu utilizatorul.
Contrastul trebuie verificat în produsul final. Un fișier de design poate folosi culorile corecte, în timp ce implementarea finală poate ajunge să aibă valori diferite.
Cum se verifică
Testează culorile pentru:
- Text principal și secundar
- Linkuri și butoane
- Mesaje de eroare și notificări
- Controale și componente interactive
- Stări de hover și focus
- Diagrame sau informații transmise prin culoare
Nu limita testarea doar la pagina principală. Procesul de finalizare a comenzii și formularele sunt adesea locurile unde un contrast slab devine mult mai costisitor pentru utilizator.
Formulare fără etichete și instrucțiuni clare
Formularele apar aproape peste tot.
Crearea conturilor, solicitările de oferte, plata facturilor, programările și procesele de finalizare a comenzii utilizează toate câmpuri în care utilizatorii trebuie să introducă informații.
WCAG impune existența unor etichete sau instrucțiuni atunci când este necesară introducerea de date de către utilizator. Scopul este de a ne asigura că utilizatorii înțeleg ce informații trebuie să furnizeze.
Un text de tip placeholder nu ar trebui tratat automat ca un substitut pentru o etichetă implementată corect.
Apoi, există mesajele de eroare.
„Date introduse incorect” nu este un mesaj foarte util.
Utilizatorii trebuie să înțeleagă ce a mers prost și ce trebuie să corecteze. Într-un formular lung, identificarea clară a câmpului cu probleme este cu atât mai importantă.
Cum se verifică
Alegeți un flux complet de utilizare și parcurgeți-l de la început până la sfârșit.
Poate fi:
- Formular de contact
- Creare cont
- Finalizare comandă
- Programare online
- Cerere de ofertă
- Autentificare
- Resetare parolă
- Plată factură
Verifică dacă fiecare câmp are o etichetă clară și dacă mesajele de eroare pot fi înțelese fără a te baza exclusiv pe culoare.
Pentru formularele importante, testarea cu tastatura și cu cititorul de ecran poate oferi informații pe care un scaner nu le poate capta complet.
Navigare care nu funcționează cu tastatura
Încearcă un test simplu.
Pune mouse-ul deoparte și apasă tasta Tab.
Poți accesa meniul? Poți deschide submeniurile? Poți selecta un produs? Poți completa formularul? Poți să-l trimiți?
WCAG include cerințe privind accesibilitatea de la tastatură și evitarea situațiilor în care focalizarea rămâne blocată în interiorul unei componente.
Problema apare adesea în cazul componentelor personalizate.
Meniurile derulante, ferestrele modale, caruselele, selectoarele de dată și meniurile bazate pe JavaScript pot funcționa perfect cu mouse-ul, dar pot fi dificil de utilizat cu tastatura.
Cum să verifici
Folosește tasta Tab pentru a naviga înainte și Shift + Tab pentru a naviga înapoi.
Urmărește indicatorul vizual de focalizare. Ar trebui să poți vedea întotdeauna unde te afli pe pagină.
Testează componentele interactive folosind tastele Enter, Space și săgețile, acolo unde comportamentul componentei o impune.
Efectuează testul pe fluxurile cele mai importante pentru afacere. Autentificarea, finalizarea comenzii, programările și formularele importante trebuie verificate primele.
Butoane și linkuri fără nume accesibile
Pictograma unei lupe este ușor de recunoscut vizual ca fiind „Căutare”.
Pentru tehnologiile asistive, pictograma are nevoie de informațiile programatice necesare pentru ca funcția sa să poată fi comunicată utilizatorului.
WCAG abordează numele, rolul și valoarea componentelor interfeței cu utilizatorul. Un control fără un nume accesibil poate fi foarte dificil de utilizat cu tehnologii asistive.
Problema apare frecvent în cazul:
- Butoanelor care conțin doar pictograme
- Meniurilor pentru mobil
- Butoanelor de închidere
- Comenzilor video
- Elementelor de tip carusel
- Butoanelor de partajare pe rețelele sociale
- Componentelor personalizate
- Linkurilor cu text vag, cum ar fi „click aici”
Un nume accesibil trebuie să comunice scopul elementului.
Cum să verifici
Poți începe cu Scannerul de accesibilitate Wawsome pentru probleme detectabile automat.
Pentru componentele importante, folosește și inspectorul de accesibilitate al browserului sau testează pagina cu un cititor de ecran.
Dacă utilizatorul aude „buton” fără a afla ce face acesta, implementarea trebuie revizuită.
Structură incorectă a titlurilor
Titlurile sunt uneori folosite doar pentru aspectul vizual.
Un text primește eticheta H2 pentru că dimensiunea arată bine. Altul devine H4 pentru că se potrivește în layout. În timp, structura semantică se pierde.
Pentru utilizatorii de cititoare de ecran, titlurile pot fi o modalitate eficientă de a naviga printr-o pagină.
O pagină lungă care conține articole, termeni legali, servicii sau produse devine mult mai ușor de parcurs atunci când structura titlurilor este logică.
Cum să verifici
Analizează structura ierarhică a paginii.
Titlul principal trebuie să indice clar subiectul. Secțiunile importante trebuie organizate într-o ierarhie logică.
Nu alege nivelul unui titlu în funcție de dimensiunea vizuală dorită. Aspectul vizual poate fi controlat prin CSS. Semantica trebuie să descrie structura conținutului.
Documente și fișiere descărcabile
Un site web poate avea pagini bine structurate și totuși să ofere un PDF inaccesibil exact în momentul în care utilizatorul ajunge la informația de care are nevoie.
Acest lucru este frecvent întâlnit în sectorul public, bancar, asigurări, educație și sănătate.
Documentele pot conține:
- Imagini scanate fără text disponibil
- Structură incorectă
- Formulare PDF greu de completat
- Diagrame fără alternative
- Ordine de citire incorectă
- Linkuri descrise necorespunzător
- Tabele greu de interpretat
Dacă un document face parte din serviciul oferit utilizatorului, accesibilitatea acestuia trebuie evaluată.
Conținut video fără subtitrări
Videoclipurile sunt utilizate tot mai des pentru prezentări de produse, tutoriale, conținut educațional și comunicare pe rețelele sociale.
Dacă informația este transmisă prin vorbire, utilizatorii care nu pot auzi conținutul au nevoie de o alternativă adecvată.
Subtitrările trebuie să reflecte cu acuratețe informațiile rostite. Transcrierea automată poate ajuta la producție, însă rezultatul trebuie verificat înainte de publicare.
Dacă un videoclip conține informații importante transmise exclusiv prin elemente vizuale, poate fi necesară și o descriere adecvată a acestora.
De ce nu găsește un scaner totul?
Scanarea automatizată este extrem de utilă. Pentru site-urile mari, aceasta poate economisi timp semnificativ și poate scoate la iveală probleme recurente.
Scannerul de Accesibilitate poate identifica multe probleme WCAG detectabile automat, inclusiv text alternativ lipsă, erori de contrast, etichete de formular lipsă, structuri de titluri incorecte și anumite probleme legate de tastatură sau elemente interactive.
Un instrument poate detecta că un alt atributul există.
Nu poate determina cu certitudine dacă acel text explică într-adevăr imaginea în contextul paginii.
Poate detecta anumite probleme structurale.
Nu poate reproduce pe deplin experiența unui utilizator care încearcă să parcurgă un proces complex folosind un cititor de ecran.
De aceea, o evaluare utilă a accesibilității combină mai multe tipuri de analiză.
Începe cu fluxurile care contează
Dacă site-ul tău are 5.000 de pagini, verificarea manuală a fiecărui element poate deveni rapid greu de gestionat.
Începe cu parcursurile esențiale ale utilizatorilor.
Pentru comerțul electronic, verifică pagina de produs, coșul și finalizarea comenzii.
Pentru servicii bancare, verifică autentificarea, tranzacțiile și principalele servicii utilizate de clienți.
În domeniul sănătății, acordați atenție programărilor, formularelor, contului pacientului și accesului la informații.
Pentru sectorul public, verificați transmiterea documentelor, formularele, plățile și accesul la informațiile de care au nevoie cetățenii.
Apoi extindeți evaluarea la restul site-ului web.
Impactul asupra utilizatorului ar trebui să influențeze ordinea în care sunt remediate problemele.
Cum poate ajuta monitorizarea?
Să presupunem că ați finalizat o evaluare și echipa a remediat problemele prioritare.
Două săptămâni mai târziu, este publicată o pagină de destinație nouă. Departamentul de marketing încarcă imagini noi. Echipa de dezvoltare modifică formularul principal. Sunt adăugate alte 50 de produse.
Site-ul web s-a schimbat.
Monitorul de Accesibilitate vă poate monitoriza continuu site-ul web și poate scana din nou paginile atunci când sunt detectate actualizări, ajutând la identificarea problemelor detectabile introduse de conținutul sau componentele noi.
Pentru un site actualizat frecvent, verificările de accesibilitate ar trebui să devină parte din procesul obișnuit de gestionare a site-ului.
Ce faci cu problemele pe care le găsești?
Un raport lung poate crea impresia că fiecare problemă trebuie remediată în aceeași ordine.
În practică, prioritizarea ajută.
Uneori uităm să punem o întrebare simplă: ce împiedică utilizatorul să își finalizeze sarcina?
O problemă la finalizarea comenzii merită atenție imediată dacă împiedică un client să plaseze o comandă.
Un buton inaccesibil într-un flux de programări poate împiedica un pacient să își aleagă o programare.
O problemă de autentificare poate face ca un întreg cont să devină inutilizabil pentru un anumit utilizator.
După impact, poți analiza cât de des apare problema și câte pagini sunt afectate.
Acesta este punctul în care raportul devine util pentru echipa de dezvoltare. Problemele se transformă în sarcini concrete care pot fi incluse în sprinturile de remediere.
Cum te poate ajuta Wawsome
Dacă nu ți-ai evaluat încă site-ul, o scanare inițială este un prim pas practic.
Scannerul de Accesibilitate poate identifica problemele detectabile automat și poate oferi o imagine inițială a zonelor care necesită atenție.
După scanare, rezultatele pot fi completate cu verificări manuale pentru criteriile care necesită evaluare umană.
Site-urile care se modifică frecvent pot utiliza Monitorul de accesibilitate Wawsome pentru a urmări problemele apărute ulterior.
Pentru funcționalitățile oferite direct utilizatorilor, poți explora și Widgetul de accesibilitate Wawsome.
De asemenea, poți explora gama completă de funcționalități de accesibilitate Wawsome.
Întrebări frecvente
Cum pot verifica dacă site-ul meu are probleme de accesibilitate?
Poți începe cu un scaner automat pentru problemele care pot fi detectate programatic. Continuă cu testarea manuală a fluxurilor importante ale utilizatorilor și, acolo unde este necesar, cu testarea tastaturii sau a tehnologiilor asistive.
Poate un scor să-mi spună dacă site-ul meu este accesibil?
Un scor oferă o privire de ansamblu asupra criteriilor evaluate de instrument. Instrumentele automate nu pot determina de la sine accesibilitatea completă a unui site web.
Ce probleme de accesibilitate pot identifica singur fără cunoștințe tehnice?
Poți efectua câteva verificări simple. Încearcă să navighezi folosind tastatura, mărește pagina, verifică dacă formularele au etichete clare și analizează contrastul textului. Pentru criteriile tehnice, vei avea nevoie de instrumente adecvate și de persoane familiarizate cu WCAG.
De ce trebuie să verific din nou site-ul după remediere?
Site-urile web se schimbă. O pagină de destinație, un formular sau o componentă nouă pot introduce bariere noi. Monitorizarea și retestarea sunt utile după efectuarea unor modificări relevante.
Cum ar trebui să prioritizez problemele pe care le găsesc?
Începe cu barierele care împiedică utilizatorii să finalizeze acțiuni importante. Finalizarea comenzii, autentificarea, programările, formularele și plățile pot avea un impact direct asupra utilizatorilor. După aceea, poți organiza problemele rămase în funcție de severitate și de frecvența cu care apar pe site.
Un punct bun de plecare
Accesibilitatea devine mult mai ușor de gestionat atunci când poți vedea problemele concrete care afectează propriul site web.
Scanează paginile importante, verifică fluxurile pe care utilizatorii trebuie să le poată parcurge și determină ce bariere ar trebui abordate mai întâi.
Un scaner ajută la identificarea problemelor detectabile automat. Testarea manuală completează imaginea acolo unde este nevoie de context și de evaluare umană.
De acolo, ai deja ceva util pentru echipă: probleme reale, pagini afectate și un punct de plecare clar pentru remediere.