ตัวหนังสือเล็กจนต้องซูม ปุ่มชิดกันจนกดผิด หรือข้อความสีเทาอ่อนบนพื้นขาว ปัญหาเหล่านี้ทำให้ เว็บไซต์ที่ทุกคนใช้ได้ กลายเป็นเว็บที่บางคนใช้ไม่ได้ และคนกลุ่มนั้นมักปิดหน้าไปโดยไม่บอกคุณ บทความนี้อธิบาย accessibility พื้นฐาน 6 ข้อที่ธุรกิจทั่วไปทำได้ พร้อมวิธีตรวจด้วยตัวเอง
Accessibility คืออะไร ทำไมธุรกิจควรสนใจ
Accessibility (มักย่อว่า a11y) คือการออกแบบเว็บให้คนที่มีข้อจำกัดต่างกันใช้งานได้ ไม่ว่าจะสายตาไม่ดี ตาบอดสี มือไม่มั่นคง หรือใช้โปรแกรมอ่านหน้าจอ มาตรฐานที่ใช้อ้างอิงกันทั่วโลกคือ WCAG ซึ่งแบ่งเป็นหลายระดับ แต่ธุรกิจส่วนใหญ่เริ่มจากพื้นฐานก็เห็นผลแล้ว
หลายคนคิดว่าเรื่องนี้เกี่ยวกับคนกลุ่มเล็ก ๆ แต่จริง ๆ ทุกคนเคยมีข้อจำกัดชั่วคราว เช่น อ่านมือถือกลางแดด ถือของมือเดียว หรือลืมแว่น เว็บที่ใช้ง่ายสำหรับคนที่มีข้อจำกัด มักใช้ง่ายขึ้นสำหรับทุกคน
ประโยชน์ที่ธุรกิจได้โดยตรง
- ผู้สูงอายุ ซึ่งเป็นลูกค้าสำคัญของคลินิก ประกัน และสินค้าสุขภาพ อ่านและกดได้สะดวก
- ลูกค้าไม่หลุดกลางทางเพราะหาปุ่มไม่เจอหรืออ่านไม่ออก
- หลายข้อทับซ้อนกับสิ่งที่ Google ใช้ประเมินคุณภาพหน้า เช่น ข้อความ alt โครงสร้างหัวข้อ และการใช้งานบนมือถือ
พื้นฐาน 6 ข้อของเว็บไซต์ที่ทุกคนใช้ได้
1. ตัวหนังสืออ่านง่าย
ใช้ขนาดตัวอักษรเนื้อหาที่อ่านสบายบนมือถือโดยไม่ต้องซูม ภาษาไทยมีสระและวรรณยุกต์ซ้อนบนล่าง จึงควรเว้นระยะบรรทัดให้โปร่งกว่าภาษาอังกฤษ เลือกฟอนต์ที่มีหัว หรือฟอนต์ไม่มีหัวที่ออกแบบมาให้อ่านง่าย และหลีกเลี่ยงฟอนต์ตกแต่งในเนื้อหายาว
2. สีตัดกันชัดเจน
ข้อความต้องเด่นจากพื้นหลังพอ สีเทาอ่อนบนขาวดูทันสมัย แต่หลายคนอ่านไม่ออก นอกจากนี้ อย่าใช้สีอย่างเดียวในการสื่อความหมาย เช่น ช่องที่กรอกผิดเป็นสีแดง ควรมีข้อความบอกด้วย เพราะคนตาบอดสีแดงเขียวอาจแยกไม่ออก
3. รูปภาพมีข้อความ alt
ข้อความ alt คือคำอธิบายรูปที่โปรแกรมอ่านหน้าจออ่านให้ผู้พิการทางสายตาฟัง และ Google ใช้ทำความเข้าใจรูป เขียนสั้น ๆ ว่ารูปแสดงอะไร เช่น "ห้องทำฟันที่คลินิกสาขาบางนา" รูปที่ใช้ตกแต่งอย่างเดียวให้เว้น alt ว่างไว้
4. ปุ่มและลิงก์ใหญ่พอ
ปุ่มบนมือถือต้องกดได้ด้วยนิ้วโดยไม่โดนปุ่มข้าง ๆ เว้นระยะระหว่างลิงก์ให้พอ และเขียนข้อความบนปุ่มให้บอกว่ากดแล้วจะเกิดอะไร เช่น "นัดหมายคิว" ดีกว่า "คลิกที่นี่" รายละเอียดเรื่องการใช้งานบนมือถือ อ่านต่อได้ใน เว็บไซต์รองรับมือถือ
5. ใช้คีย์บอร์ดได้
ลองกดปุ่ม Tab บนคอมพิวเตอร์ ต้องเลื่อนไปทีละลิงก์และปุ่มได้ตามลำดับ และต้องเห็นกรอบบอกว่าตอนนี้อยู่ที่ไหน คนที่ใช้เมาส์ไม่ได้และผู้ใช้โปรแกรมอ่านหน้าจอพึ่งการใช้งานแบบนี้
6. โครงสร้างหัวข้อเป็นลำดับ
หน้าเว็บควรมีหัวข้อหลักเดียว แล้วมีหัวข้อย่อยเรียงลำดับ ไม่ข้ามระดับเพียงเพราะอยากได้ตัวอักษรขนาดหนึ่ง โครงสร้างแบบนี้ช่วยทั้งโปรแกรมอ่านหน้าจอและช่วยให้ Google เข้าใจเนื้อหา
เช็กลิสต์ตรวจเว็บด้วยตัวเองใน 10 นาที
| สิ่งที่ตรวจ | วิธีตรวจ | ผ่านเมื่อ |
|---|---|---|
| ขนาดตัวอักษร | เปิดเว็บบนมือถือ อ่านเนื้อหา | อ่านได้โดยไม่ต้องซูม |
| สีตัดกัน | เปิดมือถือกลางแจ้ง | อ่านข้อความได้ทุกส่วน |
| ข้อความ alt | ใช้เครื่องมือตรวจในเบราว์เซอร์ | รูปสำคัญมี alt ทุกรูป |
| ปุ่ม | กดปุ่มหลักด้วยนิ้วโป้ง | ไม่กดพลาดไปปุ่มอื่น |
| คีย์บอร์ด | กด Tab ไล่ทั้งหน้า | เห็นตำแหน่งและไปถึงทุกปุ่ม |
| ฟอร์ม | กรอกผิดโดยตั้งใจ | มีข้อความบอกว่าผิดตรงไหน |
ถ้าอยากได้รายงานเพิ่ม เครื่องมือ Lighthouse ใน Chrome และ PageSpeed Insights มีหมวดตรวจ accessibility ให้ฟรี คะแนนเป็นแค่จุดเริ่ม เพราะเครื่องมืออัตโนมัติตรวจได้ไม่ครบทุกเรื่อง การลองใช้จริงยังสำคัญที่สุด
Accessibility กับ SEO เกี่ยวกันอย่างไร
Google ไม่ได้ใช้คะแนน accessibility เป็นปัจจัยอันดับตรง ๆ แต่หลายสิ่งที่ทำเพื่อ accessibility คือสิ่งเดียวกับที่ช่วย SEO
- ข้อความ alt ช่วยให้รูปถูกค้นเจอใน Google รูปภาพ
- หัวข้อเป็นลำดับช่วยให้ Google เข้าใจว่าหน้านี้พูดเรื่องอะไร
- ข้อความลิงก์ที่สื่อความหมายช่วยบอกว่าหน้าปลายทางเกี่ยวกับอะไร
- หน้าที่อ่านง่ายทำให้คนอยู่นานขึ้นและติดต่อมากขึ้น ซึ่งเป็นเป้าหมายจริงของเว็บธุรกิจ
เริ่มจากตรงไหนดี
ถ้าเว็บมีอยู่แล้ว เริ่มจากหน้าที่คนเข้าเยอะที่สุดและหน้าที่มีปุ่มติดต่อ แก้ขนาดตัวอักษร สี และปุ่มก่อน เพราะเห็นผลชัดที่สุด ถ้ากำลังจะทำเว็บใหม่ ให้ระบุเรื่องนี้ในบรีฟตั้งแต่ต้น การออกแบบให้ถูกตั้งแต่แรกถูกกว่าการแก้ทีหลังมาก ทีม ออกแบบเว็บไซต์ ของเราใส่เรื่องเหล่านี้เป็นมาตรฐานในทุกงาน
สรุป
เว็บไซต์ที่ทุกคนใช้ได้ไม่ใช่เรื่องยากหรือแพง เริ่มจากตัวหนังสืออ่านง่าย สีตัดกัน alt รูป ปุ่มใหญ่พอ ใช้คีย์บอร์ดได้ และหัวข้อเป็นลำดับ หกข้อนี้ช่วยให้ลูกค้าทุกวัยใช้เว็บได้สะดวก ลดคนหลุดก่อนติดต่อ และเสริมพื้นฐาน SEO ไปพร้อมกัน
อยากให้ช่วยดูว่าเว็บของคุณใช้งานง่ายแค่ไหน ปรึกษาเราฟรี เราบอกจุดที่ควรแก้ก่อนให้