18 KiB
Crearea Paginilor Web Accesibile
Schiță realizată de Tomomi Imura
Chestionar înainte de curs
Puterea Web-ului constă în universalitatea sa. Accesul pentru toată lumea, indiferent de dizabilitate, este un aspect esențial.
- Sir Timothy Berners-Lee, Director W3C și inventatorul World Wide Web
Acest citat subliniază perfect importanța creării site-urilor accesibile. O aplicație care nu poate fi accesată de toți este, prin definiție, exclusivistă. Ca dezvoltatori web, ar trebui să avem mereu în vedere accesibilitatea. Concentrându-ne pe acest aspect încă de la început, veți fi pe drumul cel bun pentru a vă asigura că toată lumea poate accesa paginile pe care le creați. În această lecție, veți învăța despre instrumentele care vă pot ajuta să vă asigurați că resursele web sunt accesibile și cum să construiți având accesibilitatea în minte.
Puteți parcurge această lecție pe Microsoft Learn!
Instrumente de utilizat
Cititoare de ecran
Unul dintre cele mai cunoscute instrumente de accesibilitate sunt cititoarele de ecran.
Cititoarele de ecran sunt utilizate frecvent de persoanele cu deficiențe de vedere. Așa cum ne asigurăm că un browser transmite corect informațiile pe care dorim să le împărtășim, trebuie să ne asigurăm și că un cititor de ecran face același lucru.
La nivel de bază, un cititor de ecran va citi o pagină de sus în jos, în mod auditiv. Dacă pagina este doar text, cititorul va transmite informațiile într-un mod similar cu un browser. Desigur, paginile web sunt rareori doar text; ele conțin linkuri, imagini, culori și alte componente vizuale. Trebuie să avem grijă ca aceste informații să fie citite corect de un cititor de ecran.
Fiecare dezvoltator web ar trebui să se familiarizeze cu un cititor de ecran. Așa cum este important să cunoașteți cum funcționează un browser, ar trebui să învățați și cum funcționează un cititor de ecran. Din fericire, cititoarele de ecran sunt integrate în majoritatea sistemelor de operare.
Unele browsere au, de asemenea, instrumente și extensii integrate care pot citi textul cu voce tare sau pot oferi funcții de navigare de bază, cum ar fi aceste instrumente axate pe accesibilitate din browserul Edge. Acestea sunt, de asemenea, instrumente importante de accesibilitate, dar funcționează foarte diferit de cititoarele de ecran și nu ar trebui confundate cu instrumentele de testare pentru cititoare de ecran.
✅ Încercați un cititor de ecran și un cititor de text din browser. Pe Windows, Narrator este inclus implicit, iar JAWS și NVDA pot fi instalate. Pe macOS și iOS, VoiceOver este instalat implicit.
Zoom
Un alt instrument utilizat frecvent de persoanele cu deficiențe de vedere este funcția de zoom. Cel mai simplu tip de zoom este zoom-ul static, controlat prin Control + semnul plus (+) sau prin reducerea rezoluției ecranului. Acest tip de zoom redimensionează întreaga pagină, așa că utilizarea designului responsive este importantă pentru a oferi o experiență bună utilizatorilor la niveluri de zoom crescute.
Un alt tip de zoom se bazează pe software specializat pentru a mări o zonă a ecranului și a o deplasa, similar cu utilizarea unei lupe reale. Pe Windows, Magnifier este integrat, iar ZoomText este un software de mărire terț cu mai multe funcții și o bază mai mare de utilizatori. Atât macOS, cât și iOS au un software de mărire integrat numit Zoom.
Verificatoare de contrast
Culorile de pe site-urile web trebuie alese cu grijă pentru a răspunde nevoilor utilizatorilor daltoni sau ale persoanelor care au dificultăți în a vedea culorile cu contrast scăzut.
✅ Testați un site web pe care îl utilizați frecvent pentru utilizarea culorilor cu o extensie de browser, cum ar fi verificatorul de contrast al culorilor WCAG. Ce ați învățat?
Lighthouse
În zona de instrumente pentru dezvoltatori a browserului dvs., veți găsi instrumentul Lighthouse. Acest instrument este important pentru a obține o primă vedere asupra accesibilității (precum și a altor analize) ale unui site web. Deși este important să nu vă bazați exclusiv pe Lighthouse, un scor de 100% este foarte util ca punct de plecare.
✅ Găsiți Lighthouse în panoul de instrumente pentru dezvoltatori al browserului dvs. și rulați o analiză pe orice site. Ce descoperiți?
Proiectarea pentru accesibilitate
Accesibilitatea este un subiect relativ vast. Pentru a vă ajuta, există numeroase resurse disponibile.
Deși nu vom putea acoperi fiecare aspect al creării site-urilor accesibile, mai jos sunt câteva dintre principiile de bază pe care veți dori să le implementați. Proiectarea unei pagini accesibile de la început este întotdeauna mai ușoară decât să reveniți la o pagină existentă pentru a o face accesibilă.
Principii bune de afișare
Palete de culori sigure
Oamenii percep lumea în moduri diferite, inclusiv culorile. Când selectați o schemă de culori pentru site-ul dvs., ar trebui să vă asigurați că este accesibilă pentru toți. Un instrument excelent pentru generarea de palete de culori este Color Safe.
✅ Identificați un site web care are probleme mari în utilizarea culorilor. De ce?
Utilizați HTML corect
Cu CSS și JavaScript, este posibil să faceți orice element să arate ca orice tip de control. <span> ar putea fi utilizat pentru a crea un <button>, iar <b> ar putea deveni un hyperlink. Deși acest lucru ar putea fi considerat mai ușor de stilizat, nu transmite nimic unui cititor de ecran. Utilizați HTML-ul corespunzător atunci când creați controale pe o pagină. Dacă doriți un hyperlink, utilizați <a>. Utilizarea HTML-ului corect pentru controlul potrivit se numește utilizarea HTML-ului semantic.
✅ Accesați orice site web și verificați dacă designerii și dezvoltatorii utilizează HTML corect. Puteți găsi un buton care ar trebui să fie un link? Sfat: faceți clic dreapta și alegeți 'View Page Source' în browserul dvs. pentru a analiza codul sursă.
Creați o ierarhie descriptivă a titlurilor
Utilizatorii de cititoare de ecran se bazează foarte mult pe titluri pentru a găsi informații și a naviga printr-o pagină. Scrierea unui conținut descriptiv pentru titluri și utilizarea etichetelor semantice pentru titluri sunt importante pentru crearea unui site ușor de navigat pentru utilizatorii de cititoare de ecran.
Utilizați indicii vizuale bune
CSS oferă control complet asupra aspectului oricărui element de pe o pagină. Puteți crea casete de text fără contur sau hyperlinkuri fără subliniere. Din păcate, eliminarea acestor indicii poate face mai dificil pentru cineva care depinde de ele să recunoască tipul de control.
Importanța textului linkurilor
Hyperlinkurile sunt esențiale pentru navigarea pe web. Prin urmare, asigurarea faptului că un cititor de ecran poate citi corect linkurile permite tuturor utilizatorilor să navigheze pe site-ul dvs.
Cititoare de ecran și linkuri
Așa cum v-ați aștepta, cititoarele de ecran citesc textul linkurilor în același mod în care ar citi orice alt text de pe pagină. Având în vedere acest lucru, textul demonstrat mai jos ar putea părea perfect acceptabil.
Pinguinul mic, cunoscut uneori sub numele de pinguin zână, este cel mai mic pinguin din lume. Click aici pentru mai multe informații.
Pinguinul mic, cunoscut uneori sub numele de pinguin zână, este cel mai mic pinguin din lume. Vizitați https://en.wikipedia.org/wiki/Little_penguin pentru mai multe informații.
NOTĂ Așa cum urmează să citiți, nu ar trebui niciodată să creați linkuri care arată ca cele de mai sus.
Amintiți-vă, cititoarele de ecran sunt o interfață diferită de browsere, cu un set diferit de funcții.
Problema utilizării URL-ului
Cititoarele de ecran citesc textul. Dacă un URL apare în text, cititorul de ecran va citi URL-ul. În general, URL-ul nu transmite informații semnificative și poate suna enervant. Probabil ați experimentat acest lucru dacă telefonul dvs. a citit vreodată cu voce tare un mesaj text cu un URL.
Problema cu "click aici"
Cititoarele de ecran au, de asemenea, capacitatea de a citi doar hyperlinkurile de pe o pagină, la fel cum o persoană văzătoare ar scana o pagină pentru linkuri. Dacă textul linkului este mereu "click aici", utilizatorul va auzi doar "click aici, click aici, click aici, click aici, click aici, ..." Toate linkurile devin acum indistincte.
Text bun pentru linkuri
Un text bun pentru linkuri descrie pe scurt ce se află pe cealaltă parte a linkului. În exemplul de mai sus despre pinguinii mici, linkul duce la pagina Wikipedia despre această specie. Expresia pinguin mic ar fi un text perfect pentru link, deoarece face clar ce va învăța cineva dacă face clic pe link - pinguinii mici.
Pinguinul mic, cunoscut uneori sub numele de pinguin zână, este cel mai mic pinguin din lume.
✅ Navigați pe web câteva minute pentru a găsi pagini care folosesc strategii obscure de legare. Comparați-le cu alte site-uri care folosesc linkuri mai clare. Ce ați învățat?
Note pentru motoarele de căutare
Ca un bonus suplimentar pentru asigurarea accesibilității site-ului dvs., veți ajuta și motoarele de căutare să navigheze pe site-ul dvs. Motoarele de căutare folosesc textul linkurilor pentru a învăța despre subiectele paginilor. Așadar, utilizarea unui text bun pentru linkuri ajută pe toată lumea!
ARIA
Imaginați-vă următoarea pagină:
| Produs | Descriere | Comandă |
|---|---|---|
| Widget | Descriere | Comandă |
| Super widget | Descriere | Comandă |
În acest exemplu, duplicarea textului pentru descriere și comandă are sens pentru cineva care folosește un browser. Totuși, cineva care folosește un cititor de ecran ar auzi doar cuvintele descriere și comandă repetate fără context.
Pentru a sprijini astfel de scenarii, HTML acceptă un set de atribute cunoscute sub numele de Aplicații Internet Accesibile Îmbogățite (ARIA). Aceste atribute vă permit să oferiți informații suplimentare cititoarelor de ecran.
NOTĂ: La fel ca multe aspecte ale HTML-ului, suportul pentru browsere și cititoare de ecran poate varia. Totuși, majoritatea clienților principali acceptă atributele ARIA.
Puteți utiliza aria-label pentru a descrie linkul atunci când formatul paginii nu vă permite. Descrierea pentru widget ar putea fi setată astfel:
<a href="#" aria-label="Widget description">description</a>
✅ În general, utilizarea marcajului semantic, așa cum este descris mai sus, are prioritate față de utilizarea ARIA, dar uneori nu există un echivalent semantic pentru diverse widget-uri HTML. Un exemplu bun este un arbore. Nu există un echivalent HTML pentru un arbore, așa că identificați <div> generic pentru acest element cu un rol și valori ARIA corespunzătoare. Documentația MDN despre ARIA conține mai multe informații utile.
<h2 id="tree-label">File Viewer</h2>
<div role="tree" aria-labelledby="tree-label">
<div role="treeitem" aria-expanded="false" tabindex="0">Uploads</div>
</div>
Imagini
Este de la sine înțeles că cititoarele de ecran nu pot citi automat ce se află într-o imagine. Asigurarea accesibilității imaginilor nu necesită mult efort - acesta este scopul atributului alt. Toate imaginile semnificative ar trebui să aibă un alt care să descrie ce sunt.
Imaginile care sunt pur decorative ar trebui să aibă atributul alt setat la un șir gol: alt="". Acest lucru împiedică cititoarele de ecran să anunțe inutil imaginea decorativă.
✅ Așa cum v-ați aștepta, motoarele de căutare nu pot înțelege ce se află într-o imagine. Ele folosesc, de asemenea, textul alternativ. Așadar, din nou, asigurarea accesibilității paginii dvs. oferă beneficii suplimentare!
Tastatura
Unii utilizatori nu pot folosi un mouse sau un trackpad, bazându-se în schimb pe interacțiunile cu tastatura pentru a naviga de la un element la altul. Este important ca site-ul dvs. web să prezinte conținutul într-o ordine logică, astfel încât un utilizator de tastatură să poată accesa fiecare element interactiv pe măsură ce parcurge documentul. Dacă construiți paginile web cu marcaj semantic și utilizați CSS pentru a stiliza aspectul lor vizual, site-ul dvs. ar trebui să fie navigabil cu tastatura, dar este important să testați acest aspect manual. Aflați mai multe despre strategiile de navigare cu tastatura.
✅ Accesați orice site web și încercați să navigați prin el folosind doar tastatura. Ce funcționează, ce nu funcționează? De ce?
Rezumat
Un web accesibil doar pentru unii nu este un adevărat 'world-wide web'. Cea mai bună modalitate de a vă asigura că site-urile pe care le creați sunt accesibile este să încorporați cele mai bune practici de accesibilitate de la început. Deși sunt implicate pași suplimentari, încorporarea acestor abilități în fluxul dvs. de lucru acum va însemna că toate paginile pe care le creați vor fi accesibile.
🚀 Provocare
Luați acest HTML și rescrieți-l pentru a fi cât mai accesibil posibil, având în vedere strategiile pe care le-ați învățat.
<!DOCTYPE html>
<html>
<head>
<title>
Example
</title>
<link href='../assets/style.css' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="site-header">
<p class="site-title">Turtle Ipsum</p>
<p class="site-subtitle">The World's Premier Turtle Fan Club</p>
</div>
<div class="main-nav">
<p class="nav-header">Resources</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="https://www.youtube.com/watch?v=CMNry4PE93Y">"I like turtles"</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtle">Basic Turtle Info</a></p>
<p class="nav-item nav-item-bull"><a href="https://en.wikipedia.org/wiki/Turtles_(chocolate)">Chocolate Turtles</a></p>
</div>
</div>
<div class="main-content">
<div>
<p class="page-title">Welcome to Turtle Ipsum.
<a href="">Click here</a> to learn more.
</p>
<p class="article-text">
Turtle ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</p>
</div>
</div>
<div class="footer">
<div class="footer-section">
<span class="button">Sign up for turtle news</span>
</div><div class="footer-section">
<p class="nav-header footer-title">
Internal Pages
</p>
<div class="nav-list">
<p class="nav-item nav-item-bull"><a href="../">Index</a></p>
<p class="nav-item nav-item-bull"><a href="../semantic">Semantic Example</a></p>
</div>
</div>
<p class="footer-copyright">© 2016 Instrument</span>
</div>
</body>
</html>
Chestionar după curs
Recapitulare și Studiu Individual
Multe guverne au legi referitoare la cerințele de accesibilitate. Documentează-te despre legile privind accesibilitatea din țara ta. Ce este acoperit și ce nu este? Un exemplu este acest site web guvernamental.
Sarcină
Analizează un site web inaccesibil
Credite: Turtle Ipsum de Instrument
Declinarea responsabilității:
Acest document a fost tradus folosind serviciul de traducere AI Co-op Translator. Deși ne străduim să asigurăm acuratețea, vă rugăm să rețineți că traducerile automate pot conține erori sau inexactități. Documentul original în limba sa natală ar trebui considerat sursa autoritară. Pentru informații critice, se recomandă traducerea profesională realizată de un specialist uman. Nu ne asumăm răspunderea pentru eventualele neînțelegeri sau interpretări greșite care pot apărea din utilizarea acestei traduceri.