การเข้าถึงเว็บไซต์: คู่มือ WCAG 2.2 สำหรับนำไปใช้จริง
หน้าแรก วิธีอ่าน WCAG 2.2 สำหรับเว็บไซต์ของคุณ แก้ปัญหาที่พบบ่อย ทำแบบทดสอบด้วยมือ 30 นาที และเข้าใจจุดที่ accessibility กับ usability ทับซ้อนกัน
คำถามที่พบบ่อย
เว็บไซต์ที่เป็นไปตาม WCAG หมายถึงอะไร?
หมายถึงเว็บไซต์ผ่านเกณฑ์ความสำเร็จของแนวทางการเข้าถึงเนื้อหาเว็บในระดับที่เลือก โดยทั่วไปคือ WCAG 2.1 หรือ 2.2 ระดับ AA ระดับ AA รวมเกณฑ์ระดับ A และ AA กฎหมายและข้อกำหนดจัดซื้อส่วนใหญ่ที่อ้าง WCAG ต้องการระดับ AA
ควรอ่านแนวทาง WCAG สำหรับเว็บไซต์อย่างไร?
เริ่มจากเอกสารอ้างอิงฉบับย่อ How to Meet WCAG ของ W3C กรองระดับ A และ AA แล้วอ่านหน้า Understanding ของแต่ละเกณฑ์เพื่อดูเจตนาและตัวอย่าง จากนั้นทดสอบเทมเพลตหลัก เช่น หน้าแรก หน้าเนื้อหา ฟอร์ม และชำระเงิน แทนการทดสอบทุกหน้าแยกกัน
แถบ accessibility หรือปลั๊กอินทำให้เว็บผ่านมาตรฐานได้ไหม?
ไม่มีเครื่องมือใดทำให้เว็บผ่านมาตรฐานได้เอง แถบ overlay ไม่ได้แก้โค้ดพื้นฐาน และผู้ใช้ที่มีความพิการกับผู้เชี่ยวชาญจำนวนมากบอกว่ารบกวนการใช้งาน แก้ HTML คอนทราสต์ label และการใช้คีย์บอร์ดที่ต้นทาง
Usability กับ accessibility ต่างกันอย่างไร?
Accessibility หมายถึงผู้พิการรับรู้ เข้าใจ นำทาง และโต้ตอบกับเว็บได้ ส่วน usability คือเว็บใช้ง่ายและมีประสิทธิภาพสำหรับทุกคน ทั้งสองเรื่องทับซ้อนกัน ป้ายกำกับชัด คอนทราสต์ดี และเมนูคาดเดาได้ช่วยผู้เข้าชมทุกคน
เครื่องมือตรวจอัตโนมัติพบปัญหา accessibility ได้ทั้งหมดไหม?
ไม่ เครื่องมืออย่าง WAVE, axe และ Lighthouse พบปัญหาเช่นไม่มี alt text คอนทราสต์ต่ำและไม่มี label แต่หลายเกณฑ์ เช่น alt text มีความหมายไหม หรือลำดับโฟกัสสมเหตุผลหรือไม่ ต้องให้คนตรวจ
เว็บไซต์ที่สอดคล้องกับ WCAG ผ่านแนวทางการเข้าถึงเนื้อหาเว็บในระดับที่เลือก สำหรับธุรกิจเกือบทั้งหมดหมายถึง WCAG 2.2 ระดับ AA เว็บไซต์ส่วนใหญ่พลาดปัญหาชุดเดิม: สีตัดกันต่ำ ไม่มี alt text ให้ภาพ ช่องฟอร์มไม่มี label ลิงก์หรือปุ่มว่าง และส่วนที่ใช้คีย์บอร์ดไปไม่ถึง แก้ปัญหาเหล่านี้แล้วทดสอบด้วยคีย์บอร์ดและ screen reader จะครอบคลุมปัญหาจำนวนมากที่ผู้ใช้จริงพบ
คู่มือนี้อธิบายวิธีอ่าน WCAG โดยไม่หลงทาง วิธีแก้สำคัญ และแบบทดสอบ 30 นาทีที่ทำเองได้
WCAG จัดโครงสร้างอย่างไร
W3C เป็นผู้เผยแพร่ WCAG โดยจัดเป็นชั้น ๆ:
หลักการสี่ข้อ เรียกว่า POUR: เนื้อหาต้อง P erceivable (รับรู้ได้), O perable (ใช้งานได้), U nderstandable (เข้าใจได้) และ R obust (รองรับได้หลากหลาย)แนวทาง อยู่ใต้แต่ละหลักการ เช่น “ข้อความทดแทน” หรือ “ใช้คีย์บอร์ดได้”เกณฑ์ความสำเร็จ อยู่ใต้แต่ละแนวทาง เป็นกฎที่ทดสอบได้ มีเลข เช่น 1.4.3 Contrast และระดับ A, AA หรือ AAAระดับ A คือขั้นต่ำ ระดับ AA เป็นเป้าหมายทั่วไปของข้อกำหนดกฎหมายและจัดซื้อ ระดับ AAA เข้มงวดกว่าและมักไม่บังคับกับเว็บทั้งเว็บ
WCAG 2.2 เป็นคำแนะนำ W3C ในเดือนตุลาคม 2023 เพิ่มเกณฑ์เรื่องขนาดเป้าหมายขั้นต่ำ ไม่ให้โฟกัสถูกบัง และการยืนยันตัวตนที่เข้าถึงได้ พร้อมถอด 4.1.1 Parsing ที่ล้าสมัยออก
วิธีอ่าน WCAG สำหรับเว็บไซต์ของคุณ
ข้อกำหนดเขียนเหมือนมาตรฐานเพราะเป็นมาตรฐาน วิธีทำตามที่ใช้ได้จริง:
เปิดเอกสาร How to Meet WCAG (Quick Reference) ของ W3C กรองให้เหลือ ระดับ A และ AA อ่านหน้า Understanding ที่เชื่อมกับแต่ละเกณฑ์ เพื่อดูเจตนาด้วยภาษาง่ายและตัวอย่างผ่านหรือไม่ผ่าน แทนที่จะทดสอบทุกหน้า ให้ทดสอบ เทมเพลต เช่น หน้าแรก หน้าเนื้อหา บทความ ฟอร์ม และหน้าสินค้าหรือชำระเงิน การแก้เทมเพลตช่วยทุกหน้าที่สร้างจากมัน บันทึกปัญหาพร้อมเลขเกณฑ์ หน้าเว็บ และแนวทางแก้ วิธีแก้ที่ครอบคลุมปัญหาจริงส่วนใหญ่
1. คอนทราสต์สี (1.4.3 และ 1.4.11)
ข้อความปกติ: อัตราส่วนอย่างน้อย 4.5:1 เทียบพื้นหลัง ข้อความขนาดใหญ่ (ประมาณ 24px แบบปกติ หรือ 18.66px แบบตัวหนาขึ้นไป): อย่างน้อย 3:1 ส่วนควบคุมและกราฟิกที่มีความหมาย (ขอบปุ่ม เส้น input ไอคอนสื่อข้อมูล): อย่างน้อย 3:1 ปัญหาทั่วไปคือ placeholder สีเทาอ่อนและตัวอักษรขาวบนสีแบรนด์อ่อน ตรวจด้วย WebAIM contrast checker หรือ dev tools ของเบราว์เซอร์
2. ข้อความทดแทนภาพ (1.1.1)
ภาพให้ข้อมูลต้องมี alt text บอกสิ่งสำคัญ เช่น alt="ช่างกำลังเปลี่ยนไส้กรองเตา" ภาพตกแต่งใช้ alt ว่าง (alt="") เพื่อให้ screen reader ข้าม ภาพที่เป็นข้อความ เช่น ภาพหน้าจอใบปลิวหรือเมนู JPG ต้องมีข้อความเดียวกันเป็นตัวอักษรจริง ภาพลิงก์ เช่น โลโก้กลับหน้าแรก ให้ alt บอกปลายทาง: alt="หน้าแรก Acme Plumbing" 3. ป้ายกำกับและ error ในฟอร์ม (1.3.1, 3.3.1, 3.3.2)
ทุกช่องต้องมี label ที่มองเห็นและเชื่อมกับช่อง Placeholder ไม่ใช่ label เพราะหายเมื่อเริ่มพิมพ์ ข้อความ error ต้องบอกว่าผิดอะไรและแก้อย่างไร (“กรอกเบอร์โทรพร้อมรหัสพื้นที่”) เป็นข้อความ ไม่ใช่แค่ขอบแดง ทำเครื่องหมายช่องบังคับด้วยข้อความหรือสัญลักษณ์ที่เข้าถึงได้ ไม่ใช่สีอย่างเดียว 4. ใช้คีย์บอร์ดได้ (2.1.1, 2.4.3, 2.4.7)
ลิงก์ ปุ่ม เมนู และช่องฟอร์มทุกจุดต้องทำงานด้วย Tab, Shift+Tab, Enter และ Space ลำดับโฟกัสตรงกับลำดับที่เห็น ต้องเห็นตำแหน่งโฟกัส การเอา outline ออกโดยไม่ใส่สิ่งทดแทนเป็นปัญหาที่พบบ่อย เมนู dropdown และ modal เปิด ใช้ และปิดด้วยคีย์บอร์ดได้ และ modal ควรเก็บโฟกัสไว้ข้างในจนปิด 5. ลิงก์และปุ่มต้องมีชื่อ (2.4.4, 4.1.2)
ปุ่มมีแต่ไอคอน เช่น เมนู hamburger แว่นขยาย หรือโซเชียล ต้องมีชื่อผ่านข้อความที่เห็น aria-label หรือข้อความซ่อน หลีกเลี่ยงลิงก์ “คลิกที่นี่” และ “อ่านต่อ” ซ้ำทั้งหน้า ให้ข้อความบอกปลายทาง หรือกำหนดชื่อเข้าถึงได้ไม่ซ้ำ 6. โครงสร้างและหัวข้อ (1.3.1, 2.4.6)
มี h1 หนึ่งหัวข้อต่อหน้าและบอกเนื้อหาหน้า เรียงหัวข้อตามลำดับ (h2 สำหรับส่วนหลัก h3 สำหรับหัวข้อย่อย) ไม่เลือกตามขนาดตัวอักษร ใช้รายการ ตารางที่มีเซลล์หัวข้อ และ landmark จริง เช่น header, nav, main, footer กำหนดภาษาหน้า: html lang="en" 7. เกณฑ์ใหม่ของ WCAG 2.2 ที่ควรรู้
2.5.8 Target Size (Minimum), AA: พื้นที่แตะอย่างน้อย 24 × 24 CSS pixels หรือเว้นระยะรอบเป้าหมายเล็กให้เพียงพอ2.4.11 Focus Not Obscured (Minimum), AA: แถบหัวติดหน้า แบนเนอร์คุกกี้ และวิดเจ็ตแชตต้องไม่บังองค์ประกอบที่โฟกัสทั้งหมด3.3.8 Accessible Authentication (Minimum), AA: อย่าบังคับแก้ปริศนาหรือจำข้อมูลเพื่อเข้าระบบโดยไม่มีทางเลือก รองรับ password manager และวางข้อความได้3.3.7 Redundant Entry, A: อย่าบังคับพิมพ์ข้อมูลเดิมซ้ำในกระบวนการเดียวกัน8. สื่อและภาพเคลื่อนไหว
วิดีโอต้องมีคำบรรยาย (1.2.2) วิดีโอที่บันทึกไว้ต้องมีเสียงบรรยายหรือข้อความทดแทนสำหรับข้อมูลภาพสำคัญ สิ่งที่เคลื่อนไหวเองเกินห้าวินาทีต้องมีวิธีหยุดชั่วคราว (2.2.2) เคารพการตั้งค่า prefers-reduced-motion สำหรับภาพเคลื่อนไหวขนาดใหญ่ ทดสอบด้วยตนเองใน 30 นาที
เครื่องมืออัตโนมัติเห็นปัญหาได้เพียงบางส่วน เพิ่มขั้นตอนนี้กับเทมเพลตหลักทุกแบบ
นาที 0 ถึง 5: สแกนอัตโนมัติ ใช้ WAVE (ส่วนขยายเบราว์เซอร์) หรือ axe DevTools หรือส่วน accessibility ใน Lighthouse แก้ข้อผิดพลาดชัดเจน เช่น ไม่มี alt ไม่มี label และคอนทราสต์ไม่พอ
นาที 5 ถึง 15: ใช้คีย์บอร์ดอย่างเดียว วางเมาส์ไว้ กด Tab ไล่เว็บจากด้านบน:
มองเห็นตำแหน่งโฟกัสตลอดไหม? เปิดปิดเมนู ใช้ทุกช่องและส่งฟอร์มได้หรือไม่? มีลิงก์ “ข้ามไปยังเนื้อหา” และใช้งานได้ไหม? โฟกัสหายหลังแถบหัวหรือแบนเนอร์หรือไม่? นาที 15 ถึง 25: Screen reader ใช้ VoiceOver (มีใน macOS และ iOS) หรือ NVDA (ฟรีบน Windows):
ฟังรายการหัวข้อแล้วเข้าใจหน้าไหม? เลื่อนไปภาพและปุ่ม ชื่อเข้าใจได้โดยไม่มีบริบทไหม? กรอกฟอร์มแล้วระบบอ่าน label ทุกช่องและอ่านข้อความ error หรือไม่? นาที 25 ถึง 30: ซูมและจัดหน้าใหม่ ซูมเบราว์เซอร์ 200% แล้ว 400% ที่ 400% เนื้อหาควรเรียงคอลัมน์เดียวโดยไม่ต้องเลื่อนแนวนอน (1.4.10 Reflow) และไม่มีส่วนใดถูกตัด
Usability กับ accessibility ทับซ้อนกัน
คนที่ค้น “การใช้งานเว็บและ accessibility” เข้าใจถูก เพราะการแก้ accessibility เกือบทุกอย่างช่วย usability ด้วย:
การแก้ accessibility ช่วยใครอีก คอนทราสต์ชัด คนใช้มือถือกลางแดด label ที่เห็น คนรีบกรอกฟอร์ม คำบรรยาย คนดูวิดีโอปิดเสียง รองรับคีย์บอร์ด ผู้ใช้เก่งหรือคน trackpad เสีย พื้นที่แตะใหญ่ขึ้น ทุกคนบนมือถือ ข้อความ error ชัด ทุกคนที่พิมพ์ผิด
Overlay คำชี้แจง และกฎหมาย
Overlay: วิดเจ็ตที่สัญญาว่าผ่านมาตรฐานในคลิกเดียวไม่ได้เปลี่ยนโค้ดพื้นฐาน แก้เว็บไซต์โดยตรงคำชี้แจง accessibility: เผยแพร่หน้าสั้น ๆ ระบุมาตรฐานเป้าหมาย ปัญหาที่ทราบ และวิธีติดต่อขอความช่วยเหลือหรือรูปแบบอื่นบริบทกฎหมาย: ข้อกำหนดต่างกันตามประเทศ European Accessibility Act ใช้กับผลิตภัณฑ์และบริการจำนวนมากใน EU ตั้งแต่มิถุนายน 2025 ส่วนในสหรัฐฯ มักใช้ ADA กับเว็บไซต์ หน่วยงานภาครัฐอาจมีกฎเฉพาะ ขอคำปรึกษากฎหมายตามกรณีเช็กลิสต์
[ ] คอนทราสต์: ข้อความ 4.5:1 ตัวอักษรใหญ่และ UI 3:1 [ ] ภาพให้ข้อมูลมี alt text ภาพตกแต่งใช้ alt ว่าง [ ] ทุกช่องมี label ที่เห็นและเชื่อมกัน [ ] ทั้งเว็บใช้คีย์บอร์ดได้และเห็นโฟกัส [ ] ปุ่มไอคอนมีชื่อที่เข้าถึงได้ [ ] หัวข้อและ landmark เป็นลำดับ กำหนดภาษาหน้าแล้ว [ ] พื้นที่แตะอย่างน้อย 24 × 24 CSS pixels [ ] วิดีโอมีคำบรรยาย ภาพเคลื่อนไหวมีปุ่มหยุด [ ] จัดหน้าใหม่ได้เมื่อซูม 400% [ ] เผยแพร่คำชี้แจง accessibility แล้ว Accessibility ยังช่วย SEO ด้วย: หัวข้อ alt text และลิงก์บอกปลายทางเป็นพื้นฐาน SEO บนหน้า ดู เช็กลิสต์ SEO บนหน้า
We.Inc สร้างเว็บเป็น HTML, CSS และ React มาตรฐานที่แก้โค้ดโดยตรงได้ จึงปรับ label, alt text และคอนทราสต์เอง หรือขอให้แก้ผ่านแชตได้ ควรทำแบบทดสอบด้วยตนเองด้านบนกับทุกเว็บที่เผยแพร่
เริ่มใช้ฟรี
เริ่มต้นฟรี · ไม่ต้องใช้บัตรเครดิต
Product
Who It's For
Features
Resources
Company
View Sitemap