เครื่องหมายโฟกัสซึ่งมักจะแสดงเป็น "วงแหวนโฟกัส" จะระบุ องค์ประกอบที่โฟกัสในหน้าเว็บ สำหรับผู้ใช้ที่ไม่สามารถหรือไม่อยากใช้เมาส์ ตัวบ่งชี้นี้มีความสำคัญอย่างยิ่ง เนื่องจากทำหน้าที่แทน เคอร์เซอร์เมาส์
หากตัวบ่งชี้โฟกัสเริ่มต้นของเบราว์เซอร์ขัดแย้งกับการออกแบบ คุณสามารถใช้ CSS เพื่อเปลี่ยนรูปแบบได้ อย่าลืมคำนึงถึงผู้ใช้
ใช้ :focus เพื่อแสดงตัวบ่งชี้โฟกัสเสมอ
ระบบจะใช้:focus
คลาสหลอกกับองค์ประกอบที่โฟกัส ไม่ว่าจะเป็นวิธีการป้อนข้อมูล
หรืออุปกรณ์ (เช่น เมาส์ แป้นพิมพ์ หรือสไตลัส) ที่ใช้งานอยู่
ตัวอย่างเช่น <div> ต่อไปนี้มี tabindex ที่ทำให้โฟกัสได้
โดยมีรูปแบบที่กำหนดเองสำหรับสถานะ :focus
div[tabindex="0"]:focus {
outline: 4px dashed orange;
}
ไม่ว่าคุณจะใช้อุปกรณ์ใด <div> จะมีลักษณะเหมือนกันเมื่อโฟกัส
แต่เบราว์เซอร์อาจใช้โฟกัสในลักษณะที่ไม่สอดคล้องกัน องค์ประกอบจะได้รับโฟกัสหรือไม่นั้นขึ้นอยู่กับเบราว์เซอร์และระบบปฏิบัติการ
ตัวอย่างเช่น <button> ต่อไปนี้มี CSS ที่กำหนดเองสำหรับ:focus
สถานะ
button:focus {
outline: 4px dashed orange;
}
หากคลิก <button> ด้วยเมาส์ใน Chrome บน macOS คุณควรเห็น
รูปแบบโฟกัสที่กำหนดเอง อย่างไรก็ตาม คุณจะไม่เห็นสไตล์โฟกัสที่กำหนดเองหาก
คลิก <button> ใน Safari บน macOS เนื่องจากใน
Safari องค์ประกอบจะไม่ได้รับโฟกัสเมื่อคุณคลิก
ลักษณะการทำงานของโฟกัสไม่สอดคล้องกัน ทดสอบหน้าเว็บในอุปกรณ์ต่างๆ และ ด้วยอินพุตต่างๆ เพื่อให้แน่ใจว่าสไตล์โฟกัสเป็นที่ยอมรับของผู้ใช้
ใช้ :focus-visible เพื่อแสดงตัวบ่งชี้โฟกัสเฉพาะบางรายการ
:focus-visible
คลาสจำลองจะใช้เมื่อองค์ประกอบได้รับโฟกัสและเบราว์เซอร์
พิจารณา (ด้วยฮิวริสติก) ว่าการแสดงตัวบ่งชี้โฟกัสจะเป็น
ประโยชน์ต่อผู้ใช้ โดยเฉพาะอย่างยิ่ง หากการโต้ตอบครั้งล่าสุดของผู้ใช้
เป็นการโต้ตอบกับแป้นพิมพ์และไม่มีการกดแป้น Meta, ALT,
OPTION หรือ CONTROL แล้ว :focus-visible จะตรงกัน
ปุ่มในตัวอย่างต่อไปนี้จะแสดงตัวบ่งชี้โฟกัสอย่างเลือกสรร หาก คุณใช้เมาส์คลิก ผลลัพธ์จะแตกต่างจากกรณีที่คุณใช้ แป้นพิมพ์เพื่อไปยังแท็บก่อน
button:focus-visible {
outline: 4px dashed orange;
}
ใช้ :focus-within เพื่อจัดรูปแบบองค์ประกอบหลักขององค์ประกอบที่โฟกัส
ระบบจะใช้คลาสเสมือน
: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 และ
:focus-visible polyfill บล็อกโค้ดแรกแสดงวิธี
การทำงานของ Polyfill และแอปตัวอย่างด้านล่างแสดงตัวอย่างการใช้
Polyfill เพื่อเปลี่ยนตัวบ่งชี้โฟกัสในปุ่ม
/*
This hides the focus indicator if the element receives focus with a
mouse, but it still shows 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 {
...
}