กด Escape เพื่อปิดและคืนโฟกัส

โมดัลที่ออกไม่ได้ถือเป็นกับดัก ผู้ใช้คาดหวังวิธี ปิด ที่รวดเร็วและเชื่อถือได้ โดยไม่ต้องค้นหาปุ่มเล็ก ๆ

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

dialog แบบเนทีฟที่เปิดด้วย showModal() จะปิดเมื่อกด Escape โดยอัตโนมัติ และส่งเหตุการณ์ยกเลิกที่คุณสามารถรับฟังได้หากจำเป็น

สำหรับโมดัลแบบกำหนดเอง ให้รับฟังเหตุการณ์ keydown และปิดเมื่อปุ่มเป็น Escape แม้จะใช้เพียงไม่กี่บรรทัด แต่ห้ามข้ามขั้นตอนนี้

ก่อนเปิดโมดัล ให้บันทึกองค์ประกอบที่มีโฟกัสอยู่ document.activeElement คือทริกเกอร์ที่คุณจะกลับไปหาในภายหลัง

เมื่อโมดัลปิด ให้ส่งโฟกัสกลับไปยังทริกเกอร์ที่บันทึกไว้ ขั้นตอน คืนโฟกัส นี้ทำให้การปิดดูต่อเนื่องเป็นธรรมชาติ

หากไม่คืนโฟกัส โฟกัสจะกระโดดไปด้านบนสุดของหน้า ผู้ใช้จะเสียตำแหน่งเดิมและต้องกด Tab กลับมาใหม่ทั้งหมด ทั้งน่าหงุดหงิดและป้องกันได้ 😕

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

โมดัลจำนวนมากปิดลงเมื่อคลิก ฉากหลัง ที่ถูกทำให้มืดลงด้วย นับเป็นส่วนเสริมที่ดี แต่ต้องไม่ใช้แทน Escape หรือปุ่มปิด

สำหรับกล่องโต้ตอบที่ยืนยันสิ่งเสี่ยง คุณอาจปิดการ ยกเลิก อย่างรวดเร็ว เพื่อไม่ให้การกด Escape โดยไม่ตั้งใจข้ามตัวเลือกสำคัญ

เปิดด้วยแป้นพิมพ์ กด Escape และตรวจสอบว่าโฟกัสกลับไปยังทริกเกอร์เดิมที่แน่นอน การวนกลับครบรอบนี้คือเป้าหมาย ✅

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