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 ไม่ใช่กฎหมาย แต่หลายประเทศอ้างอิงในกฎหมายของตน

GOST R 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 การตรวจสอบการเข้าถึงควรดำเนินการในทุกขั้นตอนของการพัฒนา ไม่ใช่เฉพาะก่อนเผยแพร่

สี่หลักการของ 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 เกณฑ์): ข้อความทดแทน การใช้งานแป้นพิมพ์ เวลาที่เพียงพอ ไม่มีการกะพริบเหนือ 3 Hz ระดับ AA (+24 เกณฑ์): อัตราส่วนความคมชัด 4.5:1 คำบรรยายสำหรับวิดีโอ ปรับขนาดข้อความได้ถึง 200% การโฟกัสแป้นพิมพ์ที่ชัดเจน ระดับ AAA (+32 เกณฑ์): อัตราส่วนความคมชัด 7:1 ภาษามือ การปิดแอนิเมชัน (2.3.3) การถอดเสียง สำหรับเว็บไซต์รัฐบาล AA ก็เพียงพอ

กระบวนการตรวจสอบ WCAG

การตรวจสอบการเข้าถึง 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 (ข้อความปุ่มตรงกับป้ายกำกับการเข้าถึง) iOS ใช้ UIKit/UIAccessility, 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 สำหรับการตรวจสอบอัตโนมัติ

โค้ด SwiftUI ที่สอดคล้องกับ 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("คลิกเพื่อดำเนินการ")
        .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 ลำดับการนำทาง และขนาดของเป้าสัมผัส ข้อกำหนดที่คล้ายกันใช้กับ Jetpack Compose ผ่าน Modifier.semantics