เน้นสไตล์

Rob Dodson

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

ถ้าสัญญาณบอกสถานะโฟกัสเริ่มต้นของเบราว์เซอร์ขัดแย้งกับการออกแบบของคุณ คุณสามารถใช้ 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 {
  …
}