The CSS Podcast - 018: Focus
ในหน้าเว็บ คุณจะคลิกลิงก์ที่จะพาผู้ใช้ไปยังเนื้อหาหลักของเว็บไซต์ ลิงก์เหล่านี้มักเรียกว่าลิงก์ข้ามหรือลิงก์แอตทริบิวต์ เมื่อเปิดใช้งานลิงก์นั้นด้วยแป้นพิมพ์โดยใช้ปุ่ม tab และ enter คอนเทนเนอร์เนื้อหาหลักจะมีวงโฟกัสล้อมรอบ ทำไมจึงเป็นเช่นนั้น
เนื่องจาก <main>
มีค่าแอตทริบิวต์ tabindex="-1"
ซึ่งหมายความว่าจะมุ่งเน้นแบบเป็นโปรแกรมได้
เมื่อมีการกําหนดเป้าหมาย <main>
เนื่องจาก #main-content
ในแถบ URL ของเบราว์เซอร์ตรงกับ id
<main>
จึงได้รับการโฟกัสแบบเป็นโปรแกรม
บางครั้งคุณอาจอยากนำสไตล์โฟกัสออกในสถานการณ์เหล่านี้ แต่การจัดการโฟกัสอย่างเหมาะสมและรอบคอบจะช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีและเข้าถึงได้ง่าย
และยังเป็นพื้นที่ที่ดีในการเพิ่มความสนใจในการโต้ตอบ
เหตุใดโฟกัสจึงสำคัญ
ในฐานะนักพัฒนาเว็บ คุณมีหน้าที่ทำให้เว็บไซต์เข้าถึงได้และครอบคลุมทุกกลุ่ม การสร้างสถานะโฟกัสที่เข้าถึงได้ด้วย CSS เป็นส่วนหนึ่งของความรับผิดชอบนี้
รูปแบบโฟกัสจะช่วยผู้ที่ใช้อุปกรณ์ เช่น แป้นพิมพ์หรือการควบคุมด้วยสวิตช์ในการไปยังส่วนต่างๆ และโต้ตอบกับเว็บไซต์ หากองค์ประกอบมีโฟกัสและไม่มีภาพบ่งชี้ ผู้ใช้อาจติดตามสิ่งที่โฟกัสอยู่ไม่ได้ ซึ่งอาจทำให้เกิดปัญหาในการไปยังส่วนต่างๆ และส่งผลให้เกิดลักษณะการทำงานที่ไม่ต้องการ เช่น มีการไปยังลิงก์ที่ไม่ถูกต้อง
วิธีที่องค์ประกอบได้รับการโฟกัส
องค์ประกอบบางอย่างโฟกัสได้โดยอัตโนมัติ โดยเป็นองค์ประกอบที่ยอมรับการโต้ตอบและการป้อนข้อมูล เช่น <a>
, <button>
, <input>
และ <select>
กล่าวโดยย่อคือ องค์ประกอบแบบฟอร์ม ปุ่ม และลิงก์ทั้งหมด
โดยปกติแล้ว คุณสามารถไปยังองค์ประกอบที่โฟกัสได้ของเว็บไซต์โดยใช้แป้น tab เพื่อเลื่อนไปข้างหน้าในหน้าเว็บ และ shift + tab เพื่อเลื่อนกลับ
นอกจากนี้ยังมีแอตทริบิวต์ HTML ที่เรียกว่า tabindex
ซึ่งช่วยให้คุณเปลี่ยนดัชนีแท็บ ซึ่งเป็นลำดับการโฟกัสองค์ประกอบ ทุกครั้งที่มีคนกดแป้น tab หรือโฟกัสมีการเปลี่ยนแฮชใน URL หรือตามเหตุการณ์ JavaScript
หากตั้งค่า tabindex
ในองค์ประกอบ HTML เป็น 0
องค์ประกอบดังกล่าวจะได้รับโฟกัสผ่านคีย์ tab และจะยึดตามดัชนีแท็บส่วนกลาง ซึ่งกำหนดโดยลําดับแหล่งที่มาของเอกสาร
หากคุณตั้งค่า tabindex
เป็น -1
องค์ประกอบจะได้รับโฟกัสแบบเป็นโปรแกรมเท่านั้น ซึ่งหมายความว่าจะได้รับโฟกัสก็ต่อเมื่อมีเหตุการณ์ JavaScript เกิดขึ้นหรือมีการเปลี่ยนแปลงแฮช (ตรงกับ id
ขององค์ประกอบใน URL)
หากคุณตั้งค่า tabindex
เป็นค่าที่สูงกว่า 0
ระบบจะนำแท็บนั้นออกจากดัชนีแท็บส่วนกลางซึ่งกำหนดโดยลําดับแหล่งที่มาของเอกสาร
ตอนนี้ระบบจะกำหนดลำดับแท็บด้วยค่าของ 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 เฉพาะในกรณีที่จำเป็นเท่านั้น - ตรวจสอบว่าสถานะโฟกัสมีความชัดเจนมากเมื่อเทียบกับสถานะเริ่มต้น
ตรวจสอบความเข้าใจ
ทดสอบความรู้เกี่ยวกับการจดจ่อ
ข้อใดต่อไปนี้เป็นองค์ประกอบที่โฟกัสได้โดยอัตโนมัติ
<output>
<select>
<input>
<button>
<p>
<a>
อุปกรณ์อินพุตใดต่อไปนี้ที่ตั้งค่าโฟกัสได้