Cum să faci HTML accesibil — ghid de accesibilitate web

In this tutorial, you'll learn about Cum să faci HTML accesibil. We cover key concepts, practical examples, and best practices.

Accesibilitatea web (a11y) asigură că site-ul tău poate fi folosit de toți utilizatorii, inclusiv de cei cu dizabilități vizuale, motorii sau cognitive.

The Problem

Majoritatea site-urilor ignoră accesibilitatea: imagini fără alt, butoane fără etichete, focus vizual eliminat. Acest lucru exclude milioane de utilizatori și poate încălca legi precum WCAG.

The Wrong Way

<img src="grafic.jpg">
<button onclick="submit()"></button>
<div onclick="goHome()">Acasă</div>

Probleme: Imaginea n-are text alternativ, butonul e gol, iar div-ul nu e focusabil cu tastatura.

The Right Way

<img src="grafic.jpg" alt="Grafic cu vânzările pe 2025">
<button onclick="submit()" aria-label="Trimite formularul">Trimite</button>
<a href="/" role="button">Acasă</a>

Step-by-Step Fix

1. Adaugă text alternativ imaginilor

<img src="logo.png" alt="Logo DodaTech">
<img src="decorative.png" alt="" role="presentation">

2. Folosește aria-label pentru elemente fără text vizibil

<button aria-label="Închide dialogul">×</button>
<nav aria-label="Navigare principală">...</nav>

3. Gestionează focusul cu tabindex

<!-- 0 = focusabil în ordinea naturală -->
<div tabindex="0" role="button">Click aici</div>

<!-- -1 = focusabil doar programatic -->
<div tabindex="-1" id="mesaj">Alertă</div>

4. Folosește role pentru claritate semantică

<div role="alert">Eroare la conectare</div>
<div role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100">50%</div>

Prevention Tips

• Testează cu un cititor de ecran (NVDA, VoiceOver)
• Nu elimina outline fără să înlocuiești cu alt indicator de focus
• Toate funcționalitățile trebuie să fie accesibile de la tastatură
• Raportul de contrast trebuie să fie de minim 4.5:1

Common Mistakes

1. Alt text lipsă — imaginile decorative trebuie să aibă alt="", cele informative alt="descriere"
2. Outline: none — eliminarea conturului de focus face site-ul inaccesibil de la tastatură
3. Butoane fără text — butoanele icon trebuie să aibă aria-label
4. Role incorecte — folosirea role="button" pe un link care nu se comportă ca buton
5. Tabindex > 0 — valorile pozitive perturbă ordinea naturală de navigare

FAQ

Construit de dezvoltatorii Doda Browser, DodaZIP și Durga Antivirus Pro. Uneltele DodaTech se integrează perfect cu HTML pentru productivitate și securitate sporită.