จดจ่อ

The CSS Podcast - 018: Focus

ในหน้าเว็บ คุณคลิกลิงก์ที่จะข้ามผู้ใช้ไปยังเนื้อหาหลักของเว็บไซต์ ลิงก์เหล่านี้มักเรียกว่าลิงก์ข้ามหรือลิงก์แอตทริบิวต์ เมื่อเปิดใช้งานลิงก์นั้นด้วยแป้นพิมพ์โดยใช้ปุ่ม tab และ enter คอนเทนเนอร์เนื้อหาหลักจะมีวงโฟกัสล้อมรอบ ทำไมจึงเป็นเช่นนั้น

เนื่องจาก <main> มีค่าแอตทริบิวต์ tabindex="-1" ซึ่งหมายความว่าสามารถโฟกัสแบบเป็นโปรแกรมได้ เมื่อมีการกําหนดเป้าหมาย <main> เนื่องจาก #main-content ในแถบ URL ของเบราว์เซอร์ตรงกับ id <main> จึงได้รับการโฟกัสแบบเป็นโปรแกรม บางครั้งคุณอาจอยากนำสไตล์โฟกัสออกในสถานการณ์เหล่านี้ แต่การจัดการโฟกัสอย่างเหมาะสมและระมัดระวังจะช่วยให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่ดีและเข้าถึงได้ง่าย และยังเป็นพื้นที่ที่ดีในการเพิ่มความสนใจในการโต้ตอบ

เหตุใดโฟกัสจึงสำคัญ

ในฐานะนักพัฒนาเว็บ คุณมีหน้าที่ทำให้เว็บไซต์เข้าถึงได้และครอบคลุมทุกกลุ่ม การสร้างสถานะโฟกัสที่เข้าถึงได้ด้วย CSS เป็นส่วนหนึ่งของความรับผิดชอบนี้

รูปแบบโฟกัสจะช่วยผู้ที่ใช้อุปกรณ์ เช่น แป้นพิมพ์หรือการควบคุมด้วยสวิตช์ในการไปยังส่วนต่างๆ และโต้ตอบกับเว็บไซต์ หากองค์ประกอบได้รับโฟกัสและไม่มีตัวบ่งชี้ที่มองเห็นได้ ผู้ใช้อาจไม่ทราบว่าโฟกัสอยู่ที่ใด ซึ่งอาจทำให้เกิดปัญหาในการไปยังส่วนต่างๆ และส่งผลให้เกิดลักษณะการทำงานที่ไม่ต้องการ เช่น มีการไปยังลิงก์ที่ไม่ถูกต้อง

หมายเหตุ: ดูข้อมูลเพิ่มเติมเกี่ยวกับความสำคัญของโฟกัสสำหรับการช่วยเหลือพิเศษในเรียนรู้การช่วยเหลือพิเศษ: โฟกัส และข้อมูลเพิ่มเติมเกี่ยวกับวิธีจัดการโฟกัสใน HTML ในเรียนรู้ HTML: โฟกัส

วิธีที่องค์ประกอบได้รับโฟกัส

องค์ประกอบบางอย่างสามารถรับโฟกัสโดยอัตโนมัติ ซึ่งเป็นองค์ประกอบที่ยอมรับการโต้ตอบและอินพุต เช่น <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" เป็นต้น

คำเตือน: การเคารพลําดับแหล่งที่มาของเอกสารเป็นสิ่งสําคัญอย่างยิ่ง และควรเปลี่ยนลําดับโฟกัสเฉพาะในกรณีที่จําเป็นต้องเปลี่ยนเท่านั้น ซึ่งจะมีผลทั้งเมื่อตั้งค่า tabindex และ เปลี่ยนลำดับการแสดงผลด้วยเลย์เอาต์ CSS เช่น Flexbox และตารางกริด ทุกอย่างที่สร้างโฟกัสที่ไม่คาดคิดบนเว็บอาจทำให้ผู้ใช้เข้าถึงเว็บไซต์ไม่ได้

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

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

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

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

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

องค์ประกอบใดต่อไปนี้เป็นองค์ประกอบที่โฟกัสได้โดยอัตโนมัติ

<a>

🎉

<p>

ลองอีกครั้งนะ

<button>

🎉

<input>

🎉

<output>

ลองอีกครั้งนะ

<select>

🎉

อุปกรณ์อินพุตใดต่อไปนี้ที่ตั้งโฟกัสได้

จอยเกม

เกมแพดมักจะส่งเหตุการณ์แป้นพิมพ์เมื่อมีการกดปุ่ม

แป้นพิมพ์

ทำให้เกิดโฟกัสอย่างแน่นอนเมื่อใช้เพื่อไปยังส่วนต่างๆ ของเว็บ

หนู

การใช้เมาส์ต้องใช้การมองเห็นและจะไม่โฟกัสองค์ประกอบอีกต่อไป เบราว์เซอร์ทุกรุ่นเคยโฟกัสไปที่สิ่งต่างๆ เช่น ปุ่มเมื่อมีการคลิก แต่ตอนนี้ได้เปลี่ยนไปแล้ว

เทคโนโลยีความช่วยเหลือพิเศษ (เช่น โปรแกรมอ่านหน้าจอหรือสวิตช์)

ทำให้เกิดโฟกัสอย่างแน่นอนเมื่อใช้เพื่อไปยังส่วนต่างๆ ของเว็บ

มันฝรั่ง

ขออภัย แม้ว่าจะใช้มันฝรั่งเป็นเคอร์เซอร์บนหน้าจอสัมผัสได้ แต่จะไม่ทำให้เกิดโฟกัสหลังจากโต้ตอบกับอินพุตบนหน้าจอ