ลำดับภาพในหน้าเว็บเป็นไปตามลำดับ DOM

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

วิธีทดสอบด้วยตนเอง

หากต้องการตรวจสอบว่าลําดับแท็บของแอปพลิเคชันเป็นไปตามตรรกะหรือไม่ ให้ลองกด Tab ไปยังส่วนต่างๆ ของหน้า โดยทั่วไป โฟกัสควรเป็นไปตามลำดับการอ่านจากบนลงล่างของหน้า ภาษาส่วนใหญ่จะอ่านจากซ้ายไปขวา ในบางภาษา เช่น ภาษาอาหรับและฮีบรู ลำดับการอ่านจะย้ายจากขวาไปซ้าย

แนวคิดหลัก 2 ข้อที่ควรคำนึงถึงเมื่อประเมินลําดับแท็บมีดังนี้

  • องค์ประกอบใน DOM จัดเรียงตามลําดับที่สมเหตุสมผลหรือไม่
  • เนื้อหานอกหน้าจอถูกซ่อนจากการนำทางอย่างถูกต้องไหม

สังเกตการกระโดดของการนำทางที่ดูน่าตกใจ นอกจากนี้ ให้สังเกตการข้ามไปยังส่วนนอกหน้าจอด้วย ซึ่งการกด Tab จะนําคุณไปยังเนื้อหาที่ไม่ได้ตั้งใจให้แสดง

ดูข้อมูลเพิ่มเติมในพื้นฐานการเข้าถึงด้วยแป้นพิมพ์

วิธีแก้ไข

หากลําดับโฟกัสดูไม่ถูกต้อง ให้จัดเรียงองค์ประกอบใน DOM ใหม่เพื่อให้ลําดับแท็บดูเป็นธรรมชาติมากขึ้น

หลีกเลี่ยงการใช้ CSS เพื่อเปลี่ยนตำแหน่งองค์ประกอบภาพ เนื่องจากผู้ใช้เทคโนโลยีความช่วยเหลือพิเศษจะพบกับการนำทางที่ไม่สื่อความหมาย แทนที่จะใช้ CSS ให้ย้ายองค์ประกอบไปยังตำแหน่งก่อนหน้าใน DOM

หากยังคงเข้าถึงเนื้อหานอกหน้าจอได้ด้วยการควบคุมแป้นพิมพ์ ให้พิจารณานำเนื้อหาออกโดยใช้ tabindex="-1"

ดูข้อมูลเพิ่มเติมในควบคุมโฟกัสด้วย tabindex

แหล่งข้อมูล

ซอร์สโค้ดสําหรับการตรวจสอบลําดับภาพในหน้าเว็บตามลําดับ DOM