หน้าจอ · ฟังก์ชันWeb accessibility · a11y
การเข้าถึงเว็บ (Web Accessibility)
การเข้าถึงเว็บคือการทำให้ลูกค้าที่สายตาไม่ค่อยดีหรือมือไม่สะดวกก็ใช้เว็บไซต์ได้โดยไม่ลำบาก
เหมือนการทำทางลาดที่ทางเข้าร้าน และเขียนตัวอักษรบนเมนูให้ใหญ่ ทุกคนก็สะดวกขึ้น
รายละเอียดเพิ่มเติม
โปรแกรมอ่านหน้าจอด้วยเสียงมองไม่เห็นรูป จึงอ่านคำอธิบายรูป (alt) ให้ฟัง ถ้าไม่มีคำอธิบาย รูปนั้นก็เหมือนไม่มีอยู่
ความต่างของสีตัวอักษรกับพื้นหลัง (Contrast) ต้องมากพอ มาตรฐานสากล (WCAG) แนะนำให้ตัวอักษรทั่วไปมี Contrast 4.5:1 ขึ้นไป
ถ้าดูแลการเข้าถึง ลูกค้าสูงวัยและลูกค้าที่ดูมือถือกลางแดดก็สะดวกขึ้น และเครื่องมือค้นหาก็เข้าใจเนื้อหาได้ดีขึ้น บางกรณีกฎหมายกำหนดเรื่องการเข้าถึงตามประเภทและขนาดธุรกิจ จึงต้องตรวจสอบ
การเข้าถึงเว็บตัดสินจากเกณฑ์อะไร
การเข้าถึงเว็บตัดสินจากมาตรฐานสากล WCAG (แนวทางการเข้าถึงเนื้อหาเว็บ) และมาตรฐานของเกาหลี KWCAG (แนวทางการเข้าถึงเนื้อหาเว็บฉบับเกาหลี) ที่สร้างขึ้นโดยอิงจาก WCAG โดย WCAG เป็นมาตรฐานที่ W3C จัดทำ ฉบับข้อแนะนำปัจจุบันคือ 2.2 และในเกาหลีใช้ KWCAG ฉบับ 2.2
ทั้งสองมาตรฐานเริ่มจากหลักการ 4 ข้อ ชื่อหลักการฟังดูยาก แต่ถ้าเทียบกับเว็บไซต์ร้าน ความหมายเรียบง่าย
เว็บไซต์ร้านทั่วไปก็ควรอ้างอิงเกณฑ์นี้ จะได้คุยกับบริษัทรับทำเว็บไซต์ด้วยภาษาเดียวกันว่าดูแลการเข้าถึงไปถึงระดับไหน และเมื่อจะยกระดับเกณฑ์ในอนาคต จุดเริ่มต้นก็ชัดเจน
ปัดตารางไปด้านข้างเพื่อดูเพิ่ม
| หลักการ | ความหมาย | บนเว็บไซต์ร้าน |
|---|---|---|
| รับรู้ได้ (Perceivable) | ลูกค้าทุกคนต้องเห็นหรือได้ยินเนื้อหาได้ | คำอธิบายรูป ตัวอักษรที่ตัดกับพื้นพอ คำบรรยายวิดีโอ |
| ใช้งานได้ (Operable) | ลูกค้าทุกคนต้องใช้ปุ่มและเมนูได้ | จองด้วยคีย์บอร์ดได้ ปุ่มมีขนาดเพียงพอ |
| เข้าใจได้ (Understandable) | ต้องเข้าใจเนื้อหาและวิธีใช้ได้ | ข้อความเข้าใจง่าย ชื่อช่องกรอก แจ้งข้อผิดพลาดที่เข้าใจง่าย |
| รองรับได้หลากหลาย (Robust) | ต้องทำงานได้ถูกต้องบนหลายอุปกรณ์ · โปรแกรมช่วยเหลือ | โค้ดตามมาตรฐาน รองรับโปรแกรมอ่านหน้าจอ |
เว็บไซต์ร้านเล็ก การเข้าถึงเว็บเป็นข้อบังคับทางกฎหมายไหม
การเข้าถึงเว็บมีฐานทางกฎหมายใน “กฎหมายห้ามเลือกปฏิบัติต่อคนพิการและการเยียวยาสิทธิ์ของเกาหลี” และกลุ่มที่ต้องปฏิบัติกับช่วงเวลาบังคับใช้กำหนดไว้เป็นขั้น ๆ ในพระราชกฤษฎีกา จึงสรุปไม่ได้ว่า “ทุกร้านมีหน้าที่เหมือนกัน” อาจต่างกันไปตามรูปแบบและขนาดของธุรกิจ
ร้านของคุณเข้าข่ายหรือไม่ ตรวจต้นฉบับกฎหมายและพระราชกฤษฎีกาได้ที่ศูนย์ข้อมูลกฎหมายแห่งชาติเกาหลี หรือถามผู้เชี่ยวชาญจะแม่นยำที่สุด ถ้าเข้าร่วมโครงการหรือการประมูลของหน่วยงานรัฐ บางครั้งอาจถูกขอใบรับรองคุณภาพการเข้าถึงเว็บ
นอกจากเรื่องข้อบังคับทางกฎหมาย การดูแลการเข้าถึงคือการทำให้พลาดลูกค้าน้อยลง ลูกค้าประจำที่สายตายาวตามวัย หรือลูกค้าที่อุ้มลูกมือหนึ่งแล้วใช้มือถืออีกมือ ก็ได้ประโยชน์เช่นกัน
ใบรับรองคุณภาพการเข้าถึงเว็บเป็นระบบที่แยกจากข้อบังคับทางกฎหมาย คือการรับการตรวจว่าปฏิบัติตามเกณฑ์หรือไม่แล้วได้รับการรับรอง สำหรับร้านเล็ก แม้ไม่ได้ขอการรับรอง แค่อ้างอิงเกณฑ์และทำพื้นฐานให้ครบก็มีความหมายมากแล้ว
ตรวจค่าความต่างของความสว่างตัวอักษร (Contrast) 4.5:1 อย่างไร
ค่าความต่างของความสว่างคือตัวเลขที่บอกความต่างของความสว่างระหว่างสีตัวอักษรกับสีพื้นหลัง ใส่สองสีลงในเครื่องมือตรวจ Contrast ฟรีก็รู้ทันที WCAG 2.2 เกณฑ์ความสำเร็จ 1.4.3 กำหนดให้ตัวอักษรทั่วไปมี 4.5:1 ขึ้นไป และตัวอักษรใหญ่ (18 พอยต์ขึ้นไป หรือตัวหนา 14 พอยต์ขึ้นไป) มี 3:1 ขึ้นไป
จุดที่มักไม่ผ่านในงานดีไซน์คือข้อความแนะนำสีเทาอ่อน ตัวอักษรสีขาวที่วางบนรูป และตัวอักษรบนปุ่มสีแบรนด์ ตัวอักษรบนรูปจะตัดกับพื้นน้อยลงตรงส่วนที่สว่างของรูป จึงทำให้รูปมืดลงเล็กน้อย หรือปูพื้นหลังโปร่งแสงไว้ด้านหลังตัวอักษร
โลโก้และตัวอักษรตกแต่งไม่อยู่ในเกณฑ์นี้ แต่ตัวอักษรที่ลูกค้าต้องอ่าน เช่น ราคา · เวลาเปิดทำการ · ปุ่ม ต้องตรวจให้ครบ
ดูแลไปพร้อมกันด้วยว่าไม่สื่อข้อมูลด้วยสีอย่างเดียว ถ้าแยกแค่ด้วยสี เช่น “วันที่สีแดงคือเต็มแล้ว” ลูกค้าที่แยกสีได้ยากจะไม่รู้ จึงต้องใส่คำว่า “เต็ม” หรือสัญลักษณ์ควบคู่ไปด้วย
การตรวจการเข้าถึงที่คุณลองทำเองได้มีอะไรบ้าง
แม้ไม่มีเครื่องมือเฉพาะทาง ก็หาปัญหาพื้นฐานได้เอง การตรวจด้านล่างแค่มีคอมพิวเตอร์กับมือถือ ใช้เวลา 20–30 นาทีก็เสร็จ
ถ้าเห็นปัญหา ให้แคปหน้าจอตำแหน่งนั้นส่งให้บริษัทรับทำเว็บไซต์ ยิ่งบอกได้แม่นยำว่าอะไรเป็นปัญหา ก็ยิ่งแก้ได้เร็ว
ถ้ามีจุดที่ฟังก์ชันอ่านหน้าจออ่านแค่ว่า “รูปภาพ” “ปุ่ม” แปลว่าจุดนั้นขาดคำอธิบายหรือชื่อ ในมุมของลูกค้า มันคือปุ่มที่ไม่รู้ว่าคืออะไร จึงเป็นส่วนที่ต้องแก้เป็นอันดับแรก
- 01บนคอมพิวเตอร์ ลองไม่ใช้เมาส์ แล้วกดแค่ปุ่ม Tab เพื่อเลื่อนไปตามเมนูจนถึงการจอง · การติดต่อ
- 02ตรวจว่าเวลาเลื่อนด้วยปุ่ม Tab มีสัญลักษณ์อย่างกรอบบอกว่าตอนนี้อยู่ตรงไหน
- 03ซูมเบราว์เซอร์เป็น 200% แล้วดูว่าตัวอักษรซ้อนหรือถูกตัดไหม
- 04เปิดฟังก์ชันอ่านหน้าจอของมือถือ (iPhone VoiceOver, Android TalkBack) แล้วฟังหน้าจอแรก
- 05ตรวจว่าฟอร์มจอง · ติดต่อมีชื่อแสดงทุกช่องกรอก และเมื่อกรอกผิด บอกว่าผิดตรงไหน
- 06ถ้ามีวิดีโอ ตรวจว่ามีคำบรรยายไหม และเข้าใจเนื้อหาได้แม้ไม่เปิดเสียงไหม
แต่ละธุรกิจควรดูแลการเข้าถึงตรงไหนเป็นพิเศษ
แต่ละธุรกิจมีข้อมูลที่ลูกค้าต้องอ่านต่างกัน จึงให้ดูก่อนว่าข้อมูลนั้นเข้าถึงได้หรือไม่ ด้านล่างเป็นส่วนที่ร้านเล็กมักมองข้าม
ถ้าเป็นร้านที่ลูกค้าสูงวัยเยอะ ให้ดูแลขนาดตัวอักษรด้วย ลูกค้าหลายคนตั้งตัวอักษรใหญ่ไว้ในมือถือ ลองตรวจว่าเมื่อขยายตัวอักษรแล้ว ข้อความบนปุ่มไม่ถูกตัดหรือซ้อนกัน
แม้ดูเหมือนมีจุดต้องแก้เยอะ ก็ไม่ต้องแก้ทั้งหมดพร้อมกัน เริ่มแก้ตามลำดับจากหน้าจอที่ลูกค้าต้องผ่าน เช่น การจอง · การติดต่อ · ราคา
- คาเฟ่ · ร้านอาหาร: ถ้าลงเมนูเป็นรูปอย่างเดียว โปรแกรมอ่านหน้าจอจะอ่านไม่ได้ ให้เขียนเมนูและราคาเป็นตัวอักษรด้วย
- ร้านทำผม: ในฟอร์มจอง อย่าให้เลือกวัน · เวลาได้ด้วยเมาส์อย่างเดียว และใส่ชื่อให้ช่องกรอกทุกช่อง
- ร้านงานฝีมือ: ใส่คำบรรยายในวิดีโอแนะนำคลาส และเขียนอุปกรณ์ที่ต้องเตรียม · เวลาที่ใช้เป็นข้อความด้วย
- ขายออนไลน์: หน้ารายละเอียดที่เป็นรูปยาวรูปเดียว ให้เขียนข้อมูลสำคัญ (วัสดุ · ขนาด · การจัดส่ง) เป็นตัวอักษรควบคู่ไปด้วย
ความผิดพลาดที่พบบ่อยด้านการเข้าถึงเว็บมีอะไรบ้าง
ความผิดพลาดที่พบบ่อยที่สุดคือพยายามแก้เรื่องการเข้าถึงทั้งหมดก่อนเปิดเว็บไซต์ไม่นาน สี · ขนาดตัวอักษร · โครงสร้างฟอร์มถูกกำหนดในขั้นตอนดีไซน์ การตั้งเกณฑ์ไว้ตั้งแต่แรกจึงง่ายกว่ามาก
การดูแค่คะแนนจากเครื่องมือตรวจอัตโนมัติแล้วจบก็น่าเสียดาย เครื่องมือบอกได้ว่า “มี” คำอธิบายรูปหรือไม่ แต่ตัดสินไม่ได้ว่า “เขียนถูกไหม” จึงต้องมีขั้นตอนที่คนตรวจเองด้วย
การเข้าถึงไม่ใช่เรื่องที่ปรับครั้งเดียวแล้วจบ ทุกครั้งที่ลงรูปใหม่ แบนเนอร์โปรโมชันใหม่ หรือเมนูใหม่ ต้องดูแลคำอธิบายรูปและความต่างของสีตัวอักษรอีกครั้ง คนที่ดูแลเว็บไซต์จึงควรรู้กฎพื้นฐานไว้
เรื่องการเข้าถึงเว็บ ควรถามบริษัทรับทำเว็บไซต์อะไรบ้าง
ถ้าบริษัทบอกว่า “ทำตามเกณฑ์การเข้าถึงแล้ว” ให้ขอผลลัพธ์ไว้ว่าตรวจด้วยเกณฑ์อะไร อย่างไร วันหลังเวลาแก้ไขหรือฝากที่อื่นทำก็มีประโยชน์
- ทำตามเกณฑ์การเข้าถึง (WCAG · KWCAG) ได้ถึงระดับไหน
- ตรวจความต่างของสีตัวอักษรในขั้นตอนแบบร่างดีไซน์หรือไม่
- จอง · ติดต่อจนจบได้ด้วยคีย์บอร์ดอย่างเดียวหรือไม่
- หลังเปิดเว็บไซต์ เวลาลงรูป มีช่องให้คุณเขียนคำอธิบาย (alt) ได้ง่าย ๆ หรือไม่
ตัวอย่างเช่น
- เวลาเปิดที่เขียนด้วยตัวอักษรสีขาวบนพื้นสีเทาอ่อน ลูกค้าหลายคนอ่านยาก
- เขียนให้อ่านแค่ปุ่มก็เข้าใจ เช่น “ดูเมนูทั้งหมด” แทน “คลิกที่นี่”
ตรวจแค่นี้ก็พอ
- ทุกรูปมีคำอธิบาย (alt) ไหม
- ตัวอักษรแยกจากพื้นหลังชัดเจนไหม
- ซูมหน้าจอบนมือถือแล้วไม่เพี้ยนใช่ไหม
- แค่ฟังข้อความบนปุ่มก็รู้ไหมว่าทำอะไร
ธุรกิจของเราต้องใช้ไหม
ใช้กับทุกเว็บไซต์ ถ้าเป็นร้านที่ลูกค้าสูงวัยเยอะ ยิ่งต้องใส่ใจ
ที่ ISSYMO
การเขียนคำอธิบาย (alt) ให้ทุกรูปรวมอยู่ในการตั้งค่าพื้นฐานด้านการแสดงผลในการค้นหา · AI แล้ว ส่วนจะทำตามเกณฑ์การเข้าถึงถึงระดับไหน ค่อยตกลงกันในการประชุม
คำถามที่พบบ่อย
แหล่งอ้างอิง
แก้ไขล่าสุด