จดจ่อ

พอดแคสต์ CSS - 018: มีสมาธิ

ในหน้าเว็บ คุณคลิกลิงก์ที่จะพาผู้ใช้ไปยังเนื้อหาหลักของเว็บไซต์ ลิงก์เหล่านี้มักเรียกว่าลิงก์ข้ามหรือลิงก์ 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 ระบบจะนำรายการนั้นออกจากดัชนีแท็บส่วนกลาง กำหนดตามลำดับแหล่งที่มาของเอกสาร ตอนนี้ลำดับแท็บจะกำหนดด้วยค่า tabindex ตัวอย่างเช่น องค์ประกอบที่มี tabindex="1" จะได้รับการโฟกัสก่อนองค์ประกอบที่มี tabindex="2"

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

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

ลักษณะการทำงานนี้สามารถเปลี่ยนได้ด้วย CSS กำลังใช้: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 เมื่อจำเป็นเท่านั้น
• ตรวจสอบว่าสถานะโฟกัสชัดเจนมากเมื่อเทียบกับสถานะเริ่มต้น

ตรวจสอบความเข้าใจ

ทดสอบความรู้ของคุณในโฟกัส