Ghid Complet Web Accessibility: Fă Website-ul Accesibil Pentru Toți

Introducere Vezi și: Ghid complet Web Design, UX Design Principles, Responsive Web Design, Ghid complet Digital Marketing.

15% din populația mondială are o formă de dizabilitate. Asta înseamnă aproximativ 1.3 miliarde de oameni care ar putea fi clienții tăi - dacă website-ul tău e accesibil.

De Ce Contează Accessibility?

Legal:

În UE și SUA, multe jurisdicții au legi care obligă accesibilitatea web
Site-uri guvernamentale și publice TREBUIE să fie WCAG compliant
Lawsuits pentru website-uri inaccesibile cresc cu 20% anual

Business:

Piață extinsă (+15% potențiali clienți)
SEO îmbunătățit (multe practici A11y = SEO best practices)
Brand reputation pozitivă

Etic:

Fiecare om merită acces egal la informație
Web-ul a fost creat să fie universal

1. Înțelegerea Tipurilor de Dizabilități

Vizuale

Cecitate totală:

Screen readers (JAWS, NVDA, VoiceOver)
Navigare exclusiv prin keyboard
Dependență de HTML semantic și ARIA labels

Vedere parțială:

Screen magnifiers
High contrast mode
Necesită text scalabil (nu imagini de text)

Daltonism:

8% dintre bărbați, 0.5% dintre femei
Nu te baza DOAR pe culoare pentru informație
Folosește patterns, text, iconițe

Auditive

Surditate:

Captions pentru video
Transcripturi pentru audio
Alerte vizuale (nu doar sonore)

Motorii

Dificultăți la mișcări fine:

Butoane mari (44×44px minimum)
Spacing generos între elemente
Evită hover-only interactions

Paralizie:

Keyboard navigation completă
Voice control compatibility
Switch device support

Cognitive

Dislexie:

Fonturi simple, sans-serif
Line height generos (1.5-2)
Text alignment left (nu justify)

ADHD:

Evită animații excesive sau autoplay
Provide pause/stop controls
Structură clară, predictibilă

Autism:

Evită metafore complexe
Instrucțiuni clare, directe
Consistență vizuală

2. WCAG 2.2 - Web Content Accessibility Guidelines

Nivelurile de Conformitate

Level A (Minimum):

Fundamental barriers removed
Text alternatives pentru imagini
Keyboard accessible

Level AA (Standard):

Majoritatea organizațiilor targetează AA
Contrast ratio 4.5:1 pentru text normal
Required pentru multe legislații

Level AAA (Gold Standard):

Highest level of accessibility
Contrast 7:1
Sign language pentru video

Targetează Level AA - este standard-ul industrie și legal sufficient în majoritatea cazurilor.

Cele 4 Principii POUR:

Perceivable - Informația poate fi percepută Operable - UI poate fi operat Understandable - Informația e comprehensibilă Robust - Funcționează cu tehnologii assistive

3. Semantic HTML - Fundația Accessibility

Structură Document Corectă

<!-- ❌ Rău - div soup -->
<div class="header">
  <div class="nav">
    <div class="link">Home</div>
  </div>
</div>

<!-- ✅ Bun - semantic HTML -->
<header>
  <nav>
    <a href="/">Home</a>
  </nav>
</header>

Heading Hierarchy

<!-- ❌ Rău - hierarchy broken -->
<h1>Titlu Principal</h1>
<h3>Subtitlu</h3>  <!-- skipped h2! -->
<h2>Altceva</h2>

<!-- ✅ Bun - logical hierarchy -->
<h1>Titlu Principal</h1>
<h2>Subtitlu</h2>
<h3>Sub-subtitlu</h3>

Reguli:

UN SINGUR H1 per pagină
Nu sări nivele (h1 → h2 → h3, nu h1 → h3)
Screen readers folosesc headings pentru navigare

Landmark Regions

<header><!-- site header --></header>
<nav><!-- main navigation --></nav>
<main><!-- primary content --></main>
<aside><!-- sidebar --></aside>
<footer><!-- site footer --></footer>

Screen readers permit jump direct la aceste regions.

Toate funcționalitățile trebuie accesibile cu keyboard-ul.

Focus Management

/* ❌ Rău - ascunde focus outline */
:focus {
  outline: none;
}

/* ✅ Bun - custom focus visible */
:focus-visible {
  outline: 3px solid #D4AF37;
  outline-offset: 2px;
}

Tab Order Logic

<!-- ❌ Rău - tabindex pozitiv confuz -->
<button tabindex="5">Primul</button>
<button tabindex="1">Al doilea</button>

<!-- ✅ Bun - natural DOM order sau tabindex="0" -->
<button>Primul</button>
<button>Al doilea</button>

<!-- Pentru elemente non-interactive care trebuie focusabile -->
<div tabindex="0" role="button">Custom button</div>

<!-- Pentru a face un element NON-focusabil -->
<div tabindex="-1">Nu e în tab order</div>

Keyboard Shortcuts

Essential shortcuts:

Tab - Next focusable element
Shift+Tab - Previous focusable element
Enter - Activate button/link
Space - Activate button, scroll page
Esc - Close modal/dropdown
Arrow keys - Navigate menus, comboboxes

Skip Links

<!-- Permite skip direct la main content -->
<a href="#main-content" class="skip-link">
  Skip to main content
</a>

<nav><!-- navigation here --></nav>

<main id="main-content">
  <!-- page content -->
</main>

.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #D4AF37;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

5. Color Contrast și Visual Design

WCAG Contrast Requirements

Level AA:

Normal text (< 18px): 4.5:1 ratio
Large text (18px+ sau 14px+ bold): 3:1 ratio
UI components: 3:1 ratio

Level AAA:

Normal text: 7:1
Large text: 4.5:1

Tools de Verificare:

WebAIM Contrast Checker
Chrome DevTools (Inspect element → Accessibility pane)
Contrast Ratio by Lea Verou

Exemple:

/* ❌ Insufficient contrast (2.5:1) */
color: #999999;
background: #FFFFFF;

/* ✅ Sufficient AA (4.6:1) */
color: #767676;
background: #FFFFFF;

/* ✅ AAA level (7.1:1) */
color: #595959;
background: #FFFFFF;

Nu Te Baza DOAR pe Culoare

<!-- ❌ Rău - doar culoare pentru status -->
<span style="color: red;">Eroare</span>
<span style="color: green;">Succes</span>

<!-- ✅ Bun - culoare + icon + text -->
<span class="error">
  <svg><path d="..." /></svg> <!-- X icon -->
  Eroare: Formularul nu a fost trimis
</span>

<span class="success">
  <svg><path d="..." /></svg> <!-- checkmark icon -->
  Succes: Formularul a fost trimis
</span>

6. Alternative Text pentru Imagini

Când Să Folosești Alt Text?

Informative images:

<img src="chart.png" alt="Grafic linie care arată creștere vânzări cu 45% în 2025">

Decorative images:

<img src="divider.png" alt="" role="presentation">
<!-- alt="" gol = screen reader o ignoră -->

Functional images (buttons):

<button>
  <img src="search.svg" alt="Search">
</button>

Complex images (charts, diagrams):

<figure>
  <img src="complex-chart.png" alt="Detailed sales data chart">
  <figcaption>
    Sales increased from $100k in Q1 to $250k in Q4, with steady month-over-month growth.
  </figcaption>
</figure>

Alt Text Best Practices:

Scurt și descriptiv (< 125 caractere ideal)
Nu începe cu "image of" sau "picture of" (redundant)
Descrie funcția, nu aspectul
Context matters - alt-ul diferă în funcție de context

7. ARIA (Accessible Rich Internet Applications)

ARIA completează HTML semantic când e insuficient.

Regula de Aur ARIA:

"No ARIA is better than bad ARIA" - Folosește ARIA doar când HTML semantic nu e suficient.

ARIA Roles

<!-- Transformă div în button -->
<div role="button" tabindex="0">Click me</div>

<!-- Mai bine: -->
<button>Click me</button>

<!-- ARIA e util pentru componente custom -->
<div role="tablist">
  <button role="tab" aria-selected="true">Tab 1</button>
  <button role="tab" aria-selected="false">Tab 2</button>
</div>

ARIA States și Properties

aria-label - Text alternativ pentru elemente:

<button aria-label="Close dialog">
  <svg><!-- X icon --></svg>
</button>

aria-labelledby - Referință la alt element pentru label:

<h2 id="dialog-title">Confirmă acțiunea</h2>
<div role="dialog" aria-labelledby="dialog-title">
  <!-- dialog content -->
</div>

aria-describedby - Descriere suplimentară:

<input
  type="email"
  aria-describedby="email-hint"
>
<small id="email-hint">Vom folosi emailul doar pentru notificări importante</small>

aria-live - Anunță schimbări dinamice:

<!-- Notificări non-critice -->
<div aria-live="polite">
  Formularul a fost salvat
</div>

<!-- Notificări urgente -->
<div aria-live="assertive">
  Eroare: Sesiunea a expirat
</div>

aria-expanded - State pentru dropdowns/accordions:

<button aria-expanded="false" aria-controls="menu">
  Menu
</button>
<nav id="menu" hidden>
  <!-- menu items -->
</nav>

8. Forms Accesibile

Label Associations

<!-- ❌ Rău - placeholder ca label -->
<input type="text" placeholder="Nume">

<!-- ✅ Bun - label explicit -->
<label for="name">Nume</label>
<input type="text" id="name">

<!-- ✅ Sau label implicit -->
<label>
  Nume
  <input type="text">
</label>

Error Handling

<label for="email">Email</label>
<input
  type="email"
  id="email"
  aria-invalid="true"
  aria-describedby="email-error"
>
<span id="email-error" role="alert">
  Emailul nu e valid. Format așteptat: nume@exemplu.com
</span>

Required Fields

<!-- ✅ Vizual + programatic -->
<label for="phone">
  Telefon <span aria-label="required">*</span>
</label>
<input
  type="tel"
  id="phone"
  required
  aria-required="true"
>

9. Modals și Overlays Accesibile

Focus Trapping

const modal = document.querySelector('[role="dialog"]');
const focusableElements = modal.querySelectorAll(
  'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
);
const firstElement = focusableElements[0];
const lastElement = focusableElements[focusableElements.length - 1];

// Trap focus inside modal
modal.addEventListener('keydown', (e) => {
  if (e.key === 'Tab') {
    if (e.shiftKey) {
      if (document.activeElement === firstElement) {
        lastElement.focus();
        e.preventDefault();
      }
    } else {
      if (document.activeElement === lastElement) {
        firstElement.focus();
        e.preventDefault();
      }
    }
  }

  // Close on Escape
  if (e.key === 'Escape') {
    closeModal();
  }
});

ARIA pentru Modal

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  aria-describedby="modal-description"
>
  <h2 id="modal-title">Confirmare</h2>
  <p id="modal-description">Ești sigur că vrei să ștergi acest element?</p>

  <button>Confirmă</button>
  <button>Anulează</button>
</div>

10. Testing Accessibility

Automated Tools:

axe DevTools (Chrome/Firefox extension):

Găsește ~57% din probleme A11y
Sugestii concrete de fix
Gratuit

Lighthouse (Chrome DevTools):

Accessibility score
Integrat în workflow-ul dev

WAVE (WebAIM):

Browser extension
Visual feedback pe pagină

Manual Testing:

Keyboard Navigation:

Tab prin toate elementele interactive
Enter/Space activează buttons/links
Esc închide modals
Arrow keys navigă menus

Screen Reader Testing:

macOS: VoiceOver (cmd+F5)
Windows: NVDA (gratuit) sau JAWS
Mobile: iOS VoiceOver, Android TalkBack

Color Contrast:

WebAIM Contrast Checker pentru toate text/background combo
Testează în high contrast mode (Windows)

Resize Text:

Zoom la 200% - totul vizibil și functional?
Text wraps corect?
Nu se suprapun elemente?

User Testing:

Ideal: testează cu utilizatori reali cu dizabilități.

Hire testers prin Fable
UserTesting.com oferă accessibility panel

11. Mobile Accessibility

Touch Targets

Minimum 44×44px (Apple HIG) sau 48×48px (Material Design):

.button {
  min-width: 44px;
  min-height: 44px;
  padding: 12px 16px;
}

/* Spacing între buttons */
.button + .button {
  margin-left: 8px;
}

Gestures Alternative

Provide alternatives pentru complex gestures:

Swipe → Buttons pentru prev/next
Pinch-zoom → + / - buttons
Long-press → Context menu button

12. Video și Audio Accessibility

Captions (Subtitles)

<video controls>
  <source src="video.mp4" type="video/mp4">
  <track
    kind="captions"
    src="captions-ro.vtt"
    srclang="ro"
    label="Română"
    default
  >
  <track
    kind="captions"
    src="captions-en.vtt"
    srclang="en"
    label="English"
  >
</video>

Transcripts

Provide full text transcript sub video:

Pentru utilizatori surzi
Pentru SEO
Pentru locații cu bandwidth limitat

Audio Description

Pentru utilizatori cu deficiențe vizuale, provide narration a acțiunilor vizuale importante.

Concluzie

Web accessibility nu e doar "nice to have" - e esențială. Un website accesibil e:

Legal compliant
Mai bine clasat în Google (multe practici A11y = SEO)
Accesibil pentru TOȚI (+15% piață potențială)
Mai bun UX în general (majoritatea îmbunătățirilor A11y beneficiază pe toată lumea)

Checklist Accessibility Esențial:

Resurse:

Vrei un audit complet de accessibility pentru website-ul tău? Contactează-ne pentru o evaluare gratuită.