การจัดเรียงแท็บอย่างเป็นระบบเป็นส่วนสำคัญในการช่วยให้ผู้ใช้ได้รับประสบการณ์ไปยังส่วนต่างๆ ของแป้นพิมพ์ที่ราบรื่น โปรแกรมอ่านหน้าจอและเทคโนโลยีความช่วยเหลืออื่นๆ จะไปยังส่วนต่างๆ ของหน้าตามลำดับ DOM การไหลของข้อมูลควรจะมีความเหมาะสม
วิธีทดสอบด้วยตนเอง
หากต้องการตรวจสอบว่าลำดับแท็บของแอปพลิเคชันถูกต้องหรือไม่ ให้ลองกด Tab ผ่านหน้าเว็บ โดยทั่วไป โฟกัสควรเป็นไปตามลำดับการอ่าน โดยเริ่มจากซ้ายไปขวา จากด้านบนไปยังด้านล่างของหน้าเว็บ
มีแนวคิดหลัก 2 ประการที่ควรคำนึงถึงเมื่อประเมินลำดับแท็บของคุณ ได้แก่
- องค์ประกอบใน DOM จัดเรียงตามลำดับเชิงตรรกะหรือไม่
- มีการซ่อนเนื้อหานอกจอภาพจากการนำทางอย่างถูกต้องไหม
สังเกตการกระตุกในการนำทางที่ดูเหมือนจะน่าสะพรึงกลัว นอกจากนี้ให้สังเกตการกระตุกนอกหน้าจอ ซึ่งการกด Tab จะนำคุณไปยังเนื้อหาที่ไม่ได้ควรจะมองเห็นได้
ดูข้อมูลเพิ่มเติมในพื้นฐานการเข้าถึงแป้นพิมพ์
วิธีแก้ไข
หากลำดับการโฟกัสดูเหมือนไม่ถูกต้อง คุณควรจัดเรียงองค์ประกอบใน DOM ใหม่เพื่อทำให้ลำดับของแท็บเป็นธรรมชาติมากขึ้น
หากคุณใช้ CSS เพื่อปรับตำแหน่งองค์ประกอบที่มองเห็นได้ ผู้ใช้เทคโนโลยีความช่วยเหลือจะพบกับการนำทางที่ไม่มีความหมาย แทนที่จะใช้ CSS ให้ย้ายองค์ประกอบ ไปยังตำแหน่งก่อนหน้าใน DOM
หากยังคงเข้าถึงเนื้อหานอกหน้าจอโดยใช้การควบคุมด้วยแป้นพิมพ์ได้
ให้พิจารณานำเนื้อหาออกโดยใช้ tabindex="-1"
ดูข้อมูลเพิ่มเติมในควบคุมโฟกัสด้วย Tabindex