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

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

เดฟ แกช
เดฟ แกช
เมกกิน เคียร์นี่
Meggin Kearney

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

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

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

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

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

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

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

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

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

แผงแบบเลื่อนเข้านอกหน้าจออาจขโมยโฟกัสได้

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

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

แผงแบบเลื่อนเข้าที่ตั้งค่าให้ไม่แสดง
แผงแบบเลื่อนเข้าที่กำหนดให้แสดงบล็อก

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