ความสำคัญของลำดับ DOM เริ่มต้น
การทำงานกับองค์ประกอบแบบเนทีฟเป็นวิธีที่ยอดเยี่ยมในการเรียนรู้เกี่ยวกับลักษณะการทำงานของโฟกัส เนื่องจากระบบจะแทรกองค์ประกอบเหล่านี้ลงในลำดับแท็บโดยอัตโนมัติตามตำแหน่งใน DOM
เช่น คุณอาจมีองค์ประกอบปุ่ม 3 รายการเรียงต่อกันใน DOM การกด Tab จะโฟกัสแต่ละปุ่มตามลำดับ ลองคลิกบล็อกโค้ดด้านล่างเพื่อย้ายจุดเริ่มต้นการไปยังส่วนต่างๆ ของโฟกัส จากนั้นกด Tab เพื่อย้ายโฟกัสผ่านปุ่มต่างๆ
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
อย่างไรก็ตาม โปรดทราบว่าการใช้ CSS อาจทำให้สิ่งต่างๆ มีลำดับหนึ่งใน DOM แต่ปรากฏในลำดับที่ต่างกันบนหน้าจอ เช่น หากคุณใช้พร็อพเพอร์ตี้ CSS อย่าง float เพื่อย้ายปุ่มหนึ่งไปทางขวา ปุ่มต่างๆ จะปรากฏในลำดับที่ต่างกันบนหน้าจอ แต่เนื่องจากลำดับใน DOM ยังคงเหมือนเดิม
ลำดับการกด Tab จึงยังคงเหมือนเดิมด้วย เมื่อผู้ใช้กด Tab เพื่อไปยังส่วนต่างๆ ของหน้า ปุ่มจะได้รับโฟกัสในลำดับที่ไม่เป็นธรรมชาติ ลองคลิกบล็อกโค้ดด้านล่างเพื่อย้ายจุดเริ่มต้นการไปยังส่วนต่างๆ ของโฟกัส จากนั้นกด Tab เพื่อย้ายโฟกัสผ่านปุ่มต่างๆ
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
โปรดระมัดระวังเมื่อเปลี่ยนตำแหน่งภาพขององค์ประกอบบนหน้าจอโดยใช้ CSS ซึ่งอาจทำให้ลำดับแท็บข้ามไปมาอย่างไม่เป็นระเบียบ และทำให้ผู้ใช้ที่ใช้แป้นพิมพ์สับสน ด้วยเหตุนี้ รายการตรวจสอบ Web AIM จึงระบุไว้ในส่วนที่ 1.3.2 ว่าลำดับการอ่านและการไปยังส่วนต่างๆ ตามที่กำหนดโดยลำดับโค้ดควรเป็นไปตามตรรกะและเข้าใจง่าย
ตามกฎแล้ว ให้ลองกด Tab เพื่อไปยังส่วนต่างๆ ของหน้าเว็บเป็นประจำ เพื่อให้แน่ใจว่าคุณไม่ได้ทำให้ลำดับการกด Tab เสียไปโดยไม่ตั้งใจ ซึ่งเป็นนิสัยที่ดีที่ควรนำมาใช้และไม่ต้องใช้ความพยายามมากนัก
เนื้อหานอกหน้าจอ
จะเกิดอะไรขึ้นหากคุณมีเนื้อหาที่ไม่ได้แสดงอยู่ในปัจจุบัน แต่ยังต้องอยู่ใน DOM เช่น แถบนำทางด้านข้างที่ปรับเปลี่ยนตามอุปกรณ์ เมื่อคุณมีองค์ประกอบเช่นนี้ที่ได้รับโฟกัสเมื่ออยู่นอกหน้าจอ อาจดูเหมือนว่าโฟกัสหายไปและปรากฏขึ้นอีกครั้งเมื่อผู้ใช้กด Tab ผ่านหน้าเว็บ ซึ่งเป็นผลลัพธ์ที่ไม่พึงประสงค์อย่างชัดเจน ตามหลักการแล้ว เราควรป้องกันไม่ให้แผงได้รับโฟกัสเมื่ออยู่นอกหน้าจอ และอนุญาตให้โฟกัสได้เฉพาะเมื่อผู้ใช้โต้ตอบกับแผงได้เท่านั้น
บางครั้งคุณอาจต้องสวมบทบาทเป็นนักสืบเพื่อค้นหาว่าโฟกัสหายไปไหน คุณสามารถใช้ document.activeElement จากคอนโซลเพื่อดูว่าองค์ประกอบใดที่โฟกัสอยู่
เมื่อทราบว่าองค์ประกอบนอกหน้าจอใดที่โฟกัสอยู่ คุณสามารถตั้งค่าเป็น display: none หรือ visibility: hidden แล้วตั้งค่ากลับเป็น display:
block หรือ visibility: visible ก่อนแสดงต่อผู้ใช้
โดยทั่วไป เราขอแนะนำให้นักพัฒนาซอฟต์แวร์กด Tab เพื่อไปยังส่วนต่างๆ ของเว็บไซต์ก่อนการเผยแพร่แต่ละครั้ง เพื่อดูว่าลำดับการกด Tab ไม่หายไปหรือข้ามลำดับที่สมเหตุสมผล หากเป็นเช่นนั้น คุณควรตรวจสอบว่าได้ซ่อนเนื้อหานอกหน้าจออย่างเหมาะสมด้วย display: none หรือ visibility: hidden หรือจัดเรียงตำแหน่งทางกายภาพขององค์ประกอบใน DOM ใหม่เพื่อให้เรียงลำดับอย่างสมเหตุสมผล