สร้างลิงก์ข้ามที่ใช้งานได้จริง

ลิงก์ข้ามที่ใช้งานได้มีสองส่วน ได้แก่ จุดยึด ที่ลิงก์ไปยังที่ใดที่หนึ่ง และ เป้าหมาย ที่สามารถไปถึงได้จริง ทั้งสองส่วนต้องมีอยู่

จุดยึดคือลิงก์ปกติที่มี href เป็นส่วนย่อยของหน้า เช่น เครื่องหมายแฮชตามด้วย id เมื่อคลิก เบราว์เซอร์จะทราบว่าจะไปที่ใด

เป้าหมายคือองค์ประกอบที่คุณต้องการไปถึง กำหนด id ที่ตรงกัน เพื่อให้ส่วนย่อยใน href มีตำแหน่งสำหรับชี้ไป

ให้ลิงก์ข้ามชี้ไปยังแลนด์มาร์ก main ซึ่งเป็นพื้นที่เดียวที่บรรจุเนื้อหาเฉพาะของหน้านั้น และเป็นจุดที่ผู้ใช้ต้องการไปถึงพอดี

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

วิธีแก้คือทำให้โฟกัสย้ายไปที่นั่นได้จริง เพิ่ม tabindex เท่ากับลบหนึ่ง เพื่อให้เป้าหมายรับโฟกัสจากลิงก์ข้ามได้

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

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

โหลดหน้าใหม่ กด Tab หนึ่งครั้ง แล้วกด Enter ตัวบ่งชี้โฟกัสควรกระโดดไปยังเนื้อหา และการกด Tab ครั้งถัดไปควรดำเนินต่อภายในเนื้อหานั้น ✅

ตั้งชื่อให้ชัดเจน ข้ามไปยังเนื้อหาหลัก บอกผู้ใช้ได้อย่างชัดเจนว่าจะเกิดอะไรขึ้น ซึ่งดีกว่าคำว่า ข้าม หรือไอคอนที่คลุมเครือมาก

วางจุดยึดเป็น องค์ประกอบลูกแรกของ body ก่อนส่วนหัว เพื่อให้ Tab ไปถึงจุดยึดก่อนสิ่งอื่นในหน้า

เชื่อม จุดยึด กับ id ที่ตรงกันบน main เพิ่ม tabindex ลบหนึ่ง แล้วทดสอบด้วยการกด Tab นี่คือลิงก์ข้ามที่ใช้งานได้จริง 🎯