ลำดับ DOM มีความสำคัญ

ความสำคัญของลำดับ DOM เริ่มต้น

Dave Gash

Meggin Kearney

Rob Dodson

การใช้งานองค์ประกอบที่มีอยู่แต่เดิมเป็นวิธีที่ดีในการเรียนรู้เกี่ยวกับพฤติกรรมการมีสมาธิ เพราะระบบจะแทรกในลำดับแท็บโดยอัตโนมัติตาม ตำแหน่งใน DOM

ตัวอย่างเช่น คุณอาจมีองค์ประกอบปุ่มสามปุ่ม โดยแต่ละองค์ประกอบแยกจากกันใน DOM การกดปุ่ม Tab จะโฟกัสแต่ละปุ่มตามลำดับ ลองคลิกโค้ดบล็อก ด้านล่างเพื่อย้ายจุดเริ่มต้นของการนำทางโฟกัส จากนั้นกด Tab เพื่อย้ายโฟกัส ผ่านปุ่มต่างๆ

<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>

สิ่งที่ควร มีสมาธิ ขั้นสุดท้าย

อย่างไรก็ตาม สิ่งสำคัญที่ควรทราบคือ การใช้ CSS ทำให้ อยู่ในลำดับหนึ่งๆ ใน DOM แต่ปรากฏในลำดับที่ต่างกันบนหน้าจอ สำหรับ ตัวอย่างเช่น หากคุณใช้พร็อพเพอร์ตี้ CSS อย่าง float เพื่อย้ายปุ่ม 1 ปุ่มไปทางขวา ปุ่มจะปรากฏตามลำดับอื่นบนหน้าจอ แต่เนื่องจากลำดับใน และ DOM จะยังคงเหมือนเดิม ลำดับแท็บก็เช่นกัน เมื่อผู้ใช้แท็บผ่าน หน้าเว็บ ปุ่มต่างๆ จะโฟกัสตามลำดับที่อ่านยาก ลองคลิกที่ โค้ดบล็อกด้านล่างเพื่อย้ายจุดเริ่มต้นของการนำทางโฟกัส จากนั้นกด Tab เพื่อ เลื่อนโฟกัสผ่านปุ่มต่างๆ

<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>

สิ่งที่ควร มีสมาธิ สุดท้าย

โปรดระมัดระวังเมื่อเปลี่ยนตำแหน่งภาพขององค์ประกอบบนหน้าจอโดยใช้ CSS ซึ่งอาจทำให้ลำดับแท็บสลับไปมาได้ ซึ่งดูเหมือนแบบสุ่มและทำให้สับสน ผู้ใช้ที่ใช้แป้นพิมพ์ ด้วยเหตุนี้ รายการตรวจสอบ Web AIM จึงมีสถานะ ในส่วน 1.3.2 ลำดับการอ่านและการนำทาง (ซึ่งกำหนดตามลำดับโค้ด) ควรเป็น มีเหตุผลและใช้งานง่าย

ตามกฎแล้ว ให้ลองใช้แท็บต่างๆ ผ่านหน้าเว็บทุกๆ ครั้งเพื่อให้แน่ใจว่า ไม่ทำให้ลำดับแท็บเสียหายโดยไม่ตั้งใจ นั่นเป็นนิสัยที่ดีในการนำมาใช้ และ โดยไม่ต้องใช้ความพยายามมากนัก

เนื้อหานอกหน้าจอ

ถ้าคุณมีเนื้อหาที่ยังไม่ได้แสดงในขณะนี้ แต่ยังคงเป็นเนื้อหาที่จำเป็นต้องแสดง ใน DOM เช่น Side-nav ที่ปรับเปลี่ยนตามอุปกรณ์ เมื่อมีองค์ประกอบแบบนี้ เมื่อโฟกัสอยู่ที่หน้าจอ อาจดูเหมือนโฟกัส หายไปและปรากฏขึ้นอีกครั้งขณะแท็บผู้ใช้ผ่านหน้าเว็บ เกิดผลกระทบที่ไม่พึงประสงค์ ตามหลักการแล้ว เราควรป้องกันไม่ให้แผง ได้รับโฟกัส เมื่ออยู่นอกหน้าจอ และอนุญาตให้โฟกัสก็ต่อเมื่อผู้ใช้โต้ตอบได้ ด้วย

บางครั้งคุณต้องทำงานนักสืบสักหน่อยเพื่อดูว่าโฟกัสอยู่ที่จุดไหน ไปแล้ว คุณสามารถใช้ document.activeElement จากคอนโซลเพื่อดูว่าเป็นรุ่นใด ตอนนี้โฟกัสอยู่

เมื่อคุณทราบว่ากำลังโฟกัสองค์ประกอบใดนอกหน้าจออยู่ ให้ตั้งค่าเป็น display: none หรือ visibility: hidden แล้วตั้งค่ากลับไปเป็น display: block หรือ visibility: visible ก่อนแสดงต่อผู้ใช้

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