WCAG — ce este, Web Content Accessibility Guidelines și nivelele AA

Ce este WCAG?

WCAG (Web Content Accessibility Guidelines) — este un set de recomandări pentru asigurarea accesibilității conținutului web pentru persoanele cu dizabilități. Standardul este dezvoltat de W3C Web Accessibility Initiative (WAI) din 1999. WCAG acoperă persoanele orb și cu vedere parțială, surde și cu auz parțial, persoanele cu limitări de mobilitate, vorbire și cognitive, precum și utilizatorii în vârstă cu modificări legate de vârstă.

Prima versiune WCAG 1.0 a fost lansată în 1999 și conținea 14 principii directoare. WCAG 2.0 (2008) a devenit neutră tehnologic, aplicabilă la HTML, PDF, multimedia și aplicații mobile. WCAG 2.1 (2018) a adăugat criterii pentru dispozitive mobile și introducere tactilă. WCAG 2.2 (2023) — versiunea curentă cu criterii noi pentru animații și focalizare. WCAG nu este lege, dar multe țări se referă la el în legislația lor.

GOST R 52872-2019 în Rusia, European Accessibility Act în UE și Section 508 în SUA — toate necesită conformitate WCAG AA. Pentru site-urile corporative și guvernamentale, WCAG AA este un standard obligatoriu, nerespectarea căruia duce la procese. Conform datelor UsableNet (2024), în SUA au fost depuse peste 12 000 de procese privind inaccesibilitatea site-urilor web.

Versiuni WCAG: comparație

Consecințe juridice ale neconformității

Nerespectarea WCAG implică riscuri grave. În 2025, European Accessibility Act (EAA) a intrat în vigoare, cerând WCAG 2.1 AA pentru toate site-urile publice și aplicațiile mobile din UE. Amenzile ajung până la 5% din cifra de afaceri anuală a companiei. Suma medie de soluționare a proceselor în SUA este de $25 000–$50 000. Auditul accessibility trebuie efectuat în fiecare etapă de dezvoltare, nu doar înainte de lansare.

Patru principii WCAG: POUR

POUR — acronimul celor patru principii WCAG: Perceivable (perceptibilitate), Operable (operabilitate), Understandable (ușurință de înțelegere), Robust (robustețe). Fiecare principiu conține linii directoare, iar liniile directoare — criterii de succes testabile. În total, WCAG 2.2 conține 13 linii directoare și 86 de criterii de succes. Fiecare criteriu are nivelul A, AA sau AAA.

Perceivable — Perceptibilitate

Principiul Perceivable cere ca conținutul să fie prezentat într-o formă pe care utilizatorul o poate percepe. Linii directoare: 1.1 Text Alternatives (alternative text), 1.2 Time-based Media (subtitrări, transcrieri), 1.3 Adaptable (conținut fără pierderi la schimbarea formatului), 1.4 Distinguishable (contrast 4.5:1, culoare, sunet). Criteriul cheie 1.4.3 Contrast Minimum (AA) — cel mai frecvent încălcat: 86% din pagini nu îl respectă conform datelor WebAIM.

Operable — Operabilitate

Principiul Operable cere operabilitatea interfeței. Linii directoare: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. Criteriul 2.1.1 Keyboard (A) — unul dintre cele mai critice: toate funcțiile trebuie să fie accesibile de la tastatură fără mouse. Ferestrele modale care se închid doar prin clic, meniurile dropdown fără navigare de la tastatură — încălcări tipice.

Understandable — Ușurință de înțelegere

Principiul Understandable cere claritatea conținutului și interfeței. Linii directoare: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. Criteriul 3.3.4 Error Prevention este deosebit de important pentru aplicațiile financiare și medicale: prevenirea consecințelor grave ale erorilor de introducere. Criteriul 3.2.6 Consistent Help (nou în WCAG 2.2) cere ca butoanele de ajutor să fie în aceleași locuri.

Robust — Robustețe

Principiul Robust cere compatibilitatea cu tehnologiile asistive. Linia directoare 4.1 Compatible cu criteriul cheie 4.1.2 Name, Role, Value (A): fiecare component UI trebuie să aibă nume, rol și stare determinabile programatic. Atributele ARIA (role, aria-label, aria-expanded) — instrumentul principal. Fără ele, cititoarele de ecran nu pot determina dacă un element este buton, link sau filă.

Tabelul principiilor WCAG

Nivele de conformitate WCAG: A, AA, AAA

WCAG definește trei nivele: A (minim), AA (standard) și AAA (maxim). Nivelul A — minimul obligatoriu: fără el, conținutul este inaccesibil pentru unele categorii de utilizatori. AA elimină principalele bariere de accesibilitate. AAA — cel mai înalt standard, dar nu poate fi atins pentru tot conținutul (de exemplu, unele limbi de semne sau transcrieri audio nu sunt întotdeauna fezabile).

Nivelul A (30 de criterii): text alternatives, operabilitate de la tastatură, timp suficient, absența pâlpâirii peste 3 Hz. Nivelul AA (+24 de criterii): contrast ratio 4.5:1, subtitrări pentru video, redimensionarea textului la 200%, focalizare clară de la tastatură. Nivelul AAA (+32 de criterii): contrast ratio 7:1, limbaj de semne, dezactivarea animației (2.3.3), transcriere audio. Pentru site-urile guvernamentale este suficient AA.

Procesul de audit WCAG

Auditul accessibility conform WCAG include: testare automată (axe DevTools, WAVE, Lighthouse — găsește 30–40% din erori), testare manuală de la tastatură și cu cititoare de ecran (VoiceOver, TalkBack, NVDA), audit de specialitate pentru criterii complexe și testare cu utilizatori cu dizabilități. Raportul de audit trebuie să conțină nivelul de conformitate și lista neconformităților pentru fiecare criteriu.

Noutăți în WCAG 2.2

WCAG 2.2 a adăugat 9 criterii noi. Cele cheie: 2.4.11 Focus Appearance (AA) — indicator de focalizare >= 2px cu contrast 3:1, 2.5.8 Target Size Minimum (AA) — țintă tactilă minim 24x24 pixeli, 3.3.7 Accessible Authentication (AA) — autentificare fără CAPTCHA. Criteriul 2.3.3 Animation from Interactions (AAA) — animație dezactivabilă sau de cel mult 5 secunde.

Focus Appearance — cea mai importantă schimbare. Anterior, outline: none fără înlocuitor era o încălcare, dar nu existau cerințe clare. WCAG 2.2 a stabilit: grosime >= 2px, contrast 3:1 cu fundalul, suprafața indicatorului cel puțin cât suprafața elementului. Pentru butoanele personalizate cu border-radius, utilizați box-shadow în loc de outline.

Focus Appearance în CSS

/* WCAG 2.2 Focus Appearance (2.4.11 AA) */
:focus-visible {
    outline: 3px solid #0066CC;
    outline-offset: 2px;
}

.button:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 3px #FFFFFF,
        0 0 0 6px #0066CC;
}

@media (prefers-color-scheme: dark) {
    :focus-visible { outline-color: #66B2FF; }
}

@media (prefers-contrast: more) {
    :focus-visible { outline: 4px solid #000; outline-offset: 3px; }
}

Stilizarea :focus-visible asigură conformitatea cu criteriul Focus Appearance. Alternativa prin box-shadow este potrivită pentru elemente cu border-radius. Tema întunecată și High Contrast adaptează culorile de focalizare.

Accessible Authentication

Criteriul 3.3.7 Accessible Authentication (AA) — una dintre cele mai dezbătute noutăți. CAPTCHA cu recunoaștere de obiecte, puzzle-uri, glisare de glisoare — acum este încălcare dacă nu există alternativă. Metode permise: OTP prin email/SMS, biometrie (Face ID, Touch ID), coduri QR, Magic link. Acest lucru simplifică viața nu doar persoanelor cu tulburări cognitive, ci tuturor utilizatorilor.

WCAG pentru aplicații mobile

WCAG se aplică aplicațiilor native iOS și Android. Patru principii POUR acoperă complet interfețele mobile. Criterii specifice: 2.5.1 Pointer Gestures (gesturi fără precizie ridicată), 2.5.2 Pointer Cancellation (anularea atingerii accidentale), 2.5.3 Label in Name (textul butonului coincide cu eticheta accessibility). Pentru iOS se utilizează UIKit/UIAccessibility, pentru Android — AccessibilityService și ContentDescription.

Cele mai frecvente încălcări în aplicațiile mobile: 1.1.1 Non-text Content — pictograme fără contentDescription, 2.4.3 Focus Order — ordine de navigare incorectă, 2.5.8 Target Size — butoane mai mici de 24x24dp, 1.4.3 Contrast — text pe imagini de fundal. iOS oferă Accessibility Inspector în Xcode, Android — Accessibility Scanner pentru audit automat.

Cod SwiftUI conform WCAG

import SwiftUI

struct AccessibleButton: View {
    let action: () -> Void
    let title: String
    let icon: String

    var body: some View {
        Button(action: action) {
            HStack {
                Image(systemName: icon)
                Text(title)
            }
            .padding(16)
            .background(Color.blue)
            .foregroundColor(.white)
            .cornerRadius(12)
            .frame(minWidth: 48, minHeight: 48)
        }
        .accessibilityLabel(title)
        .accessibilityHint("Faceți clic pentru acțiune")
        .accessibilityAddTraits(.isButton)
    }
}

struct AccessibleForm: View {
    @State private var email = ""

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("Email")
                TextField("Introduceți email", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("Câmp de introducere email")
                    .accessibilityHint("Introduceți adresa de email")
            }
            AccessibleButton(
                action: { },
                title: "Trimiteți",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

Componentele SwiftUI cu accessibilityLabel, accessibilityHint și minWidth/minHeight >= 48pt asigură conformitatea cu WCAG 2.5.8 (Target Size) și 2.5.3 (Label in Name). Utilizați Xcode Accessibility Inspector pentru verificarea focalizării VoiceOver, a ordinii de navigare și a dimensiunilor touch targets. Cerințe similare se aplică pentru Jetpack Compose prin Modifier.semantics.