Accesibilitatea Web (a11y) reprezintă practica de a proiecta și dezvolta pagini web pe care oricine le poate naviga și înțelege, inclusiv persoanele cu dizabilități vizuale, auditive, motorii sau cognitive. În plus, accesibilitatea este o cerință legală conform standardului european European Accessibility Act (EAA) și criteriilor internaționale WCAG 2.2.
Exemplu practic: Buton accesibil de tip Meniu Hamburger
<!-- Buton de meniu accesibil cu suport complet pentru Screen Readers și tastatură -->
<button type="button"
id="btn-meniu"
class="menu-toggle"
aria-label="Deschide meniul principal de navigare"
aria-expanded="false"
aria-controls="meniu-navigare">
<!-- Iconița SVG este decorativă, o ascundem explicit de cititorul de ecran -->
<svg viewBox="0 0 24 24" width="24" height="24" aria-hidden="true">
<line x1="3" y1="12" x2="21" y2="12" stroke="currentColor" stroke-width="2"/>
<line x1="3" y1="6" x2="21" y2="6" stroke="currentColor" stroke-width="2"/>
<line x1="3" y1="18" x2="21" y2="18" stroke="currentColor" stroke-width="2"/>
</svg>
<span class="text-meniu">Meniu</span>
</button>
<nav id="meniu-navigare" aria-label="Navigare principală" hidden>
<ul>
<li><a href="/">Acasă</a></li>
<li><a href="/invata/">Învață Programare</a></li>
<li><a href="/contact/">Contact</a></li>
</ul>
</nav>Cele 4 Atribute ARIA Esențiale pe care Trebuie să le Cunoști
| Atribut ARIA | Când se utilizează | Exemplu de cod |
|---|---|---|
aria-label |
Oferă o etichetă vocală unui element care nu are text vizibil (ex: un buton cu iconiță de lupă). | <button aria-label="Caută"><svg .../></button> |
aria-expanded |
Indică dacă un meniu, un acordeon sau un dropdown este deschis (true) sau închis (false). |
<button aria-expanded="false" aria-controls="faq-1"> |
aria-hidden="true" |
Ascunde complet un element decorativ (iconițe SVG, separatori vizuali) de tehnologiile asistive. | <span aria-hidden="true">•</span> |
aria-live="polite" |
Anunță automat utilizatorul când conținutul se actualizează dinamic prin AJAX (notificări, coș de cumpărături). | <div aria-live="polite" id="cos-total">3 produse</div> |
Prima Regulă a Standardului ARIA (No ARIA is better than Bad ARIA)
„Dacă poți folosi un element nativ HTML5 cu semantica și comportamentul deja integrate, nu folosi un element generic asociat cu atribute ARIA.” De exemplu, folosește întotdeauna <button> în loc de <div role="button" tabindex="0">, deoarece butonul nativ suportă automat navigarea prin tasta Tab și declanșarea prin Enter/Space fără a necesita cod JavaScript suplimentar.