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