ลำดับ Tab ที่มีเหตุผลต้องเป็นไปตามเนื้อหา

กด Tab แล้วโฟกัสจะเดินไปตามเส้นทางที่กำหนดไว้ทั่วหน้า เส้นทางนี้คือ ลำดับการกด Tab และการจัดลำดับให้ถูกต้องช่วยให้ผู้ใช้รู้ว่าตนอยู่ที่ใด 🧭

โดยค่าเริ่มต้น ลำดับการกด Tab จะตรงกับ ลำดับในซอร์ส ซึ่งเป็นลำดับองค์ประกอบจากบนลงล่างใน HTML ไม่ใช่ลำดับที่คุณเห็นบนหน้าจอ

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

เครื่องมือจัดวางอย่าง ลำดับของ flexbox จะย้ายกล่องในเชิงภาพ แต่ไม่เปลี่ยน DOM โฟกัสยังคงเดินตามซอร์ส ดังนั้นทั้งสองลำดับอาจไม่ตรงกัน

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

tabindex ที่เป็นค่าบวก เช่น 3 จะบังคับให้ตัวควบคุมขึ้นมาอยู่ด้านหน้าของลำดับ ซึ่งแทบจะทำให้เกิดความยุ่งเหยิงที่สับสนและดูแลรักษาได้ยากเสมอ

แทนที่จะแก้ด้วย tabindex เพียงวางองค์ประกอบไว้ใน ลำดับที่ถูกต้องในมาร์กอัป ลำดับในซอร์สที่สะอาดไม่ต้องใช้แอตทริบิวต์พิเศษ

องค์ประกอบที่มี display none จะออกจากลำดับการกด Tab โดยสิ้นเชิง เมื่อแสดงอีกครั้ง องค์ประกอบนั้นจะกลับไปยังตำแหน่งเดิมใน DOM อย่างเงียบ ๆ

เมื่อ JavaScript แทรกตัวควบคุมใหม่ ตัวควบคุมนั้นจะไปอยู่ตรงจุดที่คุณ ต่อท้ายไว้ ให้แทรกในตำแหน่งที่เหมาะสมเพื่อให้ลำดับยังคงสมเหตุสมผล

กล่องโต้ตอบที่ต่อท้ายหน้าอาจทำให้โฟกัสค้างอยู่ไกลออกไป การ จัดการโฟกัสที่ดีจะส่งผู้ใช้เข้าไปในโมดัลเมื่อเปิด

วิธีพิสูจน์นั้นง่ายมาก กด Tab จากด้านบน แล้วตรวจสอบว่าโฟกัสเคลื่อนไปตามลำดับที่สมเหตุสมผล โดยไม่กระโดดไปมาบนหน้าจออย่างน่าประหลาดใจ

ตัดสินใจว่าอะไรเป็นตัวกำหนดลำดับการกด Tab เริ่มต้นอย่างแท้จริง

ให้โฟกัสเคลื่อนไปตามวิธีที่ผู้คนอ่าน จัด ลำดับในซอร์สให้ตรงกับรูปแบบการจัดวางที่มองเห็น หลีกเลี่ยง tabindex ที่เป็นค่าบวก และทดสอบผลลัพธ์ด้วย Tab ✅