Care este diferența dintre semantică și…

Semantica ajută mașinile (browsere, analizatoare, roboți de căutare) să înțeleagă structura și sensul conținutului. Accesibilitatea (a11y) are ca scop ca conținutul să fie înțeles și utilizabil de către persoanele cu diferite limitări fizice sau cognitive care utilizează tehnologii de asistență.

Etichete semantice

Utilizarea etichetelor HTML semantice, cum ar fi <article>, <nav>, <aside>, <footer>, <h1>-<h6>, conferă elementelor paginii o semnificație. De exemplu:

<article>
  <h2>Titlul articolului</h2>
  <p>Textul articolului...</p>
</article>

Aceasta ajută browserele să interpreteze corect structura documentului.

Accesibilitate (a11y)

Accesibilitatea acoperă multe aspecte:

Semantica: Utilizarea corectă a etichetelor semantice face deja parte din accesibilitate, deoarece ajută tehnologiile de asistență (cititoare de ecran) să înțeleagă structura și funcția elementelor.
Atribute ARIA: Atribute suplimentare, precum aria-label, aria-describedby, aria-hidden, role, oferă informații suplimentare pentru tehnologiile de asistență atunci când semantica HTML nu este suficientă.
```
<button aria-label="Închide fereastra de dialog">
  <img src="close.svg" alt="">
</button>
```
Contrast: Contrast suficient între text și fundal pentru persoanele cu deficiențe de vedere.
Navigare cu tastatura: Posibilitatea de a naviga pe pagină și de a interacționa cu elementele folosind doar tastatura.
Text alternativ pentru imagini (alt): Descrierea conținutului imaginii pentru utilizatorii care nu o pot vedea.
```
<img src="cat.jpg" alt="Pisică neagră dormind pe pervaz.">
```
Structura titlurilor: Ierarhie logică a titlurilor (<h1> - <h6>) pentru navigare ușoară cu cititoare de ecran.

Relație

Semantica reprezintă o bază importantă pentru accesibilitate. O pagină bine structurată cu elemente semantice este mult mai ușor de făcut accesibilă. Totuși, semantica singură nu este suficientă pentru o accesibilitate completă – adesea sunt necesare măsuri suplimentare, cum ar fi atributele ARIA, gestionarea focusului și asigurarea unui contrast suficient.

Care este diferența dintre semantică și accesibilitate (a11y)?