สัญญาณบอกสถานะโฟกัส (มักหมายถึง "วงแหวนโฟกัส") จะระบุถึง องค์ประกอบที่โฟกัส ในหน้าเว็บ สำหรับผู้ใช้ที่ไม่สามารถใช้เมาส์ ของคุณมีความสำคัญมากเพราะเป็นเหมือนรากฐานสำหรับ เคอร์เซอร์เมาส์
ถ้าสัญญาณบอกสถานะโฟกัสเริ่มต้นของเบราว์เซอร์ขัดแย้งกับการออกแบบของคุณ คุณสามารถใช้ CSS เพื่อจัดรูปแบบใหม่ อย่าลืมคำนึงถึงผู้ใช้แป้นพิมพ์ด้วย
ใช้ :focus เพื่อแสดงสัญญาณบอกสถานะโฟกัสเสมอ
:focus
Pseudo-class จะถูกนำมาใช้ทุกครั้งที่องค์ประกอบถูกโฟกัส โดยไม่คำนึงถึงอินพุต
อุปกรณ์ (เมาส์ แป้นพิมพ์ สไตลัส ฯลฯ) หรือวิธีการที่ใช้ในการโฟกัส ตัวอย่างเช่น
<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 เพื่อเลือกแสดงสัญญาณบอกสถานะโฟกัส
ฟิลด์
:focus-visible
Pseudo-Class จะใช้ทุกครั้งที่องค์ประกอบได้รับโฟกัสและ
เบราว์เซอร์จะกำหนดผ่านการเรียนรู้ ซึ่งการแสดงตัวบ่งชี้โฟกัส
เป็นประโยชน์ต่อผู้ใช้ โดยเฉพาะอย่างยิ่ง หากการโต้ตอบล่าสุดของผู้ใช้
ดำเนินการผ่านแป้นพิมพ์และการกดปุ่มไม่มีเมตา ALT / OPTION
หรือ CONTROL คีย์ :focus-visible ก็จะตรงกัน
ปุ่มในตัวอย่างด้านล่างจะเลือกแสดงสัญญาณบอกสถานะโฟกัส ถ้า เมื่อคุณใช้เมาส์คลิก ผลลัพธ์จะแตกต่างจากเมื่อคุณใช้ กด Tab ไปยังแป้นพิมพ์
button:focus-visible {
outline: 4px dashed orange;
}
ใช้ :focus-within เพื่อจัดรูปแบบระดับบนสุดขององค์ประกอบที่โฟกัส
:focus-within
Pseudo-class จะใช้กับเอลิเมนต์เมื่อตัวเอลิเมนต์ได้รับ
หรือเมื่ออีกองค์ประกอบหนึ่งภายในองค์ประกอบนั้นมีโฟกัส
สามารถใช้เพื่อไฮไลต์บริเวณของหน้าเว็บเพื่อวาด ความสนใจของผู้ใช้ต่อพื้นที่นั้น ตัวอย่างเช่น แบบฟอร์มด้านล่างมุ่งเน้นทั้ง เมื่อเลือกแบบฟอร์มเอง และเมื่อปุ่มตัวเลือก ที่เลือกไว้
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 ร่วมกับ
โพลีฟิลล์ :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 {
…
}