สแกนด้วย axe DevTools และ Lighthouse

คุณไม่จำเป็นต้องตั้งค่าพิเศษเพื่อเริ่มตรวจสอบ ทั้ง axe DevTools และ Lighthouse ทำงานได้ทันทีใน Chrome โดยสแกนหน้าเว็บที่คุณกำลังเปิดดูอยู่

ส่วนขยาย axe DevTools จะเพิ่มแท็บในเครื่องมือสำหรับนักพัฒนาของเบราว์เซอร์ คลิกครั้งเดียวเพื่อเรียกใช้เครื่องมือ axe-core และแสดงปัญหาด้านการเข้าถึงบนหน้าเว็บ

ผลการค้นหาแต่ละรายการจะระบุ กฎที่ละเมิด แสดงองค์ประกอบที่แน่นอน ประเมินผลกระทบ และเชื่อมโยงไปยังคู่มือวิธีแก้ไข คุณไม่ต้องคาดเดา

axe DevTools สามารถ เน้นองค์ประกอบที่ไม่ผ่านได้โดยตรงบนหน้าเว็บ ทำให้เห็นชัดว่าปุ่มหรือรูปภาพใดเป็นต้นเหตุของคำเตือน

axe ติดป้ายกำกับแต่ละปัญหาด้วยระดับ ผลกระทบ ได้แก่ เล็กน้อย ปานกลาง ร้ายแรง หรือวิกฤต ให้เริ่มแก้ปัญหาระดับวิกฤตและร้ายแรงก่อน เพื่อจัดการอุปสรรคสำคัญที่สุด

Lighthouse มีอยู่ใน Chrome DevTools หมวดการเข้าถึงของเครื่องมือนี้ก็เรียกใช้ axe-core อยู่เบื้องหลัง และให้คะแนนเดียวเต็มหนึ่งร้อย

เปิดแผง Lighthouse เลือก การเข้าถึง แล้วคลิก Analyze page load ภายในไม่กี่วินาที คุณจะได้คะแนนพร้อมรายการการตรวจสอบที่ไม่ผ่านซึ่งจัดกลุ่มไว้

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

คุณสามารถเรียกใช้ Lighthouse นอกเบราว์เซอร์ได้เช่นกัน ติดตั้งด้วย npm แล้วระบุ URL ใดก็ได้เพื่อสร้างรายงานที่แชร์ต่อได้

axe DevTools ให้ รายละเอียดที่ลึกกว่าและกฎแนวทางปฏิบัติที่ดี ส่วน Lighthouse ให้คะแนนอย่างรวดเร็วในหลายหมวด ทั้งสองใช้เครื่องมือ axe-core ร่วมกัน จึงมักให้ผลสอดคล้องกัน

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

ทบทวนว่าเครื่องมือเบราว์เซอร์สองชนิดนี้มีอะไรที่เหมือนกัน

axe DevTools แสดงผลการตรวจสอบโดยละเอียดพร้อมแนวทางแก้ไข ส่วน Lighthouse แสดงคะแนนอย่างรวดเร็ว ทั้งสองทำงานอยู่ในเบราว์เซอร์ของคุณและเรียกใช้ axe-core ดังนั้นการสแกนตั้งแต่เนิ่น ๆ จึงทำได้อย่างง่ายดาย 🔍