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