วิธีแก้ 4 ข้อผิดพลาด Lighthouse Accessibility ยอดฮิต
เจาะลึก 4 ปัญหาการเข้าถึงเว็บไซต์ที่มักล้มเหลวใน Lighthouse และ axe ตลอดเวลา พร้อมวิธีแก้ไขโค้ดอย่างรวดเร็วและตรงจุด
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
- Lighthouse และ axe มักตรวจพบข้อผิดพลาดด้านการเข้าถึง 4 ข้อเดิมๆ ซ้ำซากบนเว็บไซต์
- ปัญหาหลักประกอบด้วย ความตัดกันของสี, ข้อความอธิบายรูปภาพ, ชื่อลิงก์หรือปุ่ม และป้ายกำกับฟอร์ม
- ข้อผิดพลาดกลุ่มนี้แก้ไขได้ง่ายที่สุดและใช้เวลาลงมือทำน้อยมากในโค้ด
- การผ่านการตรวจอัตโนมัติไม่ได้แปลว่าเว็บไซต์ปฏิบัติตามมาตรฐาน WCAG อย่างสมบูรณ์ทางกฎหมาย
หากคุณรันเครื่องมือทดสอบอย่าง Lighthouse หรือ axe DevTools บนเว็บไซต์การตลาด ร้านค้าออนไลน์ หรือบล็อกทั่วไป คุณมักจะพบข้อผิดพลาดเดิมๆ วนเวียนซ้ำซากอยู่ 4 รายการ ได้แก่ color-contrast, image-alt, link-name / button-name และ label ซึ่งข้อดีคือปัญหาเหล่านี้แก้ไขได้ง่ายและใช้ต้นทุนต่ำที่สุดในบรรดาข้อผิดพลาดทั้งหมด
คุณสามารถเรียกใช้งานเครื่องมือผ่านคอมมานด์ไลน์เพื่อตรวจสอบเฉพาะหมวดการเข้าถึงได้ เช่น การใช้คำสั่ง npx lighthouse บน URL ที่ต้องการ หรือรันผ่าน axe-core CLI รวมไปถึงการคัดลอกสคริปต์เพื่อรันตรงในคอนโซลของ DevTools ซึ่งจะช่วยแสดงรหัสกฎ (rule ids) ที่ตรงกับปัญหาบนหน้าเว็บของคุณ
จุดที่ข้อผิดพลาดเหล่านี้มักซ่อนอยู่ ได้แก่ ข้อความส่วนท้ายเว็บไซต์สีเทา (footer) ข้อความสีขาวบนปุ่มสีเหลืองหรือส้ม ข้อความที่ทับอยู่บนภาพฮีโร่โดยไม่มีเลเยอร์สีทับ และช่องกรอกข้อความ (placeholder) ที่ถูกนำมาใช้แทนคำแนะนำในการพิมพ์
ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง
ในส่วนของกฎแต่ละข้อมีรายละเอียดและการแก้ไขที่ชัดเจนตามมาตรฐานสากล:
- color-contrast: ปัญหาความตัดกันของสีที่ไม่เพียงพอต่อการมองเห็น
- image-alt (WCAG 1.1.1): ต้องระบุคำอธิบายว่าภาพสื่อถึงอะไรในบริบทนั้น ส่วนภาพตกแต่งบริสุทธิ์ต้องใส่ alt="" ว่างไว้เพื่อให้โปรแกรมอ่านจอภาพข้ามไป
- link-name / button-name (WCAG 2.4.4 และ 4.1.2): ปุ่มที่มีแต่ไอคอน เช่น ไอคอนโซเชียล เมนูแฮมเบอร์เกอร์ ปุ่มปิด หรือแว่นขยาย จะถูกอ่านออกเสียงแค่คำว่าลิงก์หรือปุ่มเฉยๆ
- label (WCAG 1.3.1 และ 3.3.2): ช่องกรอกข้อความไม่ใช่ป้ายกำกับ เพราะข้อความใน placeholder จะหายไปเมื่อเริ่มพิมพ์และมักมีค่าความตัดกันต่ำ
การทำเว็บให้เข้าถึงได้ (Accessibility) ไม่เพียงแต่ช่วยผู้มีความบกพร่องทางสายตา แต่ยังยกระดับประสบการณ์ใช้งานของทุกคน (UX) และส่งผลดีต่อคะแนน SEO ของเว็บไซต์ในภาพรวม การแก้ไขข้อผิดพลาดพื้นฐานเหล่านี้จึงเป็นการลงทุนที่คุ้มค่าที่สุดสำหรับนักพัฒนาเว็บทุกคน
นอกจากนี้ยังมีคู่มืออ้างอิงความยาว 11 หน้าครอบคลุม 24 กฎทั่วไปของ Lighthouse และ axe พร้อมโค้ดตัวสำเร็จรูปให้คัดลอกใช้งาน จำหน่ายในราคา 9 ดอลลาร์บนแพลตฟอร์ม Gumroad สำหรับผู้ที่สนใจศึกษาเพิ่มเติม แต่เนื้อหาพื้นฐานทั้งหมดข้างต้นสามารถนำไปปรับใช้ได้ทันทีโดยไม่ต้องซื้อคู่มือเพิ่มเติม
ที่มา: Dev.to
พบข้อมูลผิดพลาดในบทความนี้? แจ้งปัญหาบทความนี้
ความคิดเห็น
แสดงความคิดเห็น