WCAG — шта је то, Web Content Accessibility Guidelines и нивои AA

Шта је WCAG?

WCAG (Web Content Accessibility Guidelines) — скуп препорука за осигурање приступачности веб-садржаја за особе са инвалидитетом. Стандард развија W3C Web Accessibility Initiative (WAI) од 1999. године. WCAG покрива слијепе и слабовиде, глуве и наглуве, особе са ограничењима кретања, говора и когнитивним сметњама, као и старије кориснике са промјенама везаним за узраст.

Прва верзија WCAG 1.0 је објављена 1999. године и садржала је 14 водећих принципа. WCAG 2.0 (2008) је постала технолошки неутрална, примјењива на HTML, PDF, мултимедију и мобилне апликације. WCAG 2.1 (2018) је додала критеријуме за мобилне уређаје и додирни унос. WCAG 2.2 (2023) — тренутна верзија са новим критеријумима за анимацију и фокус. WCAG није закон, али многе земље се на њега позивају у законодавству.

ГОСТ Р 52872-2019 у Русији, European Accessibility Act у ЕУ и Section 508 у САД — сви захтијевају WCAG AA усаглашеност. За корпоративне и државне сајтове, WCAG AA је обавезан стандард, чије непоштовање води до судских тужби. Према подацима UsableNet (2024), у САД је поднесено преко 12 000 тужби о неприступачности веб-сајтова.

Верзије WCAG: поређење

Правне посљедице неусаглашености

Непоштовање WCAG носи озбиљне ризике. Године 2025, European Accessibility Act (EAA) је ступио на снагу, захтијевајући WCAG 2.1 AA за све јавне веб-сајтове и мобилне апликације у ЕУ. Казне достижу 5% годишњег промета компаније. Просјечан износ поравнања тужби у САД је 25.000–50.000 америчких долара. Аудит accessibility треба обављати у свакој фази развоја, а не само пред објављивање.

Четири принципа WCAG: POUR

POUR — акроним четири принципа WCAG: Perceivable (опажајност), Operable (управљивост), Understandable (разумљивост), Robust (стабилност). Сваки принцип садржи смјернице, а смјернице — тестирајуће критеријуме успјеха. Укупно WCAG 2.2 садржи 13 смјерница и 86 критеријума успјеха. Сваки критеријум има ниво A, AA или AAA.

Perceivable — Опажајност

Принцип Perceivable захтијева да садржај буде представљен у форми коју корисник може опазити. Смјернице: 1.1 Text Alternatives (текстуалне алтернативе), 1.2 Time-based Media (титлови, транскрипти), 1.3 Adaptable (садржај без губитка при промјени формата), 1.4 Distinguishable (контраст 4.5:1, боја, звук). Кључни критеријум 1.4.3 Contrast Minimum (AA) — најчешће кршен: 86% страница га не испуњава према подацима WebAIM.

Operable — Управљивост

Принцип Operable захтијева управљивост интерфејса. Смјернице: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. Критеријум 2.1.1 Keyboard (A) — један од најкритичнијих: све функције морају бити доступне са тастатуре без миша. Модални прозори који се затварају само кликом, падајући менији без навигације тастатуром — типична кршења.

Understandable — Разумљивост

Принцип Understandable захтијева разумљивост садржаја и интерфејса. Смјернице: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. Посебно је важан критеријум 3.3.4 Error Prevention за финансијске и медицинске апликације: спречавање озбиљних посљедица грешака уноса. Критеријум 3.2.6 Consistent Help (нов у WCAG 2.2) захтијева да дугмад за помоћ буду на истим мјестима.

Robust — Стабилност

Принцип Robust захтијева компатибилност са асистивним технологијама. Смјерница 4.1 Compatible са кључним критеријумом 4.1.2 Name, Role, Value (A): свака UI компонента мора имати програмски одредиво име, улогу и стање. ARIA атрибути (role, aria-label, aria-expanded) — основни алат. Без њих читачи екрана не могу одредити да ли је елемент дугме, линк или картица.

Табела принципа WCAG

Нивои усаглашености WCAG: A, AA, AAA

WCAG дефинише три нивоа: A (минимални), AA (стандардни) и AAA (максимални). Ниво A — обавезни минимум: без њега садржај је недоступан за неке категорије корисника. AA уклања главне баријере приступачности. AAA — највиши стандард, али не може бити постигнут за сав садржај (на примјер, неки знаковни језици или аудио транскрипти нису увијек изводљиви).

Ниво A (30 критеријума): text alternatives, управљивост тастатуром, довољно времена, одсуство треперења изнад 3 Hz. Ниво AA (+24 критеријума): contrast ratio 4.5:1, титлови за видео, resize текста до 200%, јасан фокус тастатуре. Ниво AAA (+32 критеријума): contrast ratio 7:1, знаковни језик, искључивање анимације (2.3.3), аудио транскрипт. За државне сајтове довољан је AA.

Процес аудита WCAG

Аудит accessibility према WCAG укључује: аутоматско тестирање (axe DevTools, WAVE, Lighthouse — проналази 30–40% грешака), ручно тестирање тастатуре и читача екрана (VoiceOver, TalkBack, NVDA), стручни аудит за сложене критеријуме и тестирање са особама са инвалидитетом. Извјештај аудита треба да садржи ниво усаглашености и листу неусаглашености за сваки критеријум.

Шта је ново у WCAG 2.2

WCAG 2.2 је додао 9 нових критеријума. Кључни: 2.4.11 Focus Appearance (AA) — индикатор фокуса >= 2px са контрастом 3:1, 2.5.8 Target Size Minimum (AA) — тактилна мета минимално 24x24 пиксела, 3.3.7 Accessible Authentication (AA) — аутентификација без CAPTCHA. Критеријум 2.3.3 Animation from Interactions (AAA) — искључива анимација или не више од 5 секунди.

Focus Appearance — најважнија промјена. Раније је outline: none без замјене било кршење, али није било јасних захтјева. WCAG 2.2 је утврдио: дебљина >= 2px, контраст 3:1 са позадином, површина индикатора најмање колика и површина елемента. За прилагођена дугмад са border-radius користите box-shadow умјесто outline.

Focus Appearance у 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; }
}

Стилизовање :focus-visible обезбјеђује усаглашеност са критеријумом Focus Appearance. Алтернатива преко box-shadow је погодна за елементе са border-radius. Тамна тема и High Contrast прилагођавају боје фокуса.

Accessible Authentication

Критеријум 3.3.7 Accessible Authentication (AA) — једна од најдискутованијих новина. CAPTCHA са препознавањем објеката, слагалице, превлачење клизача — сада је кршење ако нема алтернативе. Дозвољени начини: OTP путем емаил/SMS, биометрија (Face ID, Touch ID), QR кодови, Magic link. Ово олакшава живот не само особама са когнитивним сметњама, већ и свим корисницима.

WCAG за мобилне апликације

WCAG се примјењује на изворне iOS и Android апликације. Четири POUR принципа у потпуности покривају мобилне интерфејсе. Специфични критеријуми: 2.5.1 Pointer Gestures (гестови без високе прецизности), 2.5.2 Pointer Cancellation (отказивање случајног додира), 2.5.3 Label in Name (текст дугмета се поклапа са accessibility ознаком). За iOS се користи UIKit/UIAccessibility, за Android — AccessibilityService и ContentDescription.

Најчешћа кршења у мобилним апликацијама: 1.1.1 Non-text Content — иконе без contentDescription, 2.4.3 Focus Order — погрешан редослијед навигације, 2.5.8 Target Size — дугмад мања од 24x24dp, 1.4.3 Contrast — текст на позадинским сликама. iOS пружа Accessibility Inspector у Xcode-у, Android — Accessibility Scanner за аутоматски аудит.

WCAG‑усаглашен SwiftUI код

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("Кликните за акцију")
        .accessibilityAddTraits(.isButton)
    }
}

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

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("Емаил")
                TextField("Унесите емаил", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("Поље за унос емаила")
                    .accessibilityHint("Унесите емаил адресу")
            }
            AccessibleButton(
                action: { },
                title: "Пошаљите",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

SwiftUI компоненте са accessibilityLabel, accessibilityHint и minWidth/minHeight >= 48pt обезбјеђују усаглашеност са WCAG 2.5.8 (Target Size) и 2.5.3 (Label in Name). Користите Xcode Accessibility Inspector за провјеру VoiceOver фокуса, редослиједа навигације и величина touch targets. Слични захтјеви се примјењују на Jetpack Compose кроз Modifier.semantics.