เน้นสไตล์

Rob Dodson

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

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

ใช้ :focus เพื่อแสดงสัญญาณบอกสถานะโฟกัสเสมอ

ระบบจะใช้คลาส Pseudo ของ :focus ทุกครั้งที่มีการโฟกัสองค์ประกอบ โดยไม่คำนึงถึงอุปกรณ์อินพุต (เมาส์ แป้นพิมพ์ สไตลัส ฯลฯ) หรือวิธีการที่ใช้ในการโฟกัสองค์ประกอบ ตัวอย่างเช่น <div> ด้านล่างมี tabindex ซึ่งทำให้โฟกัสได้ และยังมีรูปแบบที่กำหนดเองสำหรับสถานะ :focus ดังนี้

div[tabindex="0"]:focus {
  outline: 4px dashed orange;
}

ไม่ว่าคุณจะใช้เมาส์คลิกหรือแป้นพิมพ์เพื่อกดแท็บ <div> ก็จะมีลักษณะเสมอเหมือนกัน

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

ตัวอย่างเช่น <button> ด้านล่างมีรูปแบบที่กำหนดเองสำหรับสถานะ :focus ด้วย

button:focus {
  outline: 4px dashed orange;
}

หากคลิก <button> ด้วยเมาส์ใน Chrome บน macOS คุณจะเห็นรูปแบบโฟกัสที่กำหนดเอง อย่างไรก็ตาม คุณจะไม่เห็นรูปแบบโฟกัสที่กำหนดเองหากคลิก <button> ใน Safari บน macOS เนื่องจากใน Safari องค์ประกอบไม่ได้รับโฟกัสเมื่อคุณคลิกองค์ประกอบ

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

ใช้ :focus-visible เพื่อเลือกแสดงสัญญาณบอกสถานะโฟกัส

ระบบจะใช้คลาส Pseudo ใหม่ :focus-visible ทุกครั้งที่องค์ประกอบได้รับโฟกัส และเบราว์เซอร์จะกำหนดผ่านการเรียนรู้ว่าการแสดงตัวบ่งชี้โฟกัสมีประโยชน์ต่อผู้ใช้ โดยเฉพาะอย่างยิ่ง หากการโต้ตอบของผู้ใช้ครั้งล่าสุดเกิดขึ้นผ่านแป้นพิมพ์และการกดแป้นไม่มีเมตา, ALT / OPTION หรือแป้น CONTROL ระบบจะแสดง :focus-visible ที่ตรงกัน

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

button:focus-visible {
  outline: 4px dashed orange;
}

ใช้ :focus-within เพื่อจัดรูปแบบระดับบนสุดขององค์ประกอบที่โฟกัส

ระบบจะใช้คลาส Pseudo :focus-within กับองค์ประกอบเมื่อองค์ประกอบได้รับโฟกัสหรือเมื่อองค์ประกอบอื่นภายในองค์ประกอบนั้นได้รับการโฟกัส

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

form:focus-within {
  background: #ffecb3;
}

กรณีที่ควรแสดงสัญญาณบอกสถานะโฟกัส

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

หากคำตอบคือ "ใช่" ตัวควบคุมควรจะแสดงตัวบ่งชี้โฟกัสทุกครั้ง โดยไม่คำนึงถึงอุปกรณ์อินพุตที่ใช้โฟกัส ตัวอย่างที่ดีคือ องค์ประกอบ <input type="text"> ผู้ใช้จะต้องส่งข้อมูลอินพุตไปยังองค์ประกอบผ่านแป้นพิมพ์โดยไม่คำนึงถึงวิธีที่องค์ประกอบอินพุตได้รับโฟกัสในตอนแรก ดังนั้นจึงควรแสดงสัญญาณบอกสถานะโฟกัสเสมอ

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

หลีกเลี่ยงoutline: none

อันที่จริง วิธีการที่เบราว์เซอร์ใช้ตัดสินใจว่าจะใช้ตัวบ่งชี้การโฟกัสเมื่อใดนั้นน่าสับสนมาก การเปลี่ยนรูปลักษณ์ขององค์ประกอบ <button> ด้วย CSS หรือการเพิ่ม tabindex ให้กับองค์ประกอบจะทำให้ลักษณะการทำงานของวงแหวนโฟกัสเริ่มต้นของเบราว์เซอร์เริ่มทำงาน

รูปแบบที่ลดกันบ่อยมากคือการนำตัวบ่งชี้โฟกัสออกโดยใช้ CSS เช่น

/* Don't do this!!! */
:focus {
  outline: none;
}

วิธีที่ดีกว่าในการแก้ปัญหานี้คือการใช้ชุดค่าผสมของ :focus และ Polyfill ของ :focus-visible โค้ดบล็อกแรกด้านล่างแสดงวิธีการทำงานของ Polyfill และแอปตัวอย่างด้านล่างแสดงตัวอย่างการใช้ Polyfill เพื่อเปลี่ยนตัวบ่งชี้โฟกัสบนปุ่ม

/*
  This will hide the focus indicator if the element receives focus via the
  mouse, but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}

/*
  Optionally: Define a strong focus indicator for keyboard focus.
  If you choose to skip this step, then the browser's default focus
  indicator will be displayed instead.
*/
.js-focus-visible .focus-visible {
  …
}