WCAG — ano ito, Web Content Accessibility Guidelines at mga antas AA

Ano ang WCAG?

WCAG (Web Content Accessibility Guidelines) — isang hanay ng mga rekomendasyon para sa pagtiyak ng accessibility ng web content para sa mga taong may kapansanan. Ang pamantayan ay binuo ng W3C Web Accessibility Initiative (WAI) mula noong 1999. Sinasaklaw ng WCAG ang mga bulag at may mahinang paningin, bingi at may mahinang pandinig, mga taong may limitasyon sa paggalaw, pagsasalita at pag-iisip, pati na rin ang mga nakatatandang gumagamit na may mga pagbabagong nauugnay sa edad.

Ang unang bersyon na WCAG 1.0 ay inilabas noong 1999 at naglalaman ng 14 na gabay na prinsipyo. Ang WCAG 2.0 (2008) ay naging teknolohiyang neutral, naaangkop sa HTML, PDF, multimedia at mobile application. Ang WCAG 2.1 (2018) ay nagdagdag ng mga pamantayan para sa mobile device at touch input. Ang WCAG 2.2 (2023) — kasalukuyang bersyon na may mga bagong pamantayan para sa animation at focus. Ang WCAG ay hindi batas, ngunit maraming bansa ang tumutukoy dito sa kanilang batas.

GOST R 52872-2019 sa Russia, European Accessibility Act sa EU at Section 508 sa US — lahat ay nangangailangan ng pagsunod sa WCAG AA. Para sa mga corporate at government site, ang WCAG AA ay isang mandatoryong pamantayan, ang hindi pagsunod ay humahantong sa mga demanda. Ayon sa datos ng UsableNet (2024), sa US ay may higit sa 12,000 kaso na isinampa tungkol sa hindi accessibility ng mga website.

Mga bersyon ng WCAG: paghahambing

Mga legal na kahihinatnan ng hindi pagsunod

Ang hindi pagsunod sa WCAG ay may malubhang panganib. Noong 2025, ang European Accessibility Act (EAA) ay nagkabisa, na nangangailangan ng WCAG 2.1 AA para sa lahat ng pampublikong website at mobile application sa EU. Ang mga multa ay umaabot sa 5% ng taunang kita ng kumpanya. Ang average na halaga ng pag-areglo ng mga demanda sa US ay $25,000–$50,000. Ang audit ng accessibility ay dapat gawin sa bawat yugto ng pag-develop, hindi lamang bago ang paglabas.

Apat na prinsipyo ng WCAG: POUR

POUR — akronim ng apat na prinsipyo ng WCAG: Perceivable (napapansin), Operable (napapatakbo), Understandable (nauunawaan), Robust (matatag). Ang bawat prinsipyo ay naglalaman ng mga gabay, at ang mga gabay ay naglalaman ng mga nasusuring pamantayan ng tagumpay. Sa kabuuan, ang WCAG 2.2 ay naglalaman ng 13 gabay at 86 na pamantayan ng tagumpay. Bawat pamantayan ay may antas A, AA o AAA.

Perceivable — Napapansin

Ang prinsipyong Perceivable ay nangangailangan na ang nilalaman ay ipakita sa anyo na napapansin ng gumagamit. Mga gabay: 1.1 Text Alternatives (mga alternatibong teksto), 1.2 Time-based Media (mga subtitle, transkripsyon), 1.3 Adaptable (nilalaman nang walang pagkawala sa pagbabago ng format), 1.4 Distinguishable (contrast 4.5:1, kulay, tunog). Ang pangunahing pamantayan 1.4.3 Contrast Minimum (AA) — ang pinakamadalas nilalabag: 86% ng mga pahina ay hindi tumutupad dito ayon sa WebAIM.

Operable — Napapatakbo

Ang prinsipyong Operable ay nangangailangan ng pagpapatakbo ng interface. Mga gabay: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. Pamantayan 2.1.1 Keyboard (A) — isa sa pinakamahalaga: lahat ng function ay dapat ma-access mula sa keyboard nang walang mouse. Mga modal window na nagsasara lamang sa pag-click, mga dropdown menu na walang keyboard navigation — karaniwang paglabag.

Understandable — Nauunawaan

Ang prinsipyong Understandable ay nangangailangan ng pagkaunawa ng nilalaman at interface. Mga gabay: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. Lalong mahalaga ang pamantayan 3.3.4 Error Prevention para sa mga financial at medical application: pagpigil sa malubhang kahihinatnan ng mga error sa input. Pamantayan 3.2.6 Consistent Help (bago sa WCAG 2.2) ay nangangailangan na ang mga pindutan ng tulong ay nasa parehong lugar.

Robust — Matatag

Ang prinsipyong Robust ay nangangailangan ng pagiging tugma sa mga teknolohiyang pantulong. Gabay 4.1 Compatible na may pangunahing pamantayan 4.1.2 Name, Role, Value (A): bawat UI component ay dapat may programmatically determinable na pangalan, papel at estado. Ang mga ARIA attribute (role, aria-label, aria-expanded) — pangunahing kasangkapan. Kung wala ang mga ito, hindi matutukoy ng screen reader kung ang elemento ay pindutan, link o tab.

Talahanayan ng mga prinsipyo ng WCAG

Mga antas ng pagsunod sa WCAG: A, AA, AAA

WCAG ay tumutukoy sa tatlong antas: A (minimal), AA (pamantayan) at AAA (maksimum). Antas A — mandatoryong minimum: kung wala ito, ang nilalaman ay hindi accessible para sa ilang kategorya ng mga gumagamit. AA ay nag-aalis ng mga pangunahing hadlang sa accessibility. AAA — pinakamataas na pamantayan, ngunit hindi maaaring makamit para sa lahat ng nilalaman (halimbawa, ang ilang sign language o audio transcription ay hindi laging posible).

Antas A (30 pamantayan): text alternatives, pagpapatakbo ng keyboard, sapat na oras, walang pagkurap sa itaas ng 3 Hz. Antas AA (+24 pamantayan): contrast ratio 4.5:1, subtitle para sa video, resize ng teksto hanggang 200%, malinaw na keyboard focus. Antas AAA (+32 pamantayan): contrast ratio 7:1, sign language, pag-disable ng animation (2.3.3), audio transcription. Para sa mga government site, sapat na ang AA.

Proseso ng audit ng WCAG

Ang audit ng accessibility ayon sa WCAG ay kinabibilangan ng: awtomatikong pagsubok (axe DevTools, WAVE, Lighthouse — nakakahanap ng 30–40% ng mga error), manu-manong pagsubok ng keyboard at screen reader (VoiceOver, TalkBack, NVDA), expert audit para sa mga kumplikadong pamantayan at pagsubok sa mga taong may kapansanan. Ang ulat ng audit ay dapat maglaman ng antas ng pagsunod at listahan ng mga hindi pagsunod para sa bawat pamantayan.

Ano ang bago sa WCAG 2.2

WCAG 2.2 ay nagdagdag ng 9 na bagong pamantayan. Ang pangunahing: 2.4.11 Focus Appearance (AA) — indicator ng focus >= 2px na may contrast 3:1, 2.5.8 Target Size Minimum (AA) — touch target na minimum 24x24 pixels, 3.3.7 Accessible Authentication (AA) — authentication na walang CAPTCHA. Pamantayan 2.3.3 Animation from Interactions (AAA) — maaaring i-off ang animation o hindi hihigit sa 5 segundo.

Focus Appearance — pinakamahalagang pagbabago. Dati, ang outline: none nang walang kapalit ay isang paglabag, ngunit walang malinaw na kinakailangan. Itinakda ng WCAG 2.2: kapal >= 2px, contrast 3:1 sa background, lawak ng indicator kahit kasinglaki ng lawak ng elemento. Para sa mga custom na pindutan na may border-radius, gumamit ng box-shadow sa halip na outline.

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

Ang pag-style ng :focus-visible ay tinitiyak ang pagsunod sa pamantayan ng Focus Appearance. Ang alternatibo sa pamamagitan ng box-shadow ay angkop para sa mga elementong may border-radius. Ang dark theme at High Contrast ay nag-aadjust ng mga kulay ng focus.

Accessible Authentication

Pamantayan 3.3.7 Accessible Authentication (AA) — isa sa pinakapinag-uusapang pagbabago. CAPTCHA na may pagkilala ng bagay, palaisipan, pag-drag ng slider — ngayon ay paglabag kung walang alternatibo. Mga pinapayagang paraan: OTP sa pamamagitan ng email/SMS, biometrics (Face ID, Touch ID), QR code, Magic link. Ito ay nagpapadali ng buhay hindi lamang para sa mga taong may cognitive impairment, kundi para sa lahat ng gumagamit.

WCAG para sa mga mobile application

WCAG ay naaangkop sa native na iOS at Android application. Apat na POUR na prinsipyo ay ganap na sumasaklaw sa mga mobile interface. Mga tiyak na pamantayan: 2.5.1 Pointer Gestures (mga kilos nang walang mataas na katumpakan), 2.5.2 Pointer Cancellation (pagkansela ng aksidenteng pagpindot), 2.5.3 Label in Name (teksto ng pindutan ay tugma sa accessibility label). Para sa iOS ginagamit ang UIKit/UIAccessibility, para sa Android — AccessibilityService at ContentDescription.

Ang pinakakaraniwang paglabag sa mobile application: 1.1.1 Non-text Content — icon na walang contentDescription, 2.4.3 Focus Order — maling pagkakasunod-sunod ng navigation, 2.5.8 Target Size — pindutang mas maliit sa 24x24dp, 1.4.3 Contrast — teksto sa mga larawan sa background. iOS ay nagbibigay ng Accessibility Inspector sa Xcode, Android — Accessibility Scanner para sa awtomatikong audit.

SwiftUI code na sumusunod sa 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("Mag-click para sa pagkilos")
        .accessibilityAddTraits(.isButton)
    }
}

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

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("Email")
                TextField("Ilagay ang email", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("Field ng pag-input ng email")
                    .accessibilityHint("Ilagay ang email address")
            }
            AccessibleButton(
                action: { },
                title: "Ipadala",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

Ang SwiftUI component na may accessibilityLabel, accessibilityHint at minWidth/minHeight >= 48pt ay tinitiyak ang pagsunod sa WCAG 2.5.8 (Target Size) at 2.5.3 (Label in Name). Gamitin ang Xcode Accessibility Inspector para suriin ang VoiceOver focus, pagkakasunod-sunod ng navigation at laki ng touch targets. Ang mga katulad na kinakailangan ay naaangkop sa Jetpack Compose sa pamamagitan ng Modifier.semantics.