การเข้าถึงเว็บไซต์สำหรับทุกคน: คู่มือใช้งานจริงสำหรับเว็บไซต์ธุรกิจ

การเข้าถึงเว็บไซต์ (web accessibility) ตัดสินว่าทุกคนใช้เว็บไซต์ของคุณได้หรือไม่ ทั้งอ่าน ไปมาระหว่างส่วนต่างๆ และกรอกฟอร์มติดต่อจนจบ ไม่ว่าจะใช้เมาส์ คีย์บอร์ด โปรแกรมอ่านหน้าจอ การสั่งงานด้วยเสียง หรือหน้าจอที่ซูมขยาย ในเว็บไซต์ธุรกิจส่วนใหญ่ อุปสรรคเป็นเรื่องธรรมดาๆ เช่น ตัวอักษรสีเทาอ่อน ช่องกรอกที่ไม่มี label ภาพที่ไม่มีคำอธิบาย และปุ่มไอคอนที่ถูกอ่านออกเสียงแค่ว่า “ปุ่ม”

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

คำตอบสั้นๆ

การเข้าถึงเว็บไซต์ (web accessibility หรือ website accessibility) หมายถึงการออกแบบและสร้างเว็บไซต์ ให้คนพิการรับรู้ เข้าใจ ไปมา และโต้ตอบกับเว็บไซต์ได้

• มาตรฐานคือ WCAG แนวทางการเข้าถึงเนื้อหาเว็บของ W3C และ WCAG 2.2 ระดับ AA คือเป้าหมายที่เหมาะสมสำหรับเว็บไซต์ธุรกิจ
• ตั้งอยู่บนสี่หลักการ คือ รับรู้ได้ ใช้งานได้ เข้าใจได้ และทำงานได้อย่างแข็งแรง (POUR)
• ความล้มเหลวที่พบบ่อยเป็นเรื่องพื้นฐาน ได้แก่ ตัวอักษรคอนทราสต์ต่ำ ไม่มี alt text ช่องกรอกไม่มี label ลิงก์และปุ่มที่ว่างเปล่า และไม่ได้ระบุภาษาของหน้า
• ถูกที่สุดเมื่อสร้างไว้ในตัว ผ่านชุดสี คอมโพเนนต์ และเทมเพลต แล้วดูแลต่อโดยทุกคนที่แก้ไขเว็บไซต์

การเข้าถึงเว็บไซต์คืออะไร?

Web Accessibility Initiative หรือ WAI ของ W3C นิยามไว้ ว่า คือเว็บไซต์ เครื่องมือ และเทคโนโลยี ที่ออกแบบและพัฒนาให้คนพิการใช้งานได้ คือรับรู้ เข้าใจ ไปมา และโต้ตอบกับเว็บ รวมถึงมีส่วนร่วมสร้างสรรค์เว็บได้

ซึ่งรวมถึงคนตาบอด คนสายตาเลือนราง คนหูหนวกหรือหูตึง คนที่มีข้อจำกัดด้านการเคลื่อนไหว การพูด การรับรู้ หรือการเรียนรู้ และผู้สูงอายุจำนวนมากที่ความสามารถค่อยๆ เปลี่ยนไป องค์การอนามัยโลกประเมินว่า มีคนประมาณ 1,300 ล้านคน หรือราวหนึ่งในหกของคนทั่วโลก ที่มีภาวะความพิการอย่างมีนัยสำคัญ

พวกเขาใช้โปรแกรมอ่านหน้าจอ คีย์บอร์ดแทนเมาส์ การขยายหน้าจอ การสั่งงานด้วยเสียง และคำบรรยายในวิดีโอ (caption) ซึ่งแต่ละอย่างทำงานได้ดีเท่าที่หน้าเว็บถูกสร้างมาเท่านั้น เหตุผลทางธุรกิจของการเข้าถึง อธิบายว่าทำไมการเข้าถึงคนกลุ่มนี้จึงสำคัญในเชิงการค้า

หลัก POUR: WCAG ทำให้ทดสอบได้อย่างไร

แนวทางการเข้าถึงเนื้อหาเว็บ (WCAG) เปลี่ยนคำว่า “ทำให้เข้าถึงได้” ให้เป็นเกณฑ์ความสำเร็จ (success criteria) ที่จัดกลุ่มภายใต้สี่หลักการ และแบ่งระดับเป็น A, AA และ AAA ระดับ AA รวมทุกอย่างในระดับ A และเป็นระดับที่กฎหมาย นโยบาย และสัญญาส่วนใหญ่อ้างถึง W3C แนะนำว่าไม่ควรกำหนดให้ทั้งเว็บไซต์ต้องผ่าน AAA เพราะเนื้อหาบางอย่างไม่สามารถผ่านได้

การผ่านเกณฑ์ (conformance) ยังครอบคลุมกระบวนการทั้งหมดด้วย ถ้าขั้นหนึ่งของฟอร์มหลายหน้าหรือขั้นตอนชำระเงินไม่ผ่าน ทุกหน้าในกระบวนการนั้นก็ถือว่าไม่ผ่าน และการผ่านทุกเกณฑ์บนกระดาษ ก็ไม่เหมือนกับการใช้งานได้ง่ายจริง

WCAG 2.2 เป็นข้อแนะนำอย่างเป็นทางการของ W3C ตั้งแต่ตุลาคม 2023 และเข้ากันได้ย้อนหลังกับ 2.1 และ 2.0 (backwards compatible) ณ เวลาที่เขียน (มิถุนายน 2026) WCAG 3 ยังเป็นร่างที่ไม่สมบูรณ์ และยังอีกหลายปีกว่าจะเสร็จ เวอร์ชัน 2.2 จึงเป็นเวอร์ชันที่ควรยึดในการสร้างเว็บ บทความ อธิบาย WCAG 2.2 อธิบายระดับต่างๆ และเกณฑ์ใหม่เก้าข้อ

อุปสรรคที่เจอซ้ำๆ ในเว็บธุรกิจ

ทุกปี WebAIM ทดสอบหน้าแรกของเว็บไซต์ยอดนิยมหนึ่งล้านอันดับแรกด้วยเครื่องมืออัตโนมัติ สำหรับรายงาน WebAIM Million และความล้มเหลวหกประเภทเดิมก็ติดอันดับต้นๆ ปีแล้วปีเล่า

ตัวอักษรคอนทราสต์ต่ำ

ข้อความเนื้อหาสีเทาอ่อน ตัวอักษรสีขาวบนภาพถ่าย สีแบรนด์อ่อนๆ บนลิงก์เล็กๆ ตรวจด้วยตัวเอง: ใน Chrome DevTools ให้ inspect ข้อความ แล้วคลิกช่องสีเพื่อดูอัตราส่วนคอนทราสต์ ข้อความเนื้อหาต้องมีอย่างน้อย 4.5:1 บทความ คอนทราสต์สีและตัวอักษรที่อ่านง่าย แสดงวิธีปรับชุดสีแบรนด์โดยไม่เสียเอกลักษณ์

ไม่มีข้อความทดแทนภาพ

ภาพที่ไม่มีแอตทริบิวต์ alt อาจถูกอ่านเป็นชื่อไฟล์ หรือถูกข้ามไป ภาพที่มีความหมายต้องมีคำอธิบายสั้นๆ ว่าแสดงอะไรหรือทำอะไร และโลโก้ที่เป็นลิงก์ควรบอกชื่อบริษัท ไม่ใช่ “โลโก้” ภาพตกแต่งให้ใส่ alt="" ว่างไว้ เพื่อให้โปรแกรมอ่านหน้าจอข้ามไป

ช่องฟอร์มที่ไม่มี label

placeholder ที่หายไปเมื่อพิมพ์ ไม่ใช่ label ถ้าไม่มี label ที่เชื่อมไว้ในโค้ด โปรแกรมอ่านหน้าจอจะอ่านออกมาประมาณว่า “แก้ไขข้อความ” และปล่อยให้ผู้ใช้เดาเอง ตรงนี้คือจุดที่การเข้าถึงและคอนเวอร์ชันมาบรรจบกัน บทความ ฟอร์มที่ทุกคนเข้าถึงได้ อธิบายเรื่อง label ข้อความแจ้งข้อผิดพลาด และ autocomplete

ลิงก์และปุ่มที่ว่างเปล่า

ตัวควบคุมที่มีแต่ไอคอนมักเป็นตัวการ เช่น ไอคอนเมนูและค้นหา ลูกศรของสไลด์ และปุ่มปิด “×” ของป๊อปอัป เมื่อไม่มีข้อความในโค้ด เทคโนโลยีช่วยเหลือจะอ่านแค่ว่า “ปุ่ม” หรือ “ลิงก์” ให้แต่ละตัวมีชื่อที่เข้าถึงได้ ผ่านข้อความที่ซ่อนจากสายตา หรือ aria-label

ไม่ได้ระบุภาษาของหน้า

แอตทริบิวต์ lang บอกโปรแกรมอ่านหน้าจอว่าต้องออกเสียงหน้านั้นเป็นภาษาอะไร ถ้าไม่มี มันจะใช้ค่าเริ่มต้นที่อาจผิด เว็บไซต์หลายภาษาต้องใส่ lang ให้ถูกในแต่ละเวอร์ชันภาษา และในข้อความช่วงที่เป็นภาษาอื่น เช่น ชื่อภาษาในตัวสลับภาษา ค้นหา <html lang= ในซอร์สโค้ดของหน้า

สิ่งที่เครื่องมืออัตโนมัติพลาด

เครื่องมืออย่าง axe, WAVE และ Lighthouse หาความล้มเหลวเหล่านั้นได้เร็ว แต่ WCAG ทดสอบด้วยเครื่องได้แค่บางส่วน เครื่องมือเหล่านี้ตัดสินไม่ได้ว่า alt text ถูกต้องไหม ลำดับโฟกัสสมเหตุสมผลไหม หรือผู้ใช้คีย์บอร์ดติดอยู่ในป๊อปอัปหรือเปล่า บทความ การตรวจการเข้าถึง เครื่องมือตรวจ และ overlay อธิบายว่าแต่ละอย่างบอกอะไรคุณได้

ทำไมสร้างไว้ตั้งแต่แรกจึงประหยัดกว่า

การตัดสินใจเรื่องการเข้าถึงส่งผลต่อเนื่องเป็นทอดๆ สีแบรนด์ที่คอนทราสต์ไม่ผ่านจะปรากฏบนทุกปุ่ม เมนูที่ขังโฟกัสคีย์บอร์ด จะปรากฏบนทุกหน้า ถ้าตัดสินใจตั้งแต่เนิ่นๆ มันจะถูกต้องทุกที่ แต่ถ้าเจอหลังเปิดตัว การแก้แต่ละครั้งหมายถึงการเปิดดีไซน์ที่อนุมัติแล้วขึ้นมาใหม่ แก้คอมโพเนนต์ และทดสอบซ้ำ บางครั้งถึงขั้นต้องเปลี่ยนธีมทั้งหมด

การออกแบบเว็บไซต์ให้ทุกคนเข้าถึงได้ เริ่มก่อนจะวาดหน้าแรก

1. บรีฟ ระบุ WCAG 2.2 AA เป็นข้อกำหนดในบรีฟและสัญญา และถามว่าจะทดสอบอย่างไร เรื่องนี้ควรอยู่ใน คำถามที่ควรถามก่อนจ้างนักออกแบบเว็บไซต์
2. ออกแบบ ทดสอบคอนทราสต์ของชุดสีก่อนอนุมัติ ออกแบบสถานะโฟกัสที่มองเห็นได้ ทำเป้าหมายการแตะให้ใหญ่พอ อย่าใช้สีอย่างเดียวในการสื่อความหมาย และอย่าใส่ข้อความในภาพ
3. พัฒนา ใช้ HTML เชิงความหมาย (semantic HTML) ก่อน ปุ่มและลิงก์จริงใช้กับคีย์บอร์ดได้โดยค่าเริ่มต้น และหัวข้อกับ label จริง ให้โครงสร้างของหน้ากับโปรแกรมอ่านหน้าจอ ARIA มีไว้เติมช่องว่าง และ ARIA ที่ใช้ผิดจะทำให้แย่ลง
4. เนื้อหา หัวข้อที่สื่อความ ข้อความลิงก์ที่เข้าใจได้ในตัวเอง alt text ที่ถูกต้อง และภาษาที่เข้าใจง่าย
5. ทดสอบก่อนเปิดตัว ตรวจอัตโนมัติทุกเทมเพลต แล้วทดสอบเส้นทางสำคัญด้วยคีย์บอร์ด ที่การซูม 200% และ 400% และด้วยโปรแกรมอ่านหน้าจอ

โครงสร้างแบบนั้นยังช่วยให้เครื่องมือค้นหาเข้าใจหน้าของคุณด้วย แม้ Google จะยังไม่ได้ยืนยันว่าการเข้าถึงเป็นปัจจัยจัดอันดับโดยตรง บทความ การเข้าถึงกับ SEO แยกส่วนที่ทับซ้อนกันจริงออกจากความเชื่อผิดๆ

ข้อกำหนดทางกฎหมายต่างกันไปตามตลาด

นี่ไม่ใช่คำแนะนำทางกฎหมาย กฎเกณฑ์ต่างกันไปตามประเทศ ภาคธุรกิจ และองค์กร โดยทั่วไป

• เว็บไซต์ภาครัฐ ในหลายประเทศต้องผ่านมาตรฐานที่กำหนด ซึ่งมักอิงจาก WCAG
• ในสหภาพยุโรป กฎหมาย European Accessibility Act มีผลตั้งแต่ 28 มิถุนายน 2025 กับกลุ่มสินค้าและบริการที่กำหนด รวมถึงร้านค้าออนไลน์จำนวนมาก โดยยกเว้นธุรกิจขนาดเล็กมาก (microenterprise) ที่ให้บริการ
• ในที่อื่นๆ กฎหมายด้านคนพิการและการต่อต้านการเลือกปฏิบัติ อาจมีผลกับเว็บไซต์ได้ ในสหรัฐอเมริกา มีธุรกิจที่ถูกฟ้องเรื่องเว็บไซต์ที่เข้าถึงไม่ได้ ภายใต้กฎหมายคุ้มครองคนพิการ ADA

กฎอาจตามลูกค้าของคุณไป ไม่ใช่ตามที่ตั้งของคุณ และส่วนใหญ่ก็ชี้กลับไปที่ WCAG ระดับ AA ดังนั้น 2.2 AA จึงเป็นค่าเริ่มต้นที่สมเหตุสมผล ถ้าอยู่ในธุรกิจที่มีการกำกับดูแล ให้ปรึกษาทนายความที่รู้จักตลาดของคุณ

รักษาการเข้าถึงหลังเปิดตัว

หลังเปิดตัว อุปสรรคใหม่มักมาจากการแก้ไขประจำวัน เช่น ข้อความที่ฝังในภาพแบนเนอร์ วิดีโอที่ไม่มีคำบรรยาย PDF ที่สแกนมา หรือวิดเจ็ตแชตที่ไม่ได้ทดสอบ ตกลงนิสัยไม่กี่อย่างกับทุกคนที่เผยแพร่เนื้อหา

• เขียน alt text ตอนอัปโหลด และเว้นว่างเฉพาะภาพตกแต่ง
• หัวข้อเรียงตามโครงร่าง (H2 แล้วจึง H3) เลือกตามโครงสร้าง ไม่ใช่ตามขนาด
• ข้อความลิงก์บอกว่าพาไปไหน ไม่ใช้ “คลิกที่นี่”
• วิดีโอมีคำบรรยายที่ถูกต้อง คำบรรยายที่สร้างอัตโนมัติต้องตรวจก่อน
• ใส่เนื้อหาไว้บนหน้าเว็บแทน PDF เมื่อทำได้ และ PDF ที่เลี่ยงไม่ได้ต้องมี tag มีชื่อเรื่อง และเป็นข้อความจริง ไม่ใช่ภาพสแกน
• ปลั๊กอิน ป๊อปอัป แบนเนอร์คุกกี้ และวิดเจ็ตใหม่ ถูกลองใช้ด้วยคีย์บอร์ดก่อนขึ้นเว็บจริง
• ตรวจเส้นทางสำคัญซ้ำ หลังการเปลี่ยนแปลงที่มีนัยสำคัญ

เช็กลิสต์การดูแลเว็บไซต์ คือที่ที่เหมาะสำหรับการตรวจตามรอบเหล่านี้

เผยแพร่ถ้อยแถลงการเข้าถึง

ถ้อยแถลงการเข้าถึง (accessibility statement) บอกผู้เข้าชมว่าเว็บไซต์ของคุณเข้าถึงได้แค่ไหน และต้องทำอย่างไรเมื่อมีบางอย่างใช้ไม่ได้ ได้แก่ มาตรฐานที่คุณตั้งเป้า ปัญหาที่รู้อยู่แล้วและวิธีหลีกเลี่ยง วิธีแจ้งอุปสรรคและเมื่อไหร่ที่คุณจะตอบกลับ และวันที่ตรวจทานล่าสุด เขียนอย่างซื่อตรง การอ้างว่าผ่านเกณฑ์ทั้งที่ไม่ได้ทดสอบ สร้างความเสียหายมากกว่าการแจ้งปัญหาที่รู้อยู่ W3C เผยแพร่ แนวทางการเขียนถ้อยแถลงการเข้าถึง รวมถึงเครื่องมือสร้างถ้อยแถลงฟรี

เริ่มจากตรงไหนกับเว็บที่มีอยู่

1. เลือกเส้นทางสำคัญ ได้แก่ หน้าแรก หน้าบริการหลัก และฟอร์มติดต่อสอบถาม
2. รันเครื่องมือตรวจอัตโนมัติ กับแต่ละหน้า และแก้ความล้มเหลวที่พบบ่อยข้างต้น
3. เก็บเมาส์ คุณกด Tab ไปถึงทุกตัวควบคุม เห็นว่าตัวเองอยู่ตรงไหน และส่งฟอร์มได้ไหม?
4. ซูมไปที่ 400% ในหน้าต่างเดสก์ท็อปกว้าง 1,280 พิกเซล เลย์เอาต์จัดเรียงใหม่ได้โดยไม่ต้องเลื่อนด้านข้างไหม?
5. ฟังหน้าเว็บ ด้วย VoiceOver (มีในเครื่อง Mac และ iPhone) หรือ NVDA (ใช้ฟรีบน Windows)
6. แก้ที่ต้นเหตุ ชุดสี คอมโพเนนต์ และเทมเพลตก่อน แล้วจึงแก้เนื้อหา

ทุกบทความในซีรีส์การเข้าถึง

การเข้าถึงเป็นส่วนหนึ่งของการออกแบบที่ดี ไม่ใช่ศาสตร์ที่แยกออกมา บทความด้านการออกแบบเว็บไซต์ ครอบคลุมส่วนที่เหลือ

คำถามที่พบบ่อย

WCAG 2.1 AA ยังดีพออยู่ไหม?

กฎหมายและสัญญาจำนวนมากยังอ้างถึง WCAG 2.1 ระดับ AA และเว็บไซต์ที่ผ่าน 2.2 AA ก็ผ่าน 2.1 AA ด้วย เวอร์ชัน 2.2 เพิ่มการตรวจหกข้อในระดับ A และ AA ได้แก่ โฟกัสที่ถูกบัง ขนาดเป้าหมายการกด การลาก ความช่วยเหลือที่สม่ำเสมอ การกรอกข้อมูลซ้ำ และการล็อกอิน การสร้างตาม 2.2 จึงครอบคลุมทั้งสองเวอร์ชัน

การเข้าถึงจำกัดหน้าตาของเว็บไซต์ไหม?

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

ปลั๊กอินด้านการเข้าถึงทำให้เว็บไซต์ผ่านเกณฑ์ได้ไหม?

ลำพังปลั๊กอินทำไม่ได้ อุปสรรคอยู่ในดีไซน์ โค้ด และเนื้อหา ซึ่งปลั๊กอินหรือ overlay แก้จากภายนอกได้ไม่แน่นอน เครื่องมือตรวจที่ชี้ว่าขาด alt text มีประโยชน์ในฐานะตัวเตือน ไม่ใช่วิธีแก้

การเข้าถึงมีไว้สำหรับคนพิการเท่านั้นหรือ?

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

ขั้นตอนต่อไป

การเข้าถึงไม่ใช่ป้ายที่ติดตั้งตอนท้าย มันมาจากการตัดสินใจในบรีฟ ดีไซน์ โค้ด และทุกการแก้ไขหลังเปิดตัว ควบคู่ไปกับกลยุทธ์ UX ประสิทธิภาพ และ SEO ไม่ใช่มาทีหลัง

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