เครื่องตรวจลำดับ Focus ด้วย Keyboard
เครื่องตรวจลำดับ keyboard focus ฟรี วาง HTML เพื่อดูลำดับ Tab ที่คาดหวัง หา positive tabindex, control ที่เข้าไม่ถึงด้วย keyboard และ aria-hidden focus
Loading tool...
เครื่องตรวจลำดับ Focus ด้วย Keyboard คืออะไร?
เครื่องตรวจลำดับ Focus ด้วย Keyboard เป็นเครื่องมือ accessibility ออนไลน์ฟรี ที่วิเคราะห์ HTML ที่วางมา แล้วจำลองลำดับที่ปุ่ม Tab จะไปเยือน element ที่โฟกัสได้ทุกตัว เทียบลำดับ Tab ที่คำนวณได้กับลำดับการอ่านของ DOM ระบุ positive tabindex ที่ขโมยลำดับ navigation, control ที่มี onclick แต่ผู้ใช้ keyboard เข้าไม่ถึง, element ที่ติด aria-hidden แต่ยังรับ focus และ control ที่ถูกตัดออกจากลำดับโดยเงียบๆ ครบทุกอย่างที่ audit ตาม WCAG 2.4.3 และ 2.1.1 สนใจ คำนวณใน browser ของคุณทั้งหมด
ประโยชน์หลัก
- เห็นลำดับ Tab ที่คาดหวังแบบเต็ม ไม่ใช่แค่ผ่าน/ไม่ผ่าน
- จับการกระโดดจาก positive tabindex ก่อนผู้ใช้บ่น
- หา control ที่ต่อ onclick ไว้แต่ keyboard เข้าไม่ถึง
- จับ aria-hidden focusable ที่ทำให้ screen reader สับสน
- ส่งออกรายงาน audit แบบ text แบ่งปันได้
กรณีการใช้งาน
- •ตรวจ modal dialog และ menu เรื่อง keyboard trap
- •รีวิว markup ของ template ก่อนตรวจ WCAG 2.4.3
- •ยืนยันว่าการ refactor ไม่ได้เปลี่ยนลำดับ Tab โดยไม่ตั้งใจ
- •โค้ช developer เรื่องแนวปฏิบัติ tabindex และ focus management
- •ตรวจ HTML เก่าหาปุ่มที่ใช้ div-onclick จน keyboard ใช้ไม่ได้
วิธีตรวจลำดับโฟกัสคีย์บอร์ดของ HTML
- วางโค้ด HTML: คัดลอกส่วนที่ต้องการตรวจ เช่น ฟอร์ม โมดัล หรือเมนู มาวางลงช่องอินพุต หรือกดปุ่ม Sample เพื่อดูตัวอย่างที่มีปัญหาให้เห็นชัด
- ดูลำดับ Tab: รายการตัวเลขแสดงลำดับโฟกัสที่คาดไว้ ให้สังเกตป้ายกำกับอย่าง jumps ahead, pushed back และ aria-hidden ที่บอกปัญหาเรื่องลำดับ
- แก้ไขตามรายการปัญหา: ไล่แก้ในหมวด Issues โดยแต่ละรายการมีระดับความรุนแรง เลขบรรทัดและคอลัมน์ พร้อมข้อความโค้ดที่มีปัญหาให้ตามหาในซอร์สได้ง่าย
- ส่งออกรายงาน: กด Copy Report เพื่อคัดลอกไปคลิปบอร์ด หรือกด Download เพื่อบันทึกไฟล์ focus-order-report.txt แนบไปกับ pull request หรือตั๋วงานได้เลย
คุณสมบัติหลัก
- จำลองลำดับการกด Tab จาก HTML ที่วางมา
- ตรวจจับ positive tabindex ที่ทำให้ลำดับ focus ผิดจาก DOM
- หา control ที่มี onclick แต่ผู้ใช้ keyboard เข้าไม่ถึง
- จับ aria-hidden focusable และการถูกตัดออกด้วย tabindex=-1
- เทียบตำแหน่งในลำดับ Tab กับตำแหน่ง DOM พร้อมเครื่องหมายการกระโดด
- ส่งออกรายงาน focus audit แบบ text ได้
คำถามที่พบบ่อย
ระบบคำนวณลำดับ Tab ที่ควรเป็นอย่างไร
ค่า tabindex ที่เป็นบวกจะมาก่อนตามลำดับเลข จากนั้นองค์ประกอบที่เหลือเรียงตามลำดับใน DOM เหมือนที่เบราว์เซอร์ทำจริง ส่วนปุ่ม disabled และ tabindex=-1 จะถูกตัดออกจากลำดับ
ตรวจพบปัญหาแบบไหนบ้าง
เตือน tabindex บวกที่กระโดดข้ามลำดับ DOM (WCAG 2.4.3), องค์ประกอบ aria-hidden ที่ยังรับโฟกัสได้, tabindex=-1 บนปุ่มที่โฟกัสได้ตามปกติ และองค์ประกอบคลิกได้แต่ใช้คีย์บอร์ดไม่ได้ (WCAG 2.1.1)
ควรวางอะไรลงช่องอินพุต
วางโค้ด HTML ส่วนที่ต้องการตรวจ เช่น ฟอร์ม โมดัล หรือเมนูนำทาง กดปุ่ม Sample เพื่อโหลดตัวอย่างที่มีปัญหาทั่วไป และผลลัพธ์อัปเดตแบบเรียลไทม์ขณะพิมพ์
แชร์ผลลัพธ์กับทีมได้อย่างไร
กด Copy Report เพื่อคัดลอกรายงานเป็นข้อความ หรือกด Download เพื่อบันทึกไฟล์ focus-order-report.txt โดยข้อมูลที่วางไม่ออกจากเบราว์เซอร์ของคุณ