10 moduri de a vă proiecta site-ul pentru accesibilitate

Publicat: 2022-02-16
10 moduri de a vă proiecta site-ul pentru accesibilitate

Sunt frustrat de designul web modern. Și cu siguranță sunt frustrat de majoritatea designerilor de teme și șabloane care își vând munca fără a verifica accesibilitatea globală.

Mulți designeri iau de fapt CMS-uri bune și accesibile și apoi creează modele cu probleme mari de accesibilitate.

Sunt avocat, designer de site-uri web și consultant în accesibilitate/diversitate în Australia. După ce am consiliat sectoarele corporative, guvernamentale și educaționale, constat că multe site-uri nu sunt accesibile și oferă multor utilizatori o experiență proastă.

De ce este importantă accesibilitatea?

În 2010, 10% dintre oamenii din lumea dezvoltată aveau o dizabilitate de imprimare. Această cifră a fost de 15% în țările nedezvoltate.

În Australia, accesibilitatea este considerată suficient de importantă încât să te pot duce în instanță dacă site-ul tău nu este accesibil. Șocat?

Nu, nu aș recomanda niciodată un client concentrat pe „site-uri pentru nevăzători”, ci site-uri care sunt accesibile tuturor. Acestea includ persoanele cu dizabilitate de imprimare, dizabilitate fizică, dizabilitate de auz - chiar și generațiile mai în vârstă. Pe scurt, un procent mare din întreaga audiență pur și simplu nu vă poate accesa site-ul așa cum o faceți.

Scump? Nu, de fapt, se întoarce la standardele de design, pentru că acestea sunt lucruri de bază.

Iată zece pași pe care îi puteți face pentru a vă asigura că site-ul dvs. este accesibil.

#1. Faceți site-ul dvs. ușor de utilizat

Nu trebuie să vă spun cum să proiectați. Dar aceste trei principii cheie vor ajuta utilizatorii cu dizabilități:

  1. Faceți site-urile ușor de citit și de înțeles
  2. Faceți site-uri ușor de navigat
  3. Faceți site-urile ușor de utilizat pe dispozitivele mobile

Acest lucru vă va aduce aproape de accesibilitate și, de asemenea, va ajuta motoarele de căutare să vă iubească site-ul!

Cititoarele de ecran cu care îmi testez site-urile sunt la fel ca roboții Google (cu excepția faptului că tehnologia oarbă a fost prima).

#2. Testați cu software de accesibilitate

Știați că PC-urile au software de accesibilitate pentru a ajuta navigarea și citirea ecranului? Probabil că ați făcut-o, dar știați și că dispozitivele mobile au software de accesibilitate încorporat în nucleu? Acest software poate citi persoanelor, inclusiv celor cu deficiențe de vedere:

  • Apple (iOS) folosește VoiceOver;
  • Android folosește Talkback;
  • Windows folosește Naratorul.

Aproape toți designerii de site-uri web includ un meniu în șablon, dar 95% nu pot fi citite cu niciuna dintre tehnologia de mai sus! Majoritatea acestor servicii de accesibilitate nu pot recunoaște existența unui meniu, deoarece este codat incorect. Cel mai adesea, problema este că meniul este prost codificat sau nu este etichetat clar.

Merită să încărcați unele site-uri în telefon și să activați funcțiile de accesibilitate. Vedeți dacă meniul site-ului dvs. funcționează sau nu.

panou braille pe Apple VoiceOver

#3. Nu scrie totul cu majuscule

Aceasta este probabil cea mai de bază schimbare pe care oricine o poate face site-ului său: nu scrieți cu majuscule.

Acest lucru este testat și dovedit științific, DECEC TOATE MAJUSCULELE ESTE GREU DE CITIT PENTRU ORICE!

Cea mai folosită scriere cu majuscule se găsește în elementele de meniu și butoanele. Ajuți la difuzarea mesajului dvs. dacă scrieți în mod normal cu majuscule obișnuite, cu excepția cazului în care aveți un scop de design specific - cum ar fi o marcă sau un logo.

#4. Explicați-vă linkurile în mod clar

Butoanele „Citiți mai multe” sau „Click aici” nu spun Google (sau celor care folosesc cititoare de ecran) ce se află în spatele linkului. Pur și simplu scoateți linkul din context pentru a vedea dacă are sens. „Citește mai mult” în mijlocul unei pagini are sens pentru tine? Citiți mai multe ce?

#5. Utilizați stiluri contrastante bune

Asta nu înseamnă să vă ucideți conținutul - înseamnă să faceți acest lucru ușor pentru persoanele cu deficiențe de vedere. Iată un sfat... transformă ecranul mobil la jumătate de putere și încearcă să citești un site. Cum arată în lumină și întuneric?

#6. Utilizați linkurile „săriți la conținut”.

Imaginați-vă că dați din cap de 30 de ori înainte de a citi conținutul principal! Persoanele cu dizabilități de imprimare trebuie să facă acest lucru dacă nu le permiteți să sară peste meniu. De fapt, este același lucru pentru utilizarea etichetelor de titlu, H1 până la H4 ajută motoarele de căutare și persoanele cu dizabilități de imprimare să navigheze pe site-ul dvs.

Ah, și nu ascunde linkul în afara ecranului! Persoanele cu deficiențe de vedere folosesc adesea lupe și caută acele linkuri manual (nu prin tastatură).

#7. Nu mai utilizați ferestrele pop-up

Cel puțin, nu le mai folosim pe acelea de care nu putem apăsa „esc” pentru a scăpa. Știați că software-ul nostru practic nu poate intra în acele casete pop-up? Și, de obicei, ajungem să citim ce se află în spatele cutiei - ți se pare gri, dar nu și nouă.

Dacă veți folosi ferestre pop-up:

  • Fă-le astfel încât să poată fi respinse cu butonul „esc”.
  • Faceți-le astfel încât software-ul nostru să poată citi caseta, nu textul din spate.
  • Oferiți detalii despre o modalitate alternativă de a găsi conținutul sau completați formularul - „sau accesați pagina noastră xxxx pentru mai multe detalii”.

#8. Redimensionarea textului poate fi utile în anumite situații

Personal, redimensionarea textului este mult mai puțin importantă decât trecerea la linkurile de conținut. Acest lucru se datorează faptului că o persoană cu dizabilități de imprimare (inclusiv generația mai veche) va folosi fie lupa Windows, fie un produs specializat - cum ar fi textul zoom, ochii magici sau alt software gratuit. Din experiența mea, dispozitivele de redimensionare distrug în general conținutul mobil - și sunt chiar mai puțin receptivi decât ciupirea sau utilizarea funcțiilor de bază de accesibilitate pentru mobil.

De asemenea, cu tehnologia adaptivă redimensionarea textului, utilizatorul îl poate dezactiva și porni astfel încât să se poată găsi pe ecran (un fel de zoom, astfel încât să poată vedea doar 1/8 din ecran odată). Acestea fiind spuse, redimensionările de text pot fi încă relevante și merită introduse pentru site-urile guvernamentale - doar că nu sunt o prioritate de top 10 pentru mine.

#9. Folosiți pictograme cu fonturi mai degrabă decât pictograme imagine

Cei care folosesc mărirea pot vedea doar aproximativ 1/8 dintr-un site la un moment dat, iar cei care folosesc telefoane mobile vor încărca, de obicei, versiunile fără imagini - apăsând butonul „cititor”. Aș putea scrie o postare despre faptul că majoritatea „pictogramelor de imagine” pixelează la extrem la zoom maxim, dar pictogramele de font nu o fac (ei bine, oricum nu la fel de mult).

#10. Adăugați transcrieri video

Nu are rost să puneți un videoclip YouTube pe un site web dacă este complet tăcut și nici nu are rost să puneți unul pe care nu are o transcriere sau o modalitate prin care persoanele cu deficiențe de auz să-l urmărească. Ar fi ca și cum ai avea o audiență globală sau o bază de clienți, dar oferind doar informații în japoneză.

Doar pentru lovituri, obțineți un videoclip tehnic de pe YouTube fără vorbire, apoi închideți ochii. Notă - închiderea ochilor nu reproduce orbirea pentru că îi poți deschide din nou, dar este un exercițiu distractiv.

Player YouTube cu subtitrări

Resurse de accesibilitate

Aceste site-uri oferă instrucțiuni și instrumente pentru a vă verifica site-ul:

  • Verificator de accesibilitate Web Aim
  • Ghidul guvernului australian privind accesibilitatea conținutului web
  • validator W3C. Rețineți că validatorul W3C dă înapoi o mulțime de erori inutile. Trebuie să decideți dacă fiecare eroare merită sau nu problema.

Aceste site-uri oferă cititoare de ecran pe care le puteți folosi pentru a testa site-ul dvs. desktop cu:

  • Acces la job cu vorbire (JAWS)
  • Ai squared oferă versiuni de încercare gratuite
  • Window Eyes - Cititor de ecran
  • NV Access oferă un cititor de ecran Non Visual Desktop Aid (NVDA) gratuit

Notă: nu recomand Sitecues: nu este ceea ce aș numi ușor de instalat sau eficient pentru cei cu dizabilități de imprimare.

Concluzie

Ca orice, există un echilibru între respectarea funcțională și strictă a regulilor. Niciunul dintre site-urile clienților mei nu este 100% accesibil / compatibil W3C. Sunt accesibile - și prietenoase cu motoarele de căutare. Sunt logice și bine contrastate, dar au și stil și caracteristici pentru impact.

Câte milioane de oameni au o dizabilitate de imprimare în lume? Câți potențiali clienți?

Fie că construiești site-uri în Joomla, Drupal, WordPress, HTML pur sau orice altă platformă, sper că te-am convins că această problemă și merită să o iei în serios, pentru afacerea ta și clienții tăi.