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