ความสำคัญของลำดับ 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 ก่อนแสดงต่อผู้ใช้
โดยทั่วไป เราสนับสนุนให้นักพัฒนาซอฟต์แวร์กดแท็บต่างๆ ทั่วเว็บไซต์ของตนก่อนเผยแพร่แต่ละครั้ง เพื่อดูว่าลำดับแท็บไม่ได้หายไปหรือผิดไปจากลำดับที่สมเหตุสมผล หากใช่ คุณควรตรวจสอบว่ากำลังซ่อนเนื้อหานอกหน้าจอด้วย display: none หรือ visibility: hidden อย่างเหมาะสม หรือเรียงลำดับตำแหน่งทางกายภาพขององค์ประกอบใหม่ใน DOM เพื่อให้เป็นไปตามลำดับเชิงตรรกะ