Accesibilitate și semantică- Curs HTML

Accesibilitate și semantică

Accesibilitatea (a11y) și semantica sunt esențiale pentru ca site-urile să fie utilizabile de toți oamenii, inclusiv cei cu dizabilități. Ele contribuie la o experiență corectă, clară și inclusivă.

Ce înseamnă „semantică” în HTML?

• Folosirea elementelor HTML potrivite pentru conținutul pe care îl redau
• Exemple:
  • <article> - pentru articole independente
  • <section> - pentru secțiuni tematice
  • <nav> - pentru meniuri de navigare
  • <header>, <footer> - pentru cap și coadă de pagină
• Semantica ajută cititoarele de ecran și motoarele de căutare să înțeleagă structura paginii

Principii de accesibilitate

• Perceptibil - conținutul trebuie să poată fi perceput de toți utilizatorii
• Operabil - interacțiunile trebuie să poată fi realizate cu tastatura, mouse-ul etc.
• Înțeles - informația și interfața trebuie să fie clare
• Robust - conținutul trebuie să funcționeze cu diverse tehnologii de asistență

Practici recomandate

• Folosește alt pentru imagini: <img src="..." alt="Descriere">
• Asigură contrast suficient între text și fundal
• Folosește aria-label, aria-hidden când e necesar
• Testează cu tastatura: poți naviga fără mouse?
• Evită folosirea exclusivă a culorii pentru a transmite informații

Exemple de semantică corectă

<nav>
  <ul>
    <li><a href="/home">Acasă</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<article>
  <h2>Titlul articolului</h2>
  <p>Conținutul articolului...</p>
</article>

Resurse utile

• MDN - Accessibility
• W3C Web Accessibility Initiative
• WAVE - Accessibility Evaluation Tool

Felicitari! Acest curs introductiv se opreste aici. In urmatorul curs veti invata despre limbajul de stilizare CSS. Mult succes si spor la invatat!