สวยๆ แต่ไม่มีบทบาท (role) ที่ถูกต้อง Screen Reader จะมองไม่เห็นว่ามันคือปุ่ม

หลักการสากลของ WCAG แบ่งออกเป็น 4 เสาหลักที่จำด้วยคำว่า POUR:

1. Perceivable - รับรู้ได้: ข้อมูลต้องนำเสนอในรูปแบบที่ประสาทสัมผัสต่างๆ รับรู้ได้ เช่น มีข้อความทางเลือก (alt text) สำหรับรูปภาพ มีคำบรรยายสำหรับวิดีโอ
2. Operable - ปฏิบัติการได้: ส่วนติดต่อต้องใช้งานได้ด้วยวิธีที่หลากหลาย เช่น ใช้คีย์บอร์ดได้อย่างเดียว ไม่บังคับให้ต้องลากเมาส์
3. Understandable - เข้าใจได้: เนื้อหาและการทำงานต้องเข้าใจง่าย คาดเดาได้ ไม่สับสน
4. Robust - แข็งแรง: เนื้อหาต้องเข้ากันได้กับเทคโนโลยีปัจจุบันและอนาคต รวมถึงเบราว์เซอร์และ Assistive Technology ต่างๆ

มาตรฐานสากลล่าสุด: WCAG 2.2 คืออะไร

มาตรฐานที่ทั่วโลกใช้อ้างอิงคือ Web Content Accessibility Guidelines (WCAG) ที่พัฒนาโดย World Wide Web Consortium (W3C)

เวอร์ชันปัจจุบันคือ WCAG 2.2 เผยแพร่ครั้งแรกเมื่อวันที่ 5 ตุลาคม 2023 และมีการปรับปรุงเชิงบรรณาธิการเล็กน้อยเมื่อวันที่ 12 ธันวาคม 2024 โดยไม่มีการเปลี่ยนเกณฑ์การประเมิน [1974332847543248997]

WCAG 2.2 ยังคงเกณฑ์ทั้งหมดจาก WCAG 2.1 ยกเว้นการลบเกณฑ์ 4.1.1 Parsing ออก และเพิ่มเกณฑ์ใหม่ 9 ข้อ เพื่อแก้ปัญหาที่เวอร์ชันก่อนยังครอบคลุมไม่ดีพอ [1974332847543248997] เกณฑ์ใหม่เน้นไปที่:

• การมองเห็นโฟกัส: Focus ต้องไม่ถูกบัง และต้องมองเห็นชัดเจน (2.4.11, 2.4.12)
• การลากและวาง: ต้องมีทางเลือกอื่นนอกจากการลาก (2.5.7, 2.5.8)
• ขนาดเป้าหมาย: ปุ่มต้องมีขนาดใหญ่พอที่จะกดได้ง่าย โดยเฉพาะบนมือถือ (2.5.8)
• ความช่วยเหลือที่สม่ำเสมอ: วิธีขอความช่วยเหลือต้องอยู่ในตำแหน่งเดียวกันทุกหน้า (3.2.6)
• การกรอกข้อมูลซ้ำ: ลดการให้ผู้ใช้กรอกข้อมูลเดิมซ้ำๆ (3.3.7, 3.3.8)
• การยืนยันตัวตนที่เข้าถึงได้: ไม่บังคับให้ทำแบบทดสอบที่ยากสำหรับผู้พิการทางสติปัญญา (3.3.8)

มาตรฐานนี้ถูกนำไปใช้เป็นฐานในกฎหมายหลายประเทศ เช่น มาตรฐานยุโรป EN 301 549 V4.1.1 ที่ประกาศใช้ WCAG 2.2 เป็นเกณฑ์ [1974332847543248997] และในสหรัฐอเมริกา รัฐวอชิงตันกำหนดให้ WCAG 2.2 AA เป็นขั้นต่ำสำหรับเทคโนโลยีของรัฐตั้งแต่วันที่ 1 กรกฎาคม 2026 [1974332847543248997]

ระดับการสอดคล้องมี 3 ระดับ: A (ขั้นต่ำ), AA (มาตรฐานที่องค์กรส่วนใหญ่ใช้), และ AAA (สูงสุด)

เทคโนโลยีสิ่งอำนวยความสะดวก: คนพิการใช้อะไรอยู่จริง

Assistive Technology คือเครื่องมือ ฮาร์ดแวร์ หรือซอฟต์แวร์ที่ช่วยให้คนพิการใช้งานดิจิทัลได้ แบ่งเป็นกลุ่มใหญ่ๆ ดังนี้

1. โปรแกรมอ่านหน้าจอ (Screen Reader)

Screen Reader จะอ่านเนื้อหาบนหน้าจอออกมาเป็นเสียงหรืออักษรเบรลล์ อาศัยโครงสร้างของเว็บ เช่น heading, link, button, label [520964688405077862]

โปรแกรมที่นิยมที่สุดจากผลสำรวจ WebAIM Screen Reader User Survey ปี 2026 (ผู้ตอบ 1,780 คน) คือ [520964688405077862]:

• บนเดสก์ท็อป: JAWS (55.0%), NVDA (32.9%), VoiceOver (6.5%) โดย 70.3% ใช้มากกว่า 1 ตัว
• บนมือถือ/แท็บเล็ต: VoiceOver 72.2%, TalkBack 29.5%

ตัวอย่างโปรแกรม:

• JAWS (Job Access With Speech): โปรแกรมแบบเสียเงินบน Windows [520964688405077862]
• NVDA (NonVisual Desktop Access): โปรแกรมอ่านหน้าจอฟรี โอเพนซอร์ส บน Windows [520964688405077862]
• VoiceOver: โปรแกรมที่ติดตั้งมากับระบบของ Apple ทั้ง Mac และ iPhone [520964688405077862]
• TalkBack: โปรแกรมที่มากับ Android

2. เทคโนโลยีอื่นๆ

• โปรแกรมขยายหน้าจอ (Screen Magnifier): เช่น Windows Magnifier, Zoom บน iOS ช่วยให้ผู้มีสายตาเลือนรางขยายส่วนที่ต้องการ [520964688405077862]
• การสั่งงานด้วยเสียง (Speech-to-Text): เช่น Dragon NaturallySpeaking ใช้พูดแทนการพิมพ์ [520964688405077862]
• สวิตช์และคีย์บอร์ดทางเลือก: สำหรับผู้ที่มีข้อจำกัดด้านการเคลื่อนไหว
• จอแสดงผลอักษรเบรลล์: แปลงข้อความบนหน้าจอเป็นอักษรเบรลล์สัมผัส

ลองใช้เวลาสัก 10 นาทีนำทางด้วย Screen Reader คุณจะไม่มีวันลืมใส่ alt text อีกเลย [520964688405077862]

วิธีออกแบบและพัฒนาให้เข้าถึงได้จริง

สำหรับนักพัฒนา (Developer)

สิ่งที่ต้องทำ	ทำไม	วิธีทำ
ใช้ HTML ตามความหมาย (Semantic HTML)	Screen Reader พึ่งพาโครงสร้าง	ใช้ ไม่ใช่ , ใช้ - ตามลำดับ
ใส่ Label ให้ฟอร์ม	ผู้ใช้ Screen Reader ไม่รู้ว่าช่องนี้คืออะไร	ใช้ หรือ aria-label
ทำให้ใช้คีย์บอร์ดได้ 100%	ผู้ใช้บางคนใช้ไม่ได้เมาส์	ทดสอบด้วย Tab, Enter, Space, Escape
ใส่ Alt Text ที่มีความหมาย	คนตาบอดไม่เห็นรูป	อธิบายหน้าที่ของรูป ไม่ใช่แค่ "รูป1.jpg"

สำหรับนักออกแบบ (Designer)

• อัตราส่วนคอนทราสต์: ข้อความต้องมีคอนทราสต์อย่างน้อย 4.5:1 สำหรับข้อความปกติ (WCAG 1.4.3)
• อย่าสื่อสารด้วยสีอย่างเดียว: ข้อผิดพลาดต้องมีไอคอนหรือข้อความ ไม่ใช่แค่เปลี่ยนเป็นสีแดง
• ขนาดเป้าหมาย: ตาม WCAG 2.2 ปุ่มต้องมีขนาดอย่างน้อย 24x24 พิกเซล และควรตั้งเป้า 44x44 พิกเซล
• Focus Indicator: ต้องเห็นชัดเจนว่าตอนนี้โฟกัสอยู่ที่ไหน

เครื่องมือทดสอบเบื้องต้น

• Lighthouse ใน Chrome DevTools
• axe DevTools ส่วนขยายเบราว์เซอร์
• WAVE เครื่องมือตรวจประเมินออนไลน์
• ทดสอบด้วยคีย์บอร์ดจริงๆ และลองเปิด NVDA หรือ VoiceOver

บริบทประเทศไทย: TWCAG และกฎหมาย

ประเทศไทยมี พระราชบัญญัติส่งเสริมและพัฒนาคุณภาพชีวิตคนพิการ พ.ศ. 2550 และที่แก้ไขเพิ่มเติม พ.ศ. 2556 ซึ่งเป็นกฎหมายหลักที่ส่งเสริมสิทธิและความเท่าเทียมของคนพิการ รวมถึงด้านการเข้าถึงดิจิทัล [8873050517454957437]

สภาดิจิทัลเพื่อเศรษฐกิจและสังคมแห่งประเทศไทย (DCT) ร่วมกับมูลนิธิอินเทอร์เน็ตร่วมพัฒนาไทย และ สสส. ได้ผลักดันแนวทาง TWCAG 2022 หรือ Thai Web Content Accessibility Guidelines 2022 ซึ่งเป็นแนวทางการพัฒนาเว็บไซต์และแอปพลิเคชันให้ทุกคนเข้าถึงได้อย่างเท่าเทียม โดยอ้างอิงมาตรฐานสากล WCAG [8873050517454957437]

ปัจจุบันมีการพัฒนาเป็น TWCAG 2025 ที่ปรับปรุงจาก TWCAG 2022 ให้ทันสมัยและสอดคล้องกับ WCAG 2.2 (W3C, 2024) [8873050517454957437]

และเมื่อวันที่ 16 ธันวาคม 2568 สภาดิจิทัลฯ ได้ผนึก 12 หน่วยงานรัฐ-เอกชน ลงนาม MOU เรื่อง "ความร่วมมือในการส่งเสริมการเข้าถึงเนื้อหาและบริการดิจิทัลโดยสะดวกถ้วนหน้า" เพื่อยกระดับการเข้าถึงสำหรับคนพิการ ผู้สูงอายุ และกลุ่มเปราะบาง [8873050517454957437]

สิ่งนี้ชี้ให้เห็นว่าประเด็น Accessibility ในไทยกำลังเปลี่ยนจากเรื่องสมัครใจ ไปสู่มาตรฐานที่ภาครัฐและเอกชนต้องให้ความสำคัญ

ข้อควรระวังและความเข้าใจผิดที่พบบ่อย

1. คิดว่าแค่ใส่ปลั๊กอิน Accessibility Toolbar แล้วจบ: แถบเครื่องมือที่ให้ปรับสีหรือขยายตัวอักษรไม่ได้แก้ปัญหาเชิงโครงสร้าง เช่น การที่เว็บไซต์ใช้คีย์บอร์ดไม่ได้
2. ทำเฉพาะหน้าแรก: ผู้ใช้ต้องใช้งานได้ทุกหน้า ไม่ใช่แค่หน้า Landing
3. พึ่งพา AI สร้าง Alt Text แบบอัตโนมัติ 100%: AI ช่วยได้ แต่บ่อยครั้งอธิบายผิดบริบท เช่น บอกว่าเป็น "คนยิ้ม" แต่ไม่บอกว่าเป็นปุ่ม "ยืนยันการชำระเงิน"
4. คิดว่าคนพิการเป็นกลุ่มเล็ก: ตาม WHO มีประชากรกว่า 16% ทั่วโลกมีความพิการบางรูปแบบ และผู้สูงอายุทุกคนก็ได้ประโยชน์จากตัวอักษรที่ใหญ่ขึ้นและคอนทราสต์ที่ดี
5. มองว่าเป็นต้นทุน ไม่ใช่การลงทุน: เว็บไซต์ที่เข้าถึงได้ มักมี SEO ที่ดีขึ้น ใช้งานบนมือถือได้ดีขึ้น และลดความเสี่ยงทางกฎหมาย

สรุป: เริ่มวันนี้ให้ดีกว่าไม่เริ่มเลย

การเข้าถึงดิจิทัลไม่ใช่การทำเพื่อคนกลุ่มใดกลุ่มหนึ่ง แต่เป็นการออกแบบให้มนุษย์ทุกคนใช้งานได้ในสถานการณ์ที่แตกต่างกัน ไม่ว่าจะตาบอด มือไม่ว่าง อยู่ในที่แสงจ้า หรือใช้อินเทอร์เน็ตช้า

เริ่มง่ายๆ ด้วย 3 ขั้นตอน:

1. เรียนรู้และเห็นอกเห็นใจ: ลองใช้ Screen Reader ฟรีอย่าง NVDA หรือเปิด VoiceOver บน iPhone แล้วลองใช้งานเว็บไซต์ของตัวเอง
2. แก้จุดที่ผลกระทบสูงก่อน: ใส่ alt text, ทำให้ฟอร์มมี label, ตรวจสอบคอนทราสต์, ทำให้เมนูใช้คีย์บอร์ดได้
3. ทำให้เป็นส่วนหนึ่งของกระบวนการ: ใส่เช็กลิสต์ WCAG 2.2 AA เข้าไปในขั้นตอนออกแบบและโค้ดรีวิว ไม่ใช่มาตรวจตอนจบ

เมื่อเราออกแบบเผื่อทุกคนตั้งแต่ต้น เราไม่ได้แค่ทำตามกฎหมาย แต่กำลังสร้างอินเทอร์เน็ตที่ดีขึ้นสำหรับทุกคนจริงๆ

แหล่งข้อมูลอ้างอิง

• W3C - Web Content Accessibility Guidelines (WCAG) 2.2 เผยแพร่ 5 ต.ค. 2023 อัปเดต 12 ธ.ค. 2024 https://www.w3.org/TR/WCAG22/
• WebAIM Screen Reader User Survey 2026 สรุปการใช้งาน JAWS, NVDA, VoiceOver https://webaim.org/projects/screenreadersurvey10/
• สภาดิจิทัลเพื่อเศรษฐกิจและสังคมแห่งประเทศไทย - แนวทาง TWCAG 2022 และการพัฒนา TWCAG 2025 อ้างอิง WCAG 2.2 https://www.dct.or.th/
• สสส. - เว็บไซต์ที่ทุกคนเข้าถึงได้และการทดสอบกับสมาคมคนตาบอดแห่งประเทศไทย https://www.thaihealth.or.th/
• MDN Web Docs - ARIA และ Semantic HTML สำหรับ Accessibility https://developer.mozilla.org/en-US/docs/Web/Accessibility