โฟกัส

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 ซึ่งเป็นลําดับที่โฟกัสองค์ประกอบ ทุกครั้งที่มีคนกดแป้น Tab หรือโฟกัสเปลี่ยนเมื่อมีการเปลี่ยนแปลงแฮชใน URL หรือเหตุการณ์ JavaScript หากตั้งค่า tabindex ในองค์ประกอบ HTML เป็น 0 องค์ประกอบดังกล่าวจะได้รับโฟกัสผ่านคีย์ tab และจะยึดตามดัชนีแท็บส่วนกลาง ซึ่งกำหนดโดยลําดับแหล่งที่มาของเอกสาร

หากคุณตั้งค่า tabindex เป็น -1 องค์ประกอบจะได้รับโฟกัสแบบเป็นโปรแกรมเท่านั้น ซึ่งหมายความว่าจะได้รับโฟกัสก็ต่อเมื่อมีเหตุการณ์ JavaScript เกิดขึ้นหรือมีการเปลี่ยนแปลงแฮช (ตรงกับ id ขององค์ประกอบใน URL) หากคุณตั้งค่า tabindex เป็นค่าที่สูงกว่า 0 ระบบจะนำแท็บนั้นออกจากดัชนีแท็บส่วนกลางซึ่งกำหนดโดยลําดับแหล่งที่มาของเอกสาร ตอนนี้ลําดับการกด Tab จะกําหนดโดยค่าของ tabindex ดังนั้นองค์ประกอบที่มี tabindex="1" จะได้รับโฟกัสก่อนองค์ประกอบที่มี tabindex="2" เป็นต้น

โฟกัสการจัดรูปแบบ

ลักษณะการทำงานเริ่มต้นของเบราว์เซอร์เมื่อองค์ประกอบได้รับโฟกัสคือการนำเสนอวงแหวนโฟกัส วงโฟกัสนี้แตกต่างกันไปในแต่ละเบราว์เซอร์และระบบปฏิบัติการ

คุณเปลี่ยนลักษณะการทำงานนี้ได้โดยใช้ CSS โดยการใช้คลาสจำลอง :focus, :focus-within และ :focus-visible ที่คุณได้เรียนรู้ในบทเรียนเกี่ยวกับคลาสจำลอง สิ่งสำคัญคือต้องตั้งค่าสไตล์โฟกัสที่ตัดกันกับสไตล์เริ่มต้นขององค์ประกอบ ตัวอย่างเช่น แนวทางที่พบบ่อยคือการใช้พร็อพเพอร์ตี้ 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 เฉพาะในกรณีที่จําเป็นเท่านั้น
• ตรวจสอบว่าสถานะโฟกัสมีความชัดเจนมากเมื่อเทียบกับสถานะเริ่มต้น

ทดสอบความเข้าใจ

ทดสอบความรู้เกี่ยวกับโฟกัส