# Crearea Paginilor Web Accesibile
> Sketchnote de [Tomomi Imura](https://twitter.com/girlie_mac)
```mermaid
journey
title Aventură ta de învățare a accesibilității
section Fundament
Înțelegerea utilizatorilor: 5: You
Unelte de testare: 4: You
Principiile POUR: 5: You
section Dezvoltarea competențelor
HTML semantic: 4: You
Design vizual: 5: You
Tehnici ARIA: 4: You
section Practică de masterat
Navigare cu tastatura: 5: You
Accesibilitatea formularelor: 4: You
Testare în lumea reală: 5: You
```
## Test Pregătitor Pre-Lecție
[Test pregătitor pre-lecție](https://ff-quizzes.netlify.app/web/)
> Puterea webului 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
Iată ceva care 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 webul mai bun pentru toată lumea!
Ai observat vreodată acele rampe de bordură de la colțurile străzilor? Inițial au fost proiectate pentru scaune cu rotile, dar acum ajută și persoanele cu cărucioare pentru copii, lucrătorii în livrări cu cărucioare, călătorii cu bagaje cu roți și chiar bicicliștii. Exact așa funcționează designul web accesibil—soluțiile care ajută un grup ajung adesea să beneficieze pe toată lumea. Destul de tare, nu?
Î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 web. Vei descoperi tehnici practice deja integrate în standardele web, vei exersa cu instrumente de testare și vei vedea cum accesibilitatea face site-urile tale mai ușor de utilizat pentru toți utilizatorii.
La finalul acestei lecții, vei avea încrederea să faci accesibilitatea o parte naturală a fluxului tău de dezvoltare. Pregătit să explorezi cum alegerile de design atent gândite pot deschide webul pentru miliarde de utilizatori? Hai să începem!
```mermaid
mindmap
root((Accesibilitate Web))
Utilizatori
Cititoare de ecran
Navigare cu tastatura
Control vocal
Mărire
Tehnologii
Semantica HTML
Atribute ARIA
Indicatori de focus CSS
Evenimente de tastatură
Beneficii
Public mai larg
SEO mai bun
Conformitate legală
Design universal
Testare
Unelte automate
Testare manuală
Feedback utilizator
Tehnologie asistivă reală
```
> 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 Assistive
Înainte să începem să codăm, hai să luăm un moment să înțelegem cum experimentează persoanele cu abilități diferite webul. Nu e doar teorie—înțelegerea acestor modele reale de navigare te va face un dezvoltator mult mai bun!
Tehnologiile assistive sunt unelte 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 de experiențe web accesibile devine mult mai intuitivă. E ca și cum ai învăța să vezi codul prin ochii altcuiva.
### Citiitoare de ecran
[Citiitoarele de ecran](https://en.wikipedia.org/wiki/Screen_reader) sunt dispozitive sofisticate care transformă textul digital în vorbire sau în ieșire pentru braille. Deși sunt folosite în principal de persoanele cu deficiențe de vedere, sunt foarte utile și pentru utilizatorii cu dizabilități de învățare, cum ar fi dislexia.
Îmi place să mă gândesc la un cititor de ecran ca fiind un narator foarte deștept care îți citește o carte. Citește conținutul cu voce tare în ordine logică, anunță elementele interactive precum „buton” sau „legătură” și oferă scurtături de tastatură pentru a sari prin pagină. Dar adevărul este că cititoarele de ecran pot face magie doar dacă construim site-uri web cu structură corectă și conținut relevant. Aici intervin tu, ca dezvoltator!
**Citiitoare de ecran populare pe 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:**
Citiitoarele de ecran oferă multiple metode de navigare care fac explorarea rapidă pentru utilizatorii experimentați:
- **Citire secvențială**: Citește conținut de sus în jos, ca o carte
- **Navigare după repere**: Sare între secțiuni ale paginii (header, nav, main, footer)
- **Navigare după titluri**: Sare între titluri pentru a înțelege structura paginii
- **Liste de linkuri**: Generează o listă cu toate linkurile pentru acces rapid
- **Controlul formularelor**: Navighează direct între câmpurile de input și butoane
> 💡 **Ceva care m-a uimit**: 68% dintre utilizatorii de cititoare de ecran navighează preponderent folosind titlurile ([WebAIM Survey](https://webaim.org/projects/screenreadersurvey9/#finding)). Asta înseamnă că structura titlurilor este ca o hartă pentru utilizatori—când o faci corect, îi ajuți literalmente să se orienteze mai rapid prin conținutul tău!
### Construirea fluxului tău de testare
Am o veste bună—testarea eficientă a accesibilității nu trebuie să fie copleșitoare! Vei dori să combini unelte automate (sunt fantastice pentru a prinde problemele evidente) cu teste practice. Iată o abordare sistematică care, după experiența mea, prinde cele mai multe probleme fără să-ți ocupe tot timpul din zi:
**Flux esențial de testare manuală:**
```mermaid
flowchart TD
A[🚀 Începe Testarea] --> B{⌨️ Navigare cu Tastatura}
B --> C[Tab pe toate elementele interactive]
C --> D{🎧 Testare cu Cititor de Ecran}
D --> E[Testați cu NVDA/VoiceOver]
E --> F{🔍 Testare Zoom}
F --> G[Măriți la 200% și testați funcționalitatea]
G --> H{🎨 Verificare Culoare/Contrast}
H --> I[Verificați dacă tot textul respectă rapoartele de contrast]
I --> J{👁️ Gestionarea Focusului}
J --> K[Asigurați-vă că indicatorii de focus sunt vizibili]
K --> L[✅ Testarea Este Completă]
style A fill:#e3f2fd
style L fill:#e8f5e8
style B fill:#fff3e0
style D fill:#f3e5f5
style F fill:#e0f2f1
style H fill:#fce4ec
style J fill:#e8eaf6
```
**Listă de verificare pas cu pas:**
1. **Navigare cu tastatura**: Folosește doar Tab, Shift+Tab, Enter, Space și săgețile
2. **Testare cu cititoare de ecran**: Activează NVDA, VoiceOver sau Narrator și navighează cu ochii închiși
3. **Testare zoom**: Testează la niveluri de zoom 200% și 400%
4. **Verificare contrast culori**: Verifică toate textele și componentele UI
5. **Testare indicator de focus**: Asigură-te că toate elementele interactive au stări de focus vizibile
✅ **Începe cu Lighthouse**: Deschide DevTools în browser, rulează un audit de accesibilitate Lighthouse și folosește rezultatele pentru a-ți ghida zonele de testare manuală.
### Zoom și unelte de mărire
Știi cum uneori faci pinch-to-zoom pe telefon când textul e prea mic sau te ferești să-ți încrunți sprâncenele la laptop în lumina puternică a soarelui? Mulți utilizatori se bazează zilnic pe unelte de mărire ca să facă conținutul lizibil. Asta include persoane cu vedere slabă, adulți în vârstă și oricine a încercat să citească un site afară.
Tehnologiile moderne de zoom au evoluat dincolo de a face lucrurile doar mai mari. Înțelegerea modului în care funcționează aceste unelte te va ajuta să creezi designuri responsive care rămân funcționale și atractive la orice nivel de mărire.
**Capabilități moderne de zoom în browsere:**
- **Zoom pagină**: Scalează conținutul proporțional (text, imagini, layout) - aceasta este metoda preferată
- **Zoom doar text**: Mărește dimensiunea fontului păstrând layoutul original
- **Pinch-to-zoom**: Gest mobil pentru mărire temporară
- **Suport browser**: Toate browserele moderne acceptă zoom până la 500% fără a strica 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 la zoom 200%. La acest nivel, derularea orizontală ar trebui să fie minimă, iar toate elementele interactive să rămână accesibile.
✅ **Testează designul responsive**: Dă zoom browserului la 200% și 400%. Se adaptează layoutul elegant? Mai poți accesa toată funcționalitatea fără să derulezi excesiv?
## Instrumente Moderne pentru Testarea Accesibilității
Acum că ai înțeles cum navighează oamenii pe web folosind tehnologii assistive, să explorăm uneltele care te ajută să construiești și să testezi site-uri accesibile.
Gândește-te la asta așa: uneltele automate sunt excelent de bune pentru a prinde probleme evidente (cum ar fi lipsa textului alternativ), iar testarea practică te ajută să te asiguri că site-ul se simte bine în lumea reală. Împreună îți oferă încrederea că site-urile tale funcționează pentru toată lumea.
### Testarea contrastului culorilor
Veste bună: contrastul de culoare este una dintre problemele de accesibilitate cele mai frecvente, dar este și una dintre cele mai ușor de reparat. Un contrast bun ajută pe toată lumea—de la utilizatorii cu dizabilități de vedere până la cei care încearcă să citească telefoanele pe plajă.
**Cerinte WCAG privind contrastul:**
| 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, margini formulare) | Raport de contrast 3:1 | Raport de contrast 3:1 |
**Unelte 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/) - Web cu feedback instant
- [Stark](https://www.getstark.co/) - Plugin design pentru Figma, Sketch, Adobe XD
- [Accessible Colors](https://accessible-colors.com/) - Găsește palete de culori accesibile
✅ **Construiește palete coloristice mai bune**: Pornește de la culorile brandului tău și folosește verificatoare de contrast pentru a crea variante accesibile. Documentează-le ca tokeni de culoare accesibili în sistemul tău de design.
### Audit complet de accesibilitate
Testarea cea mai eficientă combină mai multe metode. Nici o unealtă singură nu prinde totul, deci construirea unei rutine de testare cu metode variate asigură o acoperire completă.
**Testare în browser (integrată în DevTools):**
- **Chrome/Edge**: audit accesibilitate Lighthouse + panoul Accessibility
- **Firefox**: Inspector accesibilitate cu vedere detaliată a arborelui
- **Safari**: tab audit în Web Inspector cu simulare VoiceOver
**Extensii profesionale de testare:**
- [axe DevTools](https://www.deque.com/axe/devtools/) - Standard în industrie pentru testare automată
- [WAVE](https://wave.webaim.org/extension/) - Feedback vizual cu evidențiere erori
- [Accessibility Insights](https://accessibilityinsights.io/) - Suită completă de testare Microsoft
**Linie de comandă și integrare CI/CD:**
- [axe-core](https://github.com/dequelabs/axe-core) - Bibliotecă JavaScript pentru testare automată
- [Pa11y](https://pa11y.org/) - Unealtă de testare accesibilitate în linie de comandă
- [Lighthouse CI](https://github.com/GoogleChrome/lighthouse-ci) - Scor automatizat accesibilitate
> 🎯 **Obiectiv de testare**: Țintește un scor Lighthouse de accesibilitate de peste 95 ca punct de bază. Amintește-ți, uneltele automate prind doar 30-40% dintre problemele de accesibilitate—testarea manuală rămâne esențială!
### 🧠 **Verificarea cunoștințelor de testare: Pregătit să găsești probleme?**
**Hai să vedem cum te simți legat de testarea accesibilității:**
- Care metodă de testare ți se pare cea mai accesibilă acum?
- Îți poți imagina să folosești doar tastatura pentru o zi întreagă?
- Care este o barieră de accesibilitate pe care ai întâlnit-o personal online?
```mermaid
pie title "Probleme de Accesibilitate Descoperite prin Diferite Metode"
"Unelte Automate" : 35
"Testare Manuală" : 40
"Feedback-ul Utilizatorilor" : 25
```
> **Întărire de încredere**: Testatorii profesioniști de accesibilitate folosesc exact această combinație de metode. Înveți practicile standard din industrie!
## Construind Accesibilitatea de la Fundament
Cheia succesului în accesibilitate este să o integrezi din prima zi. Știu că e tentant să spui „Voi adăuga accesibilitate mai târziu,” dar asta e ca și cum ai încerca să adaugi o rampă la o casă deja construită. Posibil? Da. Ușor? Nu chiar.
Gândește-te la accesibilitate ca la planificarea unei case—e mult mai ușor să incluzi accesibilitatea pentru scaune cu rotile în planurile arhitecturale inițiale decât să schimbi totul ulterior.
### Principiile POUR: Fundamentul accesibilității tale
Ghidurile de Accesibilitate pentru Conținut Web (WCAG) se bazează pe patru principii fundamentale care formează acronimul POUR. Nu-ți face griji—nu sunt concepte academice plictisitoare! Sunt de fapt sfaturi practice pentru a face conținut care funcționează pentru toată lumea.
Odată ce înțelegi POUR, luarea deciziilor legate de accesibilitate devine mult mai intuitivă. E ca și cum ai avea o listă mentală care îți ghidează alegerile de design. Hai să le descompunem:
```mermaid
flowchart LR
A[🔍 PERCEPTIBIL Pot utilizatorii să-l simtă?] --> B[🎮 OPERABIL Pot utilizatorii să-l folosească?]
B --> C[📖 UȘOR DE ÎNȚELES Pot utilizatorii să-l înțeleagă?]
C --> D[💪 ROBUST Funcționează peste tot?]
A1[Text alternativ Subtitrări Contrast] --> A
B1[Acces tastatură Fără crize Limite de timp] --> B
C1[Limbaj clar Previzibil Ajutor la erori] --> C
D1[Cod valid Compatibil Pregătit pentru viitor] --> D
style A fill:#e1f5fe
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
```
**🔍 Perceptibil**: Informațiile trebuie prezentate în moduri pe care utilizatorii să le poată percepe prin simțurile disponibile
- Oferă alternative textuale pentru conținut non-text (imagini, clipuri video, audio)
- Asigură contrast de culoare suficient pentru toate textele ș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ă poată fi operate prin metodele de input disponibile
- Fă toată funcționalitatea accesibilă prin navigare cu tastatura
- Oferă utilizatorilor suficient timp să citească și să interacționeze cu conținutul
- Evită conținut care poate provoca crize sau tulburări vestibulare
- Ajută utilizatorii să navigheze eficient cu structură clară și repere
- Asigură dimensiuni adecvate ale țintelor interactive (minimum 44px)
**📖 Ușor de înțeles**: Informațiile și funcționarea interfeței trebuie să fie clare și inteligibile
- Folosește un limbaj clar, simplu, potrivit pentru audiența ta
- Asigură-te că conținutul apare și funcționează în moduri previzibile și consistente
- Oferă instrucțiuni clare și mesaje de eroare pentru input-ul utilizatorilor
- Ajută utilizatorii să înțeleagă și să corecteze greșelile în formulare
- Organizează conținutul cu ordine logică de citire și ierarhie a informației
**💪 Robust**: Conținutul trebuie să funcționeze fiabil pe diferite tehnologii și dispozitive assistive
- **Folosește HTML valid și semantic ca fundament**
- **Asigură compatibilitatea cu tehnologiile assistive actuale și viitoare**
- **Urmează standardele web și bunele practici de markup**
- **Testează pe diferite browsere, dispozitive și instrumente asistive**
- **Structura conținutul astfel încât să degradeze grațios când funcțiile avansate nu sunt suportate**
### 🎯 **Verificarea principiilor POUR: Cum să rămână**
**Reflecție rapidă pe fundamente:**
- Poți să te gândești la o funcționalitate a unui site care încalcă fiecare principiu POUR?
- Care principiu ți se pare cel mai natural ca dezvoltator?
- Cum ar putea aceste principii să îmbunătățească designul pentru toți, nu doar pentru utilizatorii cu dizabilități?
```mermaid
quadrantChart
title Matricea Impactului Principiilor POUR
x-axis Efort Scăzut --> Efort Ridicat
y-axis Impact Scăzut --> Impact Ridicat
quadrant-1 Câștiguri Rapide
quadrant-2 Proiecte Majore
quadrant-3 Se Ia În Considerare Mai Târziu
quadrant-4 Focus Strategic
Alt Text: [0.2, 0.9]
Color Contrast: [0.3, 0.8]
Semantic HTML: [0.4, 0.9]
Keyboard Nav: [0.6, 0.8]
ARIA Complex: [0.8, 0.7]
Screen Reader Testing: [0.7, 0.6]
```
> **Amintește-ți**: Începe cu îmbunătățiri cu impact mare și efort mic. HTML semantic și textul alternativ oferă cel mai mare impuls accesibilității cu cel mai mic efort!
## Crearea unui design vizual accesibil
Un design vizual bun și accesibilitatea merg mână în mână. Când proiectezi având în vedere accesibilitatea, descoperi adesea că aceste constrângeri conduc la soluții mai curate, mai elegante, care avantajează toți utilizatorii.
Să explorăm cum să creezi designuri vizual atractive care funcționează pentru toată lumea, indiferent de abilitatea vizuală sau condițiile în care privesc conținutul tău.
### Strategii de culoare și accesibilitate vizuală
Culoarea este puternică pentru comunicare, dar nu ar trebui niciodată să fie singurul mod în care transmiți informații importante. Proiectarea dincolo de culoare creează experiențe mai robuste, incluzive, care funcționează în mai multe situații.
**Proiectează pentru diferențele de percepție a culorilor:**
Aproximativ 8% dintre bărbați și 0,5% dintre femei au unele forme de diferență în percepția culorilor (adesea numită "daltonism"). Cele mai comune tipuri sunt:
- **Deuteranopie**: Dificultate în a distinge roșul de verde
- **Protanopie**: Roșu pare mai estompat
- **Tritanopie**: Dificultăți cu albastrul și galbenul (rar)
**Strategii incluzive de culoare:**
```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 bază privind contrastul:**
- Testează alegerile de culoare cu simulatoare de daltonism
- Folosește modele, texturi sau forme în paralel cu codarea prin culoare
- Asigură-te că stările interactive rămân distincte fără culoare
- Ia în considerare cum arată designul tău în modul de contrast ridicat
✅ **Testează accesibilitatea culorii**: Folosește unelte precum [Coblis](https://www.color-blindness.com/coblis-color-blindness-simulator/) pentru a vedea cum apare site-ul tău pentru utilizatorii cu diferite tipuri de vedere a culorilor.
### Indicatori de focalizare și designul interacțiunii
Indicatorii de focalizare sunt echivalentul digital al cursorului — 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 moderne pentru indicatorii de focalizare:**
```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**: Minim 2px grosime pe toată marginea elementului
- **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 UI
> 💡 **Sfat de design**: Indicatorii de focalizare buni folosesc adesea o combinație de contur, umbre de cutie și schimbări de culoare pentru a asigura vizibilitatea pe diferite fundaluri și contexte.
✅ **Auditează indicatorii de focalizare**: Parcurge site-ul tău cu tabul și observă ce elemente au indicatori clari de focalizare. Sunt unele greu de văzut sau lipsesc complet?
### HTML semantic: Fundamentul accesibilității
HTML semantic este ca și cum ai da tehnologiilor asistive un sistem GPS pentru site-ul tău web. Când folosești elementele HTML potrivite pentru scopul lor, oferi practic cititoarelor de ecran, tastaturilor și altor instrumente o hartă detaliată care ajută utilizatorii să navigheze eficient.
Iată o analogie care mi-a plăcut foarte mult: HTML semantic este diferența dintre o bibliotecă bine organizată cu categorii clare și indicatoare utile, față de 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!
```mermaid
flowchart TD
A[🏠 Document HTML] --> B[📰 antet]
A --> C[🧭 nav]
A --> D[📄 principal]
A --> E[📋 subsol]
B --> B1[h1: Numele site-ului Logo și branding]
C --> C1[ul: Navigație Linkuri principale]
D --> D1[articol: Conținut secțiune: Subsecțiuni]
D --> D2[aside: Bara laterală Conținut conex]
E --> E1[nav: Linkuri subsol Informații drepturi de autor]
D1 --> D1a[h1: Titlul paginii h2: Secțiuni majore h3: Subsecțiuni]
style A fill:#e3f2fd
style B fill:#e8f5e8
style C fill:#fff3e0
style D fill:#f3e5f5
style E fill:#e0f2f1
```
**Blocuri de construcție 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 cititorul de ecran |
|------------------|------|------------------------------------|
| `` | Antetul paginii sau secțiunii | "Punct de reper banner" - navigare rapidă în sus |
| `