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

Dave Gash

Meggin Kearney

Patrick H. Lauke

Rachel Andrew

Rob Dodson

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

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

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

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

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

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

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

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

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

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

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

.container a {
  padding: .2em;
}

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

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