WCAG — định nghĩa, Web Content Accessibility Guidelines và cấp AA

WCAG là gì?

WCAG (Web Content Accessibility Guidelines) là một tập hợp các khuyến nghị nhằm đảm bảo khả năng tiếp cận nội dung web cho người khuyết tật. Tiêu chuẩn này đã được W3C Web Accessibility Initiative (WAI) phát triển từ năm 1999. WCAG bao gồm người mù và khiếm thị, người điếc và khiếm thính, người có hạn chế vận động, rối loạn ngôn ngữ và nhận thức, cũng như người dùng cao tuổi với những thay đổi liên quan đến tuổi tác.

Phiên bản đầu tiên WCAG 1.0 được phát hành năm 1999 và chứa 14 nguyên tắc hướng dẫn. WCAG 2.0 (2008) trở nên trung lập về công nghệ, áp dụng cho HTML, PDF, đa phương tiện và ứng dụng di động. WCAG 2.1 (2018) bổ sung tiêu chí cho thiết bị di động và đầu vào cảm ứng. WCAG 2.2 (2023) là phiên bản hiện tại với các tiêu chí mới về hoạt ảnh và tiêu điểm. WCAG không phải là luật, nhưng nhiều quốc gia viện dẫn nó trong pháp luật của họ.

GOST R 52872-2019 ở Nga, European Accessibility Act ở EU và Section 508 ở Mỹ — tất cả đều yêu cầu tuân thủ WCAG AA. Đối với trang web doanh nghiệp và chính phủ, WCAG AA là tiêu chuẩn bắt buộc, việc không tuân thủ dẫn đến kiện tụng. Theo UsableNet (2024), hơn 12.000 vụ kiện về trợ năng web đã được nộp tại Mỹ.

So sánh các phiên bản WCAG

Hậu quả pháp lý của việc không tuân thủ

Việc không tuân thủ WCAG mang lại rủi ro nghiêm trọng. Năm 2025, European Accessibility Act (EAA) có hiệu lực, yêu cầu WCAG 2.1 AA cho tất cả trang web công cộng và ứng dụng di động trong EU. Mức phạt có thể lên tới 5% doanh thu hàng năm của công ty. Số tiền giải quyết kiện tụng trung bình ở Mỹ là $25.000–$50.000. Kiểm toán trợ năng nên được thực hiện ở mọi giai đoạn phát triển, không chỉ trước khi phát hành.

Bốn nguyên tắc của WCAG: POUR

POUR là từ viết tắt của bốn nguyên tắc WCAG: Perceivable (có thể nhận biết), Operable (có thể thao tác), Understandable (có thể hiểu), Robust (mạnh mẽ). Mỗi nguyên tắc chứa các hướng dẫn và các hướng dẫn chứa các tiêu chí thành công có thể kiểm tra. WCAG 2.2 có 13 hướng dẫn và 86 tiêu chí thành công. Mỗi tiêu chí có cấp độ A, AA hoặc AAA.

Perceivable — Có thể nhận biết

Nguyên tắc Perceivable yêu cầu nội dung được trình bày dưới dạng mà người dùng có thể nhận biết. Hướng dẫn: 1.1 Text Alternatives (phương án văn bản), 1.2 Time-based Media (phụ đề, bản ghi), 1.3 Adaptable (nội dung không mất mát khi thay đổi định dạng), 1.4 Distinguishable (tương phản 4.5:1, màu sắc, âm thanh). Tiêu chí chính 1.4.3 Contrast Minimum (AA) là tiêu chí bị vi phạm nhiều nhất: 86% trang không đáp ứng theo WebAIM.

Operable — Có thể thao tác

Nguyên tắc Operable yêu cầu khả năng thao tác giao diện. Hướng dẫn: 2.1 Keyboard Accessible, 2.2 Enough Time, 2.3 Seizures, 2.4 Navigable, 2.5 Input Modalities. Tiêu chí 2.1.1 Keyboard (A) là một trong những tiêu chí quan trọng nhất: tất cả chức năng phải có thể truy cập qua bàn phím mà không cần chuột. Cửa sổ modal chỉ đóng bằng cách nhấp chuột, menu thả xuống không có điều hướng bàn phím — những vi phạm điển hình.

Understandable — Có thể hiểu

Nguyên tắc Understandable yêu cầu tính dễ hiểu của nội dung và giao diện. Hướng dẫn: 3.1 Readable, 3.2 Predictable, 3.3 Input Assistance. Tiêu chí 3.3.4 Error Prevention đặc biệt quan trọng đối với ứng dụng tài chính và y tế: ngăn ngừa hậu quả nghiêm trọng của lỗi nhập liệu. Tiêu chí 3.2.6 Consistent Help (mới trong WCAG 2.2) yêu cầu các nút trợ giúp phải ở cùng một vị trí.

Robust — Mạnh mẽ

Nguyên tắc Robust yêu cầu tương thích với công nghệ hỗ trợ. Hướng dẫn 4.1 Compatible với tiêu chí chính 4.1.2 Name, Role, Value (A): mỗi thành phần giao diện phải có tên, vai trò và trạng thái có thể xác định bằng lập trình. Thuộc tính ARIA (role, aria-label, aria-expanded) là công cụ chính. Nếu không có chúng, trình đọc màn hình không thể xác định một phần tử là nút bấm, liên kết hay tab.

Bảng nguyên tắc WCAG

Cấp độ tuân thủ WCAG: A, AA, AAA

WCAG xác định ba cấp độ: A (tối thiểu), AA (tiêu chuẩn) và AAA (tối đa). Cấp độ A là mức tối thiểu bắt buộc: nếu không có, nội dung không thể truy cập được đối với một số nhóm người dùng. AA loại bỏ các rào cản trợ năng chính. AAA là tiêu chuẩn cao nhất, nhưng không thể đạt được cho tất cả nội dung (ví dụ: một số ngôn ngữ ký hiệu hoặc bản ghi âm thanh không phải lúc nào cũng khả thi).

Cấp độ A (30 tiêu chí): phương án văn bản, khả năng thao tác bằng bàn phím, thời gian đủ, không nhấp nháy trên 3 Hz. Cấp độ AA (+24 tiêu chí): tỷ lệ tương phản 4.5:1, phụ đề cho video, thay đổi kích thước văn bản lên 200%, tiêu điểm bàn phím rõ ràng. Cấp độ AAA (+32 tiêu chí): tỷ lệ tương phản 7:1, ngôn ngữ ký hiệu, tắt hoạt ảnh (2.3.3), bản ghi âm thanh. Đối với trang web chính phủ, AA là đủ.

Quy trình kiểm toán WCAG

Kiểm toán trợ năng WCAG bao gồm: kiểm thử tự động (axe DevTools, WAVE, Lighthouse — phát hiện 30–40% lỗi), kiểm thử thủ công bằng bàn phím và trình đọc màn hình (VoiceOver, TalkBack, NVDA), kiểm toán chuyên gia cho các tiêu chí phức tạp và kiểm thử người dùng với người khuyết tật. Báo cáo kiểm toán phải chứa cấp độ tuân thủ và danh sách không tuân thủ cho từng tiêu chí.

Có gì mới trong WCAG 2.2

WCAG 2.2 đã thêm 9 tiêu chí mới. Chính: 2.4.11 Focus Appearance (AA) — chỉ báo tiêu điểm >= 2px với độ tương phản 3:1, 2.5.8 Target Size Minimum (AA) — mục tiêu cảm ứng tối thiểu 24x24 pixel, 3.3.7 Accessible Authentication (AA) — xác thực không cần CAPTCHA. Tiêu chí 2.3.3 Animation from Interactions (AAA) — hoạt ảnh có thể tắt hoặc không quá 5 giây.

Focus Appearance là thay đổi quan trọng nhất. Trước đây, outline: none không có thay thế là vi phạm, nhưng không có yêu cầu rõ ràng. WCAG 2.2 quy định: độ dày >= 2px, tương phản 3:1 với nền, diện tích chỉ báo ít nhất bằng diện tích phần tử. Đối với nút tùy chỉnh có border-radius, sử dụng box-shadow thay vì outline.

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

Tạo kiểu :focus-visible đảm bảo tuân thủ tiêu chí Focus Appearance. Phương án thay thế qua box-shadow phù hợp cho phần tử có border-radius. Chủ đề tối và High Contrast điều chỉnh màu tiêu điểm.

Accessible Authentication

Tiêu chí 3.3.7 Accessible Authentication (AA) là một trong những cải tiến được thảo luận nhiều nhất. CAPTCHA nhận dạng đối tượng, câu đố, kéo thanh trượt — hiện là vi phạm nếu không có phương án thay thế. Phương pháp chấp nhận được: OTP qua email/SMS, sinh trắc học (Face ID, Touch ID), mã QR, Magic link. Điều này giúp cuộc sống dễ dàng hơn không chỉ cho người khuyết tật nhận thức mà còn cho tất cả người dùng.

WCAG cho ứng dụng di động

WCAG áp dụng cho ứng dụng iOS và Android gốc. Bốn nguyên tắc POUR bao phủ hoàn toàn giao diện di động. Tiêu chí cụ thể: 2.5.1 Pointer Gestures (cử chỉ không cần độ chính xác cao), 2.5.2 Pointer Cancellation (hủy chạm vô tình), 2.5.3 Label in Name (văn bản nút khớp với nhãn trợ năng). iOS sử dụng UIKit/UIAccessibility, Android sử dụng AccessibilityService và ContentDescription.

Thường bị vi phạm nhất trong ứng dụng di động: 1.1.1 Non-text Content — biểu tượng không có contentDescription, 2.4.3 Focus Order — thứ tự điều hướng sai, 2.5.8 Target Size — nút nhỏ hơn 24x24dp, 1.4.3 Contrast — văn bản trên hình nền. iOS cung cấp Accessibility Inspector trong Xcode, Android cung cấp Accessibility Scanner để kiểm toán tự động.

Mã SwiftUI tuân thủ 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("Nhấp để thực hiện")
        .accessibilityAddTraits(.isButton)
    }
}

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

    var body: some View {
        VStack(spacing: 16) {
            VStack(alignment: .leading) {
                Text("Email")
                TextField("Nhập email", text: $email)
                    .textContentType(.emailAddress)
                    .keyboardType(.emailAddress)
                    .autocapitalization(.none)
                    .accessibilityLabel("Trường nhập email")
                    .accessibilityHint("Nhập địa chỉ email")
            }
            AccessibleButton(
                action: { },
                title: "Gửi",
                icon: "paperplane.fill"
            )
        }
        .padding()
    }
}

Các thành phần SwiftUI với accessibilityLabel, accessibilityHint và minWidth/minHeight >= 48pt đảm bảo tuân thủ WCAG 2.5.8 (Target Size) và 2.5.3 (Label in Name). Sử dụng Xcode Accessibility Inspector để kiểm tra tiêu điểm VoiceOver, thứ tự điều hướng và kích thước mục tiêu cảm ứng. Yêu cầu tương tự áp dụng cho Jetpack Compose qua Modifier.semantics.