โฟกัสที่มองเห็นได้: อย่าซ่อนเส้นขอบ

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

โดยค่าเริ่มต้น เบราว์เซอร์จะวาด เส้นกรอบโฟกัส รอบองค์ประกอบที่ทำงานอยู่ขณะที่คุณกด Tab นี่คือเครื่องหมายบอกตำแหน่งที่มีมาให้ในตัว

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

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

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

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

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

ระวังการใช้ overflow hidden กับองค์ประกอบแม่ เพราะอาจตัดเส้นกรอบโฟกัส ทำให้ขอบด้านล่างหายไปโดยไม่มีใครสังเกต

ใช้ outline-offset เพื่อดันวงแหวนออกจากองค์ประกอบ ช่องว่างเล็กน้อยทำให้สังเกตตัวบ่งชี้ได้ง่ายขึ้นมาก

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

การทดสอบที่รวดเร็วที่สุดไม่เสียค่าใช้จ่ายใด ๆ: กด Tab ไปทั่วหน้า หากคุณเคยหลงทางและไม่รู้ว่าโฟกัสอยู่ที่ใด ตัวบ่งชี้ของคุณยังต้องปรับปรุง

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