ตัวบ่งชี้โฟกัส (มักแสดงด้วย "วงแหวนโฟกัส") จะระบุองค์ประกอบที่โฟกัสอยู่ในปัจจุบันบนหน้าของคุณ สำหรับผู้ใช้ที่ใช้เมาส์ไม่ได้ ตัวระบุนี้มีความสำคัญอย่างยิ่ง เนื่องจากจะทำหน้าที่เป็นตัวยึดสำหรับเคอร์เซอร์เมาส์
หากสัญญาณบอกสถานะโฟกัสเริ่มต้นของเบราว์เซอร์ขัดแย้งกับการออกแบบ คุณสามารถใช้ 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 {
…
}