# Crearea paginilor web accesibile ![Totul despre accesibilitate](../../../../translated_images/webdev101-a11y.8ef3025c858d897a403a1a42c0897c76e11b724d9a8a0c0578dd4316f7507622.ro.png) > Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac) ## Chestionar înainte de lecție [Chestionar înainte de lecție](https://ff-quizzes.netlify.app/web/) > Puterea web-ului constă în universalitatea sa. Accesul pentru toți, indiferent de dizabilitate, este un aspect esențial. > > \- Sir Timothy Berners-Lee, Director W3C și inventatorul World Wide Web Iată ceva ce s-ar putea să te surprindă: când construiești site-uri web accesibile, nu ajuți doar persoanele cu dizabilități—de fapt, faci web-ul mai bun pentru toată lumea! Ai observat vreodată acele rampe de la colțurile străzilor? Inițial au fost concepute pentru scaunele cu rotile, dar acum ajută și persoanele cu cărucioare, lucrătorii de livrări cu cărucioare, călătorii cu bagaje pe roți și bicicliștii. Exact așa funcționează designul web accesibil—soluțiile care ajută un grup ajung adesea să fie benefice pentru toți. Destul de tare, nu-i așa? În această lecție, vom explora cum să creăm site-uri web care funcționează cu adevărat pentru toată lumea, indiferent de modul în care navighează pe internet. Vei descoperi tehnici practice care sunt deja integrate în standardele web, vei avea ocazia să testezi instrumente și vei vedea cum accesibilitatea face site-urile tale mai ușor de utilizat pentru toți utilizatorii. Până la sfârșitul acestei lecții, vei avea încrederea necesară pentru a face din accesibilitate o parte naturală a fluxului tău de lucru în dezvoltare. Ești pregătit să explorezi cum alegerile de design bine gândite pot deschide web-ul pentru miliarde de utilizatori? Hai să începem! > Poți parcurge această lecție pe [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101/accessibility/?WT.mc_id=academic-77807-sagibbon)! ## Înțelegerea tehnologiilor asistive Înainte să trecem la codare, să luăm un moment pentru a înțelege cum experimentează web-ul persoanele cu abilități diferite. Nu este doar teorie—înțelegerea acestor modele reale de navigare te va face un dezvoltator mult mai bun! Tehnologiile asistive sunt instrumente uimitoare care ajută persoanele cu dizabilități să interacționeze cu site-urile web în moduri care te-ar putea surprinde. Odată ce înțelegi cum funcționează aceste tehnologii, crearea experiențelor web accesibile devine mult mai intuitivă. Este ca și cum ai învăța să vezi codul tău prin ochii altcuiva. ### Cititoare de ecran [Cititoarele de ecran](https://en.wikipedia.org/wiki/Screen_reader) sunt tehnologii destul de sofisticate care transformă textul digital în ieșire vocală sau braille. Deși sunt utilizate în principal de persoanele cu deficiențe de vedere, sunt de asemenea foarte utile pentru utilizatorii cu dizabilități de învățare, cum ar fi dislexia. Îmi place să mă gândesc la un cititor de ecran ca la un narator foarte inteligent care îți citește o carte. Citește conținutul cu voce tare într-o ordine logică, anunță elementele interactive precum "buton" sau "link" și oferă scurtături de tastatură pentru navigarea pe pagină. Dar iată care e treaba—cititoarele de ecran pot face magie doar dacă construim site-uri web cu o structură adecvată și conținut semnificativ. Aici intervii tu, ca dezvoltator! **Cititoare de ecran populare pe diverse platforme:** - **Windows**: [NVDA](https://www.nvaccess.org/about-nvda/) (gratuit și cel mai popular), [JAWS](https://webaim.org/articles/jaws/), [Narrator](https://support.microsoft.com/windows/complete-guide-to-narrator-e4397a0d-ef4f-b386-d8ae-c172f109bdb1/?WT.mc_id=academic-77807-sagibbon) (integrat) - **macOS/iOS**: [VoiceOver](https://support.apple.com/guide/voiceover/welcome/10) (integrat și foarte capabil) - **Android**: [TalkBack](https://support.google.com/accessibility/android/answer/6283677) (integrat) - **Linux**: [Orca](https://wiki.gnome.org/Projects/Orca) (gratuit și open-source) **Cum navighează cititoarele de ecran conținutul web:** Cititoarele de ecran oferă mai multe metode de navigare care fac navigarea eficientă pentru utilizatorii experimentați: - **Lectură secvențială**: Citește conținutul de sus în jos, ca și cum ai citi o carte - **Navigare prin repere**: Salt între secțiunile paginii (antet, navigare, principal, subsol) - **Navigare prin titluri**: Salt între titluri pentru a înțelege structura paginii - **Liste de linkuri**: Generarea unei liste cu toate linkurile pentru acces rapid - **Controale de formular**: Navigare directă între câmpurile de introducere și butoane > 💡 **Iată ceva ce m-a uimit**: 68% dintre utilizatorii de cititoare de ecran navighează în principal prin titluri ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). Asta înseamnă că structura titlurilor tale este ca o hartă pentru utilizatori—când o faci corect, literalmente ajuți oamenii să găsească mai rapid drumul prin conținutul tău! ### Construirea fluxului de lucru pentru testare Iată o veste bună—testarea eficientă a accesibilității nu trebuie să fie copleșitoare! Vei dori să combini instrumentele automate (sunt fantastice pentru a detecta probleme evidente) cu ceva testare manuală. Iată o abordare sistematică pe care am descoperit-o că prinde cele mai multe probleme fără să-ți consume întreaga zi: **Flux de lucru esențial pentru testare manuală:** ```mermaid graph TD A[Start Testing] --> B{Keyboard Navigation} B --> C[Tab through all interactive elements] C --> D{Screen Reader Testing} D --> E[Test with NVDA/VoiceOver] E --> F{Zoom Testing} F --> G[Zoom to 200% and test functionality] G --> H{Color/Contrast Check} H --> I[Verify all text meets contrast ratios] I --> J{Focus Management} J --> K[Ensure focus indicators are visible] K --> L[Testing Complete] ``` **Listă de verificare pas cu pas pentru testare:** 1. **Navigare cu tastatura**: Folosește doar tastele Tab, Shift+Tab, Enter, Space și săgețile 2. **Testare cu cititor de ecran**: Activează NVDA, VoiceOver sau Narrator și navighează cu ochii închiși 3. **Testare zoom**: Testează la niveluri de zoom de 200% și 400% 4. **Verificarea contrastului culorilor**: Verifică tot textul și componentele UI 5. **Testarea indicatorului de focalizare**: Asigură-te că toate elementele interactive au stări vizibile de focalizare ✅ **Începe cu Lighthouse**: Deschide DevTools în browserul tău, rulează un audit de accesibilitate Lighthouse, apoi folosește rezultatele pentru a ghida zonele de testare manuală. ### Instrumente de zoom și mărire Știi cum uneori mărești textul pe telefon când este prea mic sau te străduiești să citești ecranul laptopului în lumina puternică a soarelui? Mulți utilizatori se bazează pe instrumente de mărire pentru a face conținutul lizibil în fiecare zi. Acest lucru include persoanele cu deficiențe de vedere, adulții în vârstă și oricine a încercat vreodată să citească un site web în aer liber. Tehnologiile moderne de zoom au evoluat dincolo de simpla mărire a lucrurilor. Înțelegerea modului în care funcționează aceste instrumente te va ajuta să creezi designuri responsive care rămân funcționale și atractive la orice nivel de mărire. **Capacități moderne de zoom ale browserelor:** - **Zoom pagină**: Scalează tot conținutul proporțional (text, imagini, layout) - aceasta este metoda preferată - **Zoom doar text**: Mărește dimensiunea fontului păstrând layout-ul original - **Pinch-to-zoom**: Suport pentru gesturi mobile pentru mărire temporară - **Suport browser**: Toate browserele moderne suportă zoom până la 500% fără a afecta funcționalitatea **Software specializat de mărire:** - **Windows**: [Magnifier](https://support.microsoft.com/windows/use-magnifier-to-make-things-on-the-screen-easier-to-see-414948ba-8b1c-d3bd-8615-0e5e32204198) (integrat), [ZoomText](https://www.freedomscientific.com/training/zoomtext/getting-started/) - **macOS/iOS**: [Zoom](https://www.apple.com/accessibility/mac/vision/) (integrat cu funcții avansate) > ⚠️ **Considerație de design**: WCAG cere ca conținutul să rămână funcțional atunci când este mărit la 200%. La acest nivel, derularea orizontală ar trebui să fie minimă, iar toate elementele interactive ar trebui să rămână accesibile. ✅ **Testează designul tău responsive**: Mărește browserul la 200% și 400%. Se adaptează layout-ul tău în mod grațios? Poți accesa în continuare toate funcționalitățile fără derulare excesivă? ## Instrumente moderne de testare a accesibilității Acum că înțelegi cum navighează oamenii pe web cu ajutorul tehnologiilor asistive, să explorăm instrumentele care te ajută să construiești și să testezi site-uri web accesibile. Gândește-te așa: instrumentele automate sunt excelente pentru a detecta probleme evidente (cum ar fi lipsa textului alternativ), în timp ce testarea manuală te ajută să te asiguri că site-ul tău este plăcut de utilizat în lumea reală. Împreună, îți oferă încrederea că site-urile tale funcționează pentru toată lumea. ### Testarea contrastului culorilor Iată o veste bună: contrastul culorilor este una dintre cele mai frecvente probleme de accesibilitate, dar este și una dintre cele mai ușor de rezolvat. Un contrast bun beneficiază pe toată lumea—de la utilizatorii cu deficiențe de vedere până la cei care încearcă să citească pe telefon la plajă. **Cerințele de contrast WCAG:** | Tip text | WCAG AA (Minim) | WCAG AAA (Îmbunătățit) | |----------|-----------------|------------------------| | **Text normal** (sub 18pt) | Raport de contrast 4.5:1 | Raport de contrast 7:1 | | **Text mare** (18pt+ sau 14pt+ bold) | Raport de contrast 3:1 | Raport de contrast 4.5:1 | | **Componente UI** (butoane, borduri de formular) | Raport de contrast 3:1 | Raport de contrast 3:1 | **Instrumente esențiale de testare:** - [Colour Contrast Analyser](https://www.tpgi.com/color-contrast-checker/) - Aplicație desktop cu selector de culori - [WebAIM Contrast Checker](https://webaim.org/resources/contrastchecker/) - Bazat pe web, cu feedback instant - [Stark](https://www.getstark.co/) - Plugin pentru instrumente de design precum Figma, Sketch, Adobe XD - [Accessible Colors](https://accessible-colors.com/) - Găsește palete de culori accesibile ✅ **Construiește palete de culori mai bune**: Începe cu culorile brandului tău și folosește verificatoarele de contrast pentru a crea variații accesibile. Documentează-le ca parte a sistemului tău de design accesibil. ### Audit complet de accesibilitate Cea mai eficientă testare a accesibilității combină mai multe abordări. Niciun instrument nu detectează totul, așa că construirea unei rutine de testare cu diverse metode asigură o acoperire completă. **Testare bazată pe browser (integrată în DevTools):** - **Chrome/Edge**: Audit de accesibilitate Lighthouse + Panoul de accesibilitate - **Firefox**: Inspector de accesibilitate cu vizualizare detaliată a arborelui - **Safari**: Tab-ul de audit în Web Inspector cu simulare VoiceOver **Extensii profesionale de testare:** - [axe DevTools](https://www.deque.com/axe/devtools/) - Testare automată standard în industrie - [WAVE](https://wave.webaim.org/extension/) - Feedback vizual cu evidențierea erorilor - [Accessibility Insights](https://accessibilityinsights.io/) - Suita de testare cuprinzătoare de la Microsoft **Integrare în linia de comandă și CI/CD:** - [axe-core](https://github.com/dequelabs/axe-core) - Bibliotecă JavaScript pentru testare automată - [Pa11y](https://pa11y.org/) - Instrument de testare a accesibilității în linia de comandă - [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Scor automat de accesibilitate > 🎯 **Obiectiv de testare**: Tinde spre un scor de accesibilitate Lighthouse de 95+ ca bază. Amintește-ți, instrumentele automate detectează doar aproximativ 30-40% din problemele de accesibilitate—testarea manuală este încă esențială! ## Construirea accesibilității de la bază Cheia succesului în accesibilitate este să o integrezi în fundația ta încă de la început. Știu că este tentant să te gândești "O să adaug accesibilitatea mai târziu," dar asta e ca și cum ai încerca să adaugi o rampă la o casă după ce a fost deja construită. Posibil? Da. Ușor? Nu prea. Gândește-te la accesibilitate ca la planificarea unei case—este mult mai ușor să incluzi accesibilitatea pentru scaunele cu rotile în planurile tale arhitecturale inițiale decât să modifici totul mai târziu. ### Principiile POUR: Fundația accesibilității tale Ghidurile de conținut web accesibil (WCAG) sunt construite în jurul a patru principii fundamentale care formează acronimul POUR. Nu te îngrijora—nu sunt concepte academice plictisitoare! Sunt, de fapt, ghiduri practice pentru crearea unui conținut care funcționează pentru toată lumea. Odată ce înțelegi principiile POUR, luarea deciziilor legate de accesibilitate devine mult mai intuitivă. Este ca și cum ai avea o listă mentală care îți ghidează alegerile de design. Să le analizăm: **🔍 Perceptibil**: Informațiile trebuie să fie prezentate în moduri pe care utilizatorii le pot percepe prin simțurile lor disponibile - Oferă alternative textuale pentru conținutul non-text (imagini, videoclipuri, audio) - Asigură un contrast suficient al culorilor pentru tot textul și componentele UI - Oferă subtitrări și transcrieri pentru conținut multimedia - Proiectează conținut care rămâne funcțional când este redimensionat până la 200% - Folosește caracteristici senzoriale multiple (nu doar culoarea) pentru a transmite informații **🎮 Operabil**: Toate componentele interfeței trebuie să fie operabile prin metode de intrare disponibile - Fă ca toate funcționalitățile să fie accesibile prin navigare cu tastatura - Oferă utilizatorilor suficient timp pentru a citi și interacționa cu conținutul - Evită conținutul care provoacă convulsii sau tulburări vestibulare - Ajută utilizatorii să navigheze eficient cu o structură clară și repere - Asigură-te că elementele interactive au dimensiuni adecvate (minim 44px) **📖 Ușor de înțeles**: Informațiile și operarea interfeței trebuie să fie clare și ușor de înțeles - Folosește un limbaj clar și simplu, potrivit pentru publicul tău - Asigură-te că conținutul apare și funcționează într-un mod previzibil și consistent - Oferă instrucțiuni clare și mesaje de eroare pentru introducerea utilizatorului - Ajută utilizatorii să înțeleagă și să corecteze greșelile din formulare - Organizează conținutul cu o ordine logică de citire și o ierarhie informațională **💪 Robust**: Conținutul trebuie să funcționeze fiabil pe diferite tehnologii și dispozitive asistive - Folosește HTML valid și semantic ca fundație - Asigură compatibilitatea cu tehnologiile asistive actuale și viitoare - Respectă standardele web și cele mai bune practici pentru marcaj - Testează pe diferite browsere Culoarea este un instrument puternic de comunicare, dar nu ar trebui să fie niciodată singura modalitate de a transmite informații importante. Proiectarea dincolo de utilizarea culorii creează experiențe mai robuste și mai incluzive, care funcționează în mai multe situații. **Proiectare pentru diferențele de percepție a culorilor:** Aproximativ 8% dintre bărbați și 0,5% dintre femei au o formă de diferență în percepția culorilor (adesea numită "daltonism"). Cele mai comune tipuri sunt: - **Deuteranopie**: Dificultate în a distinge roșu și verde - **Protanopie**: Roșul apare mai estompat - **Tritanopie**: Dificultate cu albastru și galben (rar) **Strategii incluzive pentru utilizarea culorilor:** ```css /* ❌ Bad: Using only color to indicate status */ .error { color: red; } .success { color: green; } /* ✅ Good: Color plus icons and context */ .error { color: #d32f2f; border-left: 4px solid #d32f2f; } .error::before { content: "⚠️"; margin-right: 8px; } .success { color: #2e7d32; border-left: 4px solid #2e7d32; } .success::before { content: "✅"; margin-right: 8px; } ``` **Dincolo de cerințele de contrast de bază:** - Testați alegerile de culori cu simulatoare de daltonism - Utilizați modele, texturi sau forme alături de codificarea culorilor - Asigurați-vă că stările interactive rămân distincte fără utilizarea culorilor - Luați în considerare cum arată designul dvs. în modul de contrast ridicat ✅ **Testați accesibilitatea culorilor**: Folosiți instrumente precum [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) pentru a vedea cum apare site-ul dvs. pentru utilizatorii cu diferite tipuri de percepție a culorilor. ### Indicatori de focalizare și design interactiv Indicatorii de focalizare sunt echivalentul digital al unui cursor—ei arată utilizatorilor de tastatură unde se află pe pagină. Indicatorii de focalizare bine proiectați îmbunătățesc experiența pentru toată lumea, făcând interacțiunile clare și previzibile. **Cele mai bune practici pentru indicatorii de focalizare moderni:** ```css /* Enhanced focus styles that work across browsers */ button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25); } /* Remove focus outline for mouse users, preserve for keyboard users */ button:focus:not(:focus-visible) { outline: none; } /* Focus-within for complex components */ .card:focus-within { box-shadow: 0 0 0 3px rgba(74, 144, 164, 0.5); border-color: #4A90A4; } /* Ensure focus indicators meet contrast requirements */ .custom-focus:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 6px #000000; } ``` **Cerințe pentru indicatorii de focalizare:** - **Vizibilitate**: Trebuie să aibă un raport de contrast de cel puțin 3:1 cu elementele înconjurătoare - **Lățime**: Grosime minimă de 2px în jurul întregului element - **Persistență**: Trebuie să rămână vizibil până când focalizarea se mută în altă parte - **Distincție**: Trebuie să fie vizual diferit de alte stări ale interfeței > 💡 **Sfat de design**: Indicatorii de focalizare buni folosesc adesea o combinație de contur, box-shadow și modificări de culoare pentru a asigura vizibilitatea pe diferite fundaluri și contexte. ✅ **Auditați indicatorii de focalizare**: Navigați pe site-ul dvs. folosind tasta Tab și observați care elemente au indicatori de focalizare clari. Există vreunul dificil de văzut sau care lipsește complet? ### HTML semantic: Fundamentul accesibilității HTML semantic este ca și cum ai oferi tehnologiilor asistive un sistem GPS pentru site-ul tău. Când folosești elementele HTML potrivite pentru scopul lor, practic oferi cititoarelor de ecran, tastaturilor și altor instrumente o hartă detaliată pentru a ajuta utilizatorii să navigheze eficient. Iată o analogie care mi-a rămas în minte: HTML semantic este diferența dintre o bibliotecă bine organizată, cu categorii clare și semne utile, și un depozit unde cărțile sunt împrăștiate aleatoriu. Ambele locuri au aceleași cărți, dar în care ai prefera să cauți ceva? Exact! **Elemente de bază ale structurii accesibile a paginii:** ```html

Your Site Name

Article Title

Published on

First Section

Content that relates to this section...

Second Section

More related content...

``` **De ce HTML semantic transformă accesibilitatea:** | Element semantic | Scop | Beneficiu pentru cititoarele de ecran | |------------------|-------|---------------------------------------| | `
` | Antetul paginii sau secțiunii | "Landmark banner" - navigare rapidă la partea de sus | | `