จดจ่อ

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

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

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