เป้าหมายการแตะที่เข้าถึงได้

Dave Gash

Meggin Kearney

Patrick H. Lauke

Rachel Andrew

Rob Dodson

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

ขนาดเป้าหมายการสัมผัสขั้นต่ำที่แนะนำคือประมาณ 48 พิกเซลโดยแยกเป็นอิสระต่ออุปกรณ์ บนเว็บไซต์ที่มีวิวพอร์ตอุปกรณ์เคลื่อนที่ที่ตั้งค่าไว้อย่างเหมาะสม ตัวอย่างเช่น ในขณะที่ไอคอนอาจมีความกว้างและความสูงเพียง 24px ใช้ระยะห่างจากขอบเพิ่มเติมเพื่อทำให้ขนาดเป้าหมายการแตะมีขนาดสูงสุด 48 พิกเซลได้ โดยพื้นที่ขนาด 48x48 พิกเซลจะมีขนาดประมาณ 9 มม. ซึ่งขนาดประมาณพื้นที่ นิ้วมือของคน

ในการสาธิต เราได้เพิ่ม Padding ให้กับลิงก์ทั้งหมดเพื่อให้เป็นไปตามขนาดขั้นต่ำ

เป้าหมายการสัมผัสควรเว้นระยะห่างประมาณ 8 พิกเซล ทั้งแนวนอนและแนวตั้ง เพื่อไม่ให้นิ้วของผู้ใช้ที่กดเป้าหมายการแตะครั้งหนึ่งไปสัมผัสเป้าหมายการแตะอื่นโดยไม่ตั้งใจ

การทดสอบเป้าหมายการสัมผัส

หากเป้าหมายเป็นข้อความและคุณใช้ค่าสัมพัทธ์ เช่น em หรือ rem เพื่อกำหนดขนาดข้อความและระยะห่างจากขอบทั้งหมด คุณสามารถใช้เครื่องมือสำหรับนักพัฒนาเว็บเพื่อตรวจสอบว่าค่าที่คำนวณแล้วของพื้นที่นั้นมากพอ ในตัวอย่างด้านล่าง ฉันใช้ em สำหรับข้อความและระยะห่างจากขอบ

ตรวจสอบ a ของลิงก์ และใน Chrome DevTools ให้เปลี่ยนเป็นแผงที่คำนวณ ซึ่งคุณจะตรวจสอบส่วนต่างๆ ในกล่องได้ และดูว่าความละเอียดพิกเซลอยู่ที่เท่าใด ใน Firefox DevTools จะมีแผงการออกแบบ ในแผงดังกล่าว คุณจะเห็นขนาดจริงขององค์ประกอบที่ตรวจสอบแล้ว

การใช้คำค้นหาสื่อเพื่อตรวจหาการใช้งานหน้าจอสัมผัส

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

หนึ่งในฟีเจอร์สื่อที่เราทดสอบได้ด้วยคำค้นหาสื่อ อินพุตหลักของผู้ใช้เป็นหน้าจอสัมผัส (pointer) หรือไม่ และ อินพุตใดๆ ที่ตรวจพบในปัจจุบันเป็นหน้าจอสัมผัส (any-pointer) หรือไม่ ฟีเจอร์ pointer และ any-pointer จะแสดงผล fine หรือ coarse ตัวชี้แบบละเอียดจะเป็นผู้ที่ใช้เมาส์หรือแทร็กแพด แม้ว่าเมาส์จะเชื่อมต่อกับโทรศัพท์ผ่านบลูทูธก็ตาม ตัวชี้ coarse บ่งชี้ถึงหน้าจอสัมผัส ซึ่งอาจเป็นอุปกรณ์เคลื่อนที่ แต่ก็อาจเป็นหน้าจอแล็ปท็อปหรือแท็บเล็ตขนาดใหญ่

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

.container a {
  padding: .2em;
}

@media (any-pointer: coarse) {
  .container a {
    padding: .8em;
  }
}

คุณดูข้อมูลเพิ่มเติมเกี่ยวกับฟีเจอร์สื่อการโต้ตอบ เช่น ตัวชี้ ในบทความพื้นฐานการออกแบบเว็บที่ตอบสนองตามอุปกรณ์