Proiectarea pentru accesibilitate
Accesibilitatea este un subiect relativ mare. Nu o putem acoperi complet într-un singur modul Learn. Cu toate acestea, există unele teneturi nucleu pe care se recomandă să le implementați în fiecare pagină pe care o creați. Proiectarea unei pagini accesibile de la început este întotdeauna mai simplă decât revenirea la o pagină existentă pentru a o face accesibilă.
Utilizarea HTML-ului așa cum a fost proiectat
HTML furnizează multe elemente pe care le puteți utiliza pentru a crea o pagină, inclusiv butoane, linkuri și controale formular. Fiecare dintre aceste elemente are un set de funcționalități predefinite, cum ar fi să fie clicabile, să fie conectabile sau să accepte focalizarea.
Notă
focalizarea este un termen de dezvoltare web care înseamnă că un control poate accepta intrări de la o tastatură. Un buton poate accepta focalizarea, permițând unei persoane să o activeze sau să o "facă clic" selectând bara de spațiu.
Cu CSS și JavaScript, este posibil să faceți orice element să arate ca orice tip de control. De exemplu, puteți utiliza <span> pentru a crea un element <button>, iar <b> poate deveni <a>. Deși această capacitate oferă câteva comenzi rapide pentru stilizare sau aranjare pe pagină, aceasta elimină funcționalitatea încorporată. Instrumentele precum un cititor de ecran nu vor putea înțelege că <span> este utilizat ca <a>. O persoană care navighează cu o tastatură nu va putea seta focalizarea pe un element <div> care a fost programat să simuleze un element <button>.
Un alt element HTML ignorat adesea este anteturile (<h1> până la <h6>). Dintr-un punct de vedere vizual, etichetele de antet încep de la cea mai mare la cea mai mică dimensiune de text. Această convenție conduce mulți dezvoltatori la elemente de antet și în schimb stiliza <div> sau alte elemente generice.
Din păcate, elementele generice stilizate transmit doar informații vizuale, nu structurale. Utilizatorii cititoarelor de ecran se bazează foarte mult pe titluri pentru a găsi informații și a naviga printr-o pagină. Scrierea de conținut descriptiv al titlurilor și utilizarea etichetelor de titlu semantice sunt importante pentru crearea unui site ușor de navigat pentru utilizatorii cititoarelor de ecran.
Ca exemplu de bună practică, ar trebui să utilizați întotdeauna CODUL HTML corespunzător atunci când creați controale pe o pagină. Dacă doriți un hyperlink, utilizați <a>sau utilizați <button> pentru un buton.
Utilizați indicii vizuale bune
Dezvoltatorii se gândesc adesea la cititoarele de ecran ca la singurul instrument de accesibilitate. Totuși, utilizatorii pot utiliza numeroase alte instrumente sau pot să nu utilizeze deloc instrumente. Utilizatorii care utilizează browserul se vor baza pe anumite indicii vizuale pentru a înțelege cum să interacționați cu pagina dvs.
Una dintre caracteristicile extraordinare ale CSS este faptul că oferă control complet asupra modului de afișare a unei pagini, inclusiv eliminarea anumitor elemente de afișare. De exemplu, puteți să eliminați schița dintr-o casetă text sau să eliminați sublinierea dintr-un hyperlink. Din păcate, eliminarea acestor tipuri de indicii poate face mai dificilă pentru o persoană care depinde de ele să recunoască tipul de control.
Luați în considerare tastatura
Unii utilizatori nu pot utiliza un mouse sau un trackpad/suport tactil. În schimb, acești utilizatori se bazează pe interacțiunile cu tastatura pentru a comuta de la un element la altul. Este important ca paginile dvs. să prezinte conținutul în ordine logică, astfel încât un utilizator al tastaturii să poată accesa fiecare element interactiv pe măsură ce se deplasează în jos.
Atunci când un utilizator trece printr-o pagină prin file, focalizarea se mută de la un control la următorul pe baza ordinii în care sunt listate controalele în sursa HTML. Controalele pentru pagina dvs. ar trebui să fie listate în sursa HTML în ordinea în care vă așteptați să fie răsfoită pagina, în timp ce vă bazați pe CSS pentru a stabili vizual pagina pentru utilizatori.
De exemplu, imaginați-vă să creați un formular cu două coloane. Se recomandă să luați în considerare ce este fluxul natural pentru o persoană care completează formularul, apoi să listați controalele în această ordine. Apoi puteți utiliza CSS pentru a crea coloane și a afișa controalele în locațiile corespunzătoare.
Navigarea cu ajutorul tastaturii se bazează foarte mult pe HTML semantic. Anumite controale (cum ar fi butoanele) acceptă focalizarea, în timp ce elementele div nu. Dacă creați controale care există deja în HTML, îngreunați utilizarea paginii cu o tastatură.