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

Dave Gash

Meggin Kearney

Patrick H. Lauke

Rachel Andrew

Rob Dodson

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

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

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

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

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

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

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

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

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

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

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

.container a {
  padding: .2em;
}

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

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