- ทำให้ปุ่ม/ลิงก์/การ์ดคลิก แตะ หรือแท็บได้ง่ายขึ้น และมีขนาดที่ช่วยลดการกดพลาด
- คำที่ใช้เรียก "ขนาดพื้นที่เป้าหมาย" นั้นแตกต่างกันไป: Apple ใช้ hit target, Google Material ใช้ Touch target, WAI ใช้ target size, Google Lighthouse ใช้ Tap Target และในคอมมูนิตี้ด้านดีไซน์มักใช้ Clickable Area
- ตามเกณฑ์ WCAG ขนาดพื้นที่เป้าหมายควรมีอย่างน้อย 44 x 44 CSS พิกเซล (Android ใช้ 48x48)
- หากเล็กกว่านี้ วงสัมผัสอาจซ้อนทับกันและทำให้เกิดการคลิกผิดพลาดได้
- ใน Google Design for Driving กำหนดขั้นต่ำไว้ที่ 76dp x 76dp
- ควรมีการแสดงผลตอบสนองของเป้าหมายในเชิงภาพด้วย (เช่น ใส่เส้นขอบให้เอลิเมนต์ หรือสลับสีพื้นหลัง)
- หากเป็นเป้าหมายที่เล็กกว่า 24x24 ควรเว้นระยะห่างให้เพียงพอ (เช่น Line Height: 1.4, Padding: 1rem)
- แม้แต่ ProgressBar ก็ควรเพิ่มความสูงเพื่อให้มีพื้นที่สัมผัสเพียงพอ
- ระหว่างวัตถุที่ทำงานแบบเดียวกัน ควรตัด Dead Target Area ออก
- ใช้ Pseudo elements อย่าง
:before และ :after เพื่อขยายขนาดพื้นที่เป้าหมายให้ใหญ่ขึ้น
- ใน
label ควรใส่ for เสมอเพื่อขยายขนาดพื้นที่เป้าหมาย
- สำหรับ checkbox สามารถใช้
padding-block เพื่อเพิ่มขนาดพื้นที่เป้าหมายได้
- ปุ่มและลิงก์ข้อความก็ควรมี padding
- รายการลิสต์ควรใช้ padding และ
display:flex เพื่อขยายให้ทั้งไอเท็มเป็นพื้นที่กดได้
- วิธีทดสอบขนาดพื้นที่เป้าหมาย: ใช้ DevTools, ใช้ CSS Outline หรือใช้เบราว์เซอร์ Polypane
1 ความคิดเห็น
เนื้อหายอดเยี่ยมมาก พอเห็นชื่อผู้เขียนก็เป็น Ahmad Shadeed นี่เอง ถ้าได้อ่านบทความที่เขาเขียนแล้วก็อดทึ่งไม่ได้จริง ๆ