Accessibility สำหรับเว็บและแอป พื้นฐาน WCAG 2.2 และเช็กลิสต์ที่ทำได้ภายในสัปดาห์นี้

WCAG 2.2 คืออะไร และสี่หลักการ

WCAG ย่อมาจาก Web Content Accessibility Guidelines เป็นแนวทางที่จัดทำโดย W3C เพื่อบอกว่าเนื้อหาเว็บควรเป็นอย่างไรจึงจะใช้ได้กับคนหลากหลาย เวอร์ชัน 2.2 เพิ่มเกณฑ์ใหม่บางข้อต่อจากเวอร์ชันก่อนหน้า เช่น เรื่องขนาดพื้นที่แตะและการช่วยเหลือผู้ใช้ที่ใช้งานฟอร์มยาก เกณฑ์แบ่งเป็นระดับ A, AA และ AAA โดยหลายองค์กรตั้งเป้าที่ระดับ AA

โครงสร้างทั้งหมดอยู่บนสี่หลักการที่จำง่าย คือ Perceivable ผู้ใช้รับรู้เนื้อหาได้ Operable ผู้ใช้ควบคุมได้ Understandable ผู้ใช้เข้าใจได้ และ Robust เนื้อหาทำงานได้กับเบราว์เซอร์และเทคโนโลยีช่วยเหลือหลากหลาย

• Perceivable: ข้อความทางเลือกสำหรับภาพ คำบรรยายสำหรับวิดีโอ และคอนทราสต์ที่เพียงพอ
• Operable: ใช้งานด้วยคีย์บอร์ดได้ มีเวลาอ่านเพียงพอ และไม่มีสิ่งที่กะพริบจนเป็นอันตราย
• Understandable: ภาษาชัดเจน พฤติกรรมคาดเดาได้ และข้อความ error ที่บอกวิธีแก้
• Robust: ใช้ HTML ที่ถูกความหมายเพื่อให้ screen reader และเครื่องมืออื่นตีความได้

คอนทราสต์ และการไม่พึ่งสีอย่างเดียว

ข้อความต้องมีความต่างระหว่างสีตัวอักษรกับพื้นหลังมากพอ เกณฑ์ระดับ AA กำหนดอัตราส่วนอย่างน้อย 4.5 ต่อ 1 สำหรับข้อความทั่วไป และ 3 ต่อ 1 สำหรับข้อความขนาดใหญ่ รวมถึงองค์ประกอบ UI เช่น เส้นขอบของช่องกรอกและไอคอนที่สื่อความหมาย เครื่องมือตรวจคอนทราสต์ฟรีมีให้ใช้มากมาย ทั้งใน Figma และเบราว์เซอร์

อย่าใช้สีเป็นตัวสื่อสารเพียงอย่างเดียว เช่น ช่องที่กรอกผิดแสดงเป็นสีแดงอย่างเดียว ผู้ที่มองสีไม่ครบจะไม่เห็นความต่าง ควรเพิ่มไอคอนหรือข้อความอธิบายด้วย

ถ้าทางลาดช่วยคนเข็นรถเข็น และคนถือของหนักด้วย accessibility ที่ดีก็ช่วยเราทุกคนในวันที่ไม่สะดวก

คีย์บอร์ด และการโฟกัส

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

อย่าลบเส้นโฟกัส (focus outline) โดยไม่มีของใหม่มาแทน และระวัง modal กับเมนูแบบเลื่อนลงที่โฟกัสหลุดออกไปหลังหน้าจอ WCAG 2.2 ยังเพิ่มเรื่องที่โฟกัสไม่ควรถูกบังโดยองค์ประกอบที่ลอยอยู่ เช่น แถบ header ติดบนหน้า

Label ข้อความทางเลือก และขนาดพื้นที่แตะ

ช่องกรอกทุกช่องต้องมี label ที่เชื่อมกับช่องนั้นจริงๆ ด้วยแท็ก label หรือ aria-label ไม่ใช่แค่ placeholder ซึ่งหายไปทันทีที่พิมพ์ ภาพที่สื่อความหมายต้องมีข้อความทางเลือก ส่วนภาพตกแต่งควรให้ alt เป็นค่าว่างเพื่อให้ screen reader ข้ามไป

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

ทำไมเรื่องนี้สำคัญทั่วโลก และเช็กลิสต์สัปดาห์นี้

หลายประเทศมีกฎหมายหรือข้อกำหนดที่เกี่ยวกับการเข้าถึงดิจิทัล ตัวอย่างที่พูดถึงบ่อยคือ European Accessibility Act ของสหภาพยุโรป ซึ่งโดยทั่วไปครอบคลุมผลิตภัณฑ์และบริการดิจิทัลหลายประเภทที่ขายให้ผู้บริโภคในยุโรป ถ้าธุรกิจของคุณมีลูกค้าหรือแผนขยายไปต่างประเทศ ควรตรวจกับที่ปรึกษากฎหมายว่าข้อกำหนดใดเกี่ยวข้อง นอกจากนี้ ประชากรสูงวัยในหลายประเทศ รวมถึงไทย ก็ทำให้ผู้ใช้ที่ต้องการตัวอักษรชัดและปุ่มใหญ่เพิ่มขึ้น

เช็กลิสต์ด้านล่างทีมเริ่มได้ในสัปดาห์นี้ ไม่ต้องรอโปรเจกต์ใหญ่

• ตรวจคอนทราสต์ของสีหลักและข้อความบนปุ่ม ด้วยเครื่องมือตรวจฟรี
• ใช้ Tab เดินผ่านหน้าสำคัญสามหน้า แล้วจดว่าติดตรงไหน
• ตรวจว่าทุกช่องกรอกมี label จริง ไม่ใช่แค่ placeholder
• เพิ่ม alt ให้ภาพที่สื่อความหมาย และปล่อยว่างสำหรับภาพตกแต่ง
• ตรวจว่าเส้นโฟกัสมองเห็นชัดและไม่ถูกลบ
• ปรับปุ่มและลิงก์บนมือถือให้พื้นที่แตะไม่เล็กเกินไป
• ตรวจข้อความ error ว่าบอกวิธีแก้ ไม่ใช่แค่สีแดง
• ทดลองใช้ screen reader ของเครื่อง เช่น VoiceOver หรือ TalkBack กับหน้า checkout หรือหน้าสมัคร