เป้าหมายการแตะเป็นพื้นที่บนหน้าเว็บที่ผู้ใช้บนอุปกรณ์แบบสัมผัสสามารถโต้ตอบได้ ปุ่ม ลิงก์ และองค์ประกอบของแบบฟอร์มต่างก็มีเป้าหมายการแตะ
เครื่องมือค้นหาจำนวนมากจะจัดอันดับหน้าเว็บตามความเหมาะกับอุปกรณ์เคลื่อนที่ การทำให้เป้าหมายการแตะใหญ่พอและอยู่ห่างจากกันมากพอจะทำให้หน้าเว็บเหมาะกับอุปกรณ์เคลื่อนที่และเข้าถึงได้มากขึ้น
วิธีที่การตรวจสอบเป้าหมายการแตะของ Lighthouse ไม่สำเร็จ
Lighthouse จะแสดงหน้าเว็บซึ่งมีเป้าหมายการแตะที่ตรงตามเงื่อนไขทั้ง 2 ข้อต่อไปนี้
- เป้าหมายมีขนาดเล็กกว่า 48 x 48 พิกเซล
- อย่างน้อย 25% พื้นที่เป้าหมายภายใน 48 พิกเซลของจุดกึ่งกลางของเป้าหมายทับซ้อนกับเป้าหมายอื่น
เมื่อการตรวจสอบไม่สำเร็จ Lighthouse แสดงผลลัพธ์ในตารางที่มี 3 คอลัมน์ดังนี้
| เป้าหมายการแตะ | เป้าหมายการแตะที่มีขนาดไม่เหมาะสม |
| ขนาด | ขนาดสี่เหลี่ยมรอบทิศทางของเป้าหมาย หน่วยเป็นพิกเซล |
| เป้าหมายซ้อนกัน | เป้าหมายการแตะอื่นๆ (หากมี) อยู่ใกล้เกินไป |
วิธีแก้ไขเป้าหมายการแตะ
ตัวเลือกที่ 1: เพิ่มขนาดของเป้าหมายการแตะที่เล็กเกินไป
เป้าหมายการแตะที่มีขนาด 48 x 48 พิกเซลจะไม่ทำให้การตรวจสอบไม่ผ่าน หากมีองค์ประกอบที่ไม่ควรปรากฏให้ใหญ่ขึ้น (เช่น ไอคอน) ให้ลองเพิ่มพร็อพเพอร์ตี้ padding ดังนี้
padding เพื่อทำให้เป้าหมายการแตะใหญ่ขึ้นโดยไม่เปลี่ยนรูปลักษณ์ขององค์ประกอบ
ตัวเลือกที่ 2: เพิ่มระยะห่างระหว่างเป้าหมายการแตะที่อยู่ใกล้กันเกินไป
โดยใช้พร็อพเพอร์ตี้อย่าง margin พื้นที่ระหว่างเป้าหมายการแตะขนาด 8 px เป็นจุดเริ่มต้นที่ดี
แต่ก็ไม่เพียงพอที่จะผ่านการตรวจสอบ โดยเฉพาะสำหรับเป้าหมายที่มีขนาดเล็กมาก
แหล่งข้อมูล
- เป้าหมายการแตะที่เข้าถึงได้: ข้อมูลเพิ่มเติมเกี่ยวกับวิธีตรวจสอบว่าผู้ใช้ทุกคนเข้าถึงเป้าหมายการแตะได้
- ซอร์สโค้ดของการตรวจสอบเป้าหมายการแตะมีขนาดไม่เหมาะสม