พอดแคสต์ 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>อุปกรณ์อินพุตใดต่อไปนี้ตั้งโฟกัสได้