พอดแคสต์ CSS - 018: Focus
ในหน้าเว็บ คุณคลิกลิงก์ที่พาผู้ใช้ไปยังเนื้อหาหลักของเว็บไซต์ ซึ่งมักเรียกว่าลิงก์ข้าม หรือลิงก์ Anchor เมื่อแป้นพิมพ์เปิดใช้งานลิงก์ดังกล่าวโดยใช้ปุ่ม tab และ Enter คอนเทนเนอร์เนื้อหาหลักจะมีวงแหวนโฟกัสล้อมรอบ ทำไมจึงเป็นเช่นนั้น
เนื่องจาก <main>
มีค่าแอตทริบิวต์ tabindex="-1"
ซึ่งหมายความว่าคุณจะโฟกัสแบบเป็นโปรแกรมได้
เมื่อกำหนดเป้าหมาย <main>
เนื่องจาก #main-content
ในแถบ URL ของเบราว์เซอร์ตรงกับ id
จึงจะได้รับการมุ่งเน้นแบบเป็นโปรแกรม
คุณอาจจะต้องนำรูปแบบการโฟกัสในสถานการณ์เหล่านี้ออก แต่การจดจ่ออย่างเหมาะสมและด้วยความเอาใจใส่จะช่วยสร้างประสบการณ์ของผู้ใช้ที่ดี เข้าถึงได้
และเข้าถึงได้
และยังเหมาะสำหรับการเพิ่มความสนใจให้กับการโต้ตอบอีกด้วย
เหตุใดการโฟกัสจึงสำคัญ
ในฐานะนักพัฒนาเว็บ คุณมีหน้าที่ทำให้เว็บไซต์เข้าถึงได้และเปิดกว้างสำหรับทุกคน การสร้างสถานะโฟกัสที่เข้าถึงได้ด้วย CSS เป็นส่วนหนึ่งของความรับผิดชอบนี้
รูปแบบการโฟกัสช่วยให้ผู้ที่ใช้อุปกรณ์ เช่น แป้นพิมพ์หรือสวิตช์ควบคุม ไปยังส่วนต่างๆ และโต้ตอบกับเว็บไซต์ได้ หากองค์ประกอบมีโฟกัสและไม่มีภาพบ่งชี้ ผู้ใช้อาจสูญเสียการติดตามสิ่งที่โฟกัสอยู่ ซึ่งอาจสร้างปัญหาการนำทางและส่งผลให้เกิดลักษณะการทำงานที่ไม่พึงประสงค์ เช่น หากมีการเปิดลิงก์ที่ไม่ถูกต้อง
องค์ประกอบโฟกัสอย่างไร
องค์ประกอบบางอย่างจะโฟกัสได้โดยอัตโนมัติ ซึ่งเป็นองค์ประกอบที่ยอมรับการโต้ตอบและการป้อนข้อมูล เช่น <a>
, <button>
, <input>
และ <select>
กล่าวสั้นๆ คือ องค์ประกอบของแบบฟอร์ม ปุ่ม และลิงก์ทั้งหมด
โดยปกติคุณจะไปยังส่วนต่างๆ ในองค์ประกอบที่โฟกัสได้ของเว็บไซต์โดยใช้แป้น Tab เพื่อเลื่อนไปข้างหน้าในหน้าดังกล่าว และใช้ shift + tab เพื่อย้อนกลับ
นอกจากนี้ยังมีแอตทริบิวต์ HTML ที่เรียกว่า tabindex
ซึ่งให้คุณเปลี่ยนแปลงดัชนีแท็บ (ซึ่งเป็นลำดับการโฟกัสองค์ประกอบ) ทุกครั้งที่มีคนกดคีย์ tab หรือโฟกัสเปลี่ยนไปเมื่อมีการเปลี่ยนแฮชใน URL หรือโดยเหตุการณ์ JavaScript
หาก tabindex
ในองค์ประกอบ HTML ตั้งค่าเป็น 0
องค์ประกอบจะได้รับโฟกัสผ่านคีย์ tab และใช้ดัชนีแท็บส่วนกลางซึ่งกำหนดโดยลำดับแหล่งที่มาของเอกสาร
หากตั้งค่า tabindex
เป็น -1
ระบบจะรับโฟกัสแบบเป็นโปรแกรมได้เท่านั้น ซึ่งหมายความว่าจะมีเหตุการณ์ JavaScript เกิดขึ้นหรือมีการเปลี่ยนแปลงแฮช (ตรงกับ id
ขององค์ประกอบใน URL) เท่านั้น
หากคุณตั้งค่า tabindex
เป็นค่าที่สูงกว่า 0
ระบบจะนำค่าดังกล่าวออกจากดัชนีแท็บส่วนกลางซึ่งกำหนดโดยลำดับแหล่งที่มาของเอกสาร
ตอนนี้ลำดับการกด Tab จะกำหนดโดยค่าของ tabindex
ดังนั้นองค์ประกอบที่มี tabindex="1"
จะได้รับโฟกัสก่อนองค์ประกอบที่มี tabindex="2"
เป็นต้น
โฟกัสการจัดรูปแบบ
ลักษณะการทำงานเริ่มต้นของเบราว์เซอร์เมื่อองค์ประกอบได้รับการโฟกัสคือการนำเสนอวงแหวนโฟกัส วงแหวนโฟกัสนี้จะแตกต่างกันไปตามเบราว์เซอร์และระบบปฏิบัติการ
ลักษณะการทำงานนี้จะเปลี่ยนแปลงได้ด้วย CSS โดยใช้คลาส Pseudo-class :focus
, :focus-within
และ :focus-visible
ที่คุณได้เรียนรู้ในบทเรียน Pseudo-class
สิ่งสำคัญคือต้องตั้งค่ารูปแบบโฟกัสที่มีคอนทราสต์กับรูปแบบเริ่มต้นขององค์ประกอบ
ตัวอย่างเช่น แนวทางที่ใช้โดยทั่วไปคือการใช้พร็อพเพอร์ตี้ outline
a:focus {
outline: 2px solid slateblue;
}
พร็อพเพอร์ตี้ outline
อาจอยู่ใกล้กับข้อความของลิงก์มากเกินไป แต่พร็อพเพอร์ตี้ outline-offset
ช่วยในเรื่องนี้ได้ เนื่องจากจะเพิ่มภาพ padding
เพิ่มเติมโดยไม่ส่งผลกระทบต่อขนาดเรขาคณิตที่องค์ประกอบเติม
ค่าจำนวนบวกสำหรับ outline-offset
จะดันเค้าร่างออกไป
ส่วนค่าลบจะดึงขอบด้านในเข้ามา
ขณะนี้ในบางเบราว์เซอร์
หากตั้งค่า border-radius
ในองค์ประกอบและใช้ outline
ก็จะไม่ตรงกัน เนื่องจากเส้นขอบจะมีมุมแหลม
ด้วยเหตุนี้ เราจึงอยากใช้ box-shadow
ที่มีรัศมีการเบลอขนาดเล็กเพราะคลิป box-shadow
ตรงกับรูปร่าง เพื่อเป็นแบรนด์ border-radius
แต่รูปแบบนี้จะไม่แสดงในโหมดคอนทราสต์สูงของ Windows
เนื่องจากโหมดคอนทราสต์สูงของ Windows จะไม่ใช้เงา และมักจะไม่สนใจภาพพื้นหลังเพื่อให้การตั้งค่าที่ผู้ใช้ต้องการมากที่สุด
ข้อมูลสรุป
การสร้างสถานะโฟกัสที่แตกต่างจากสถานะเริ่มต้นขององค์ประกอบเป็นสิ่งที่สำคัญอย่างยิ่ง รูปแบบเบราว์เซอร์เริ่มต้นดำเนินการนี้ให้กับคุณแล้ว แต่หากคุณต้องการเปลี่ยนลักษณะการทำงานนี้ โปรดจดจำสิ่งต่อไปนี้
- หลีกเลี่ยงการใช้
outline: none
ในองค์ประกอบที่โฟกัสแป้นพิมพ์ได้ - หลีกเลี่ยงการแทนที่รูปแบบ
outline
ด้วยbox-shadow
เนื่องจากจะไม่ปรากฏในโหมดคอนทราสต์สูงของ Windows - กำหนดค่าบวกสำหรับ
tabindex
ในองค์ประกอบ HTML เฉพาะในกรณีที่จำเป็นจริงๆ เท่านั้น - ตรวจสอบว่าสถานะโฟกัสชัดเจนมากเมื่อเทียบกับสถานะเริ่มต้น
ตรวจสอบความเข้าใจของคุณ
ทดสอบความรู้ในการโฟกัส
ข้อใดต่อไปนี้เป็นองค์ประกอบที่โฟกัสได้โดยอัตโนมัติ
<a>
<p>
<button>
<input>
<output>
<select>
อุปกรณ์อินพุตใดต่อไปนี้ตั้งโฟกัสได้