Apa itu Visualisasi Urutan Fokus?

Tempel HTML apa pun dan lihat urutan tab keyboard terpetakan. Penanda bernomor muncul pada setiap elemen yang dapat difokuskan agar Anda bisa langsung menemukan masalah navigasi. Dibuat untuk auditor aksesibilitas dan developer yang memeriksa kepatuhan WCAG.

Visualizer mendeteksi tautan, tombol, kolom formulir, textarea, menu select, widget details/summary, area contenteditable, dan elemen apa pun dengan tabindex eksplisit. Setiap elemen yang bisa difokus mendapat lencana bernomor plus tanda apakah posisinya berasal dari urutan DOM (alami) atau dari tabindex yang menimpa (kustom). Alat ini juga memberi skor halaman dari 0 sampai 100, menandai kontrol tanpa nama yang dapat diakses (masalah tombol yang hanya berupa ikon), dan menunjukkan berapa banyak elemen interaktif yang tidak pernah terjangkau lewat Tab. Hasilnya bisa diekspor sebagai laporan teks polos atau CSV terstruktur untuk catatan audit dan pelacak bug.

Cara menggunakan

1. Tempel kode HTML ke editor atau unggah file HTML untuk memeriksa urutan tab-nya.
2. Penanda bernomor muncul pada setiap elemen yang dapat difokuskan (tautan, tombol, input) menunjukkan urutan tab.
3. Lihat skor aksesibilitas dan panel masalah, perbaiki elemen yang tidak berurutan, tanpa label, atau tak terjangkau keyboard, lalu ekspor hasilnya sebagai laporan teks atau CSV.

Kapan menggunakan

• Pra-audit sebelum mengajukan halaman untuk sertifikasi WCAG 2.1 AA.
• Melacak regresi urutan Tab setelah refactor layout atau komponen.
• Memastikan modal atau menu off-canvas menjebak fokus di dalamnya.

Hasil

Seorang konsultan aksesibilitas menempel HTML formulir pendaftaran klien. Visualisator menangkap tombol 'Kirim' menerima fokus sebelum kotak centang 'Syarat dan Ketentuan', karena tabindex positif mengubah urutannya. Itu pelanggaran WCAG 2.4.3.

FAQ

Apakah memakai tabindex bernilai positif selalu salah?

Hampir selalu, ya. Tabindex positif (1, 2, 3…) menarik elemen keluar dari urutan DOM dan membuat kursor melompat-lompat secara tak terduga. Gunakan tabindex="0" untuk membuat elemen non-interaktif bisa difokus, atau tabindex="-1" untuk mengeluarkan dari rantai Tab sambil tetap menjaga fokus programatik.

Apa arti 'alami' dan 'kustom' di daftar?

Alami berarti posisi Tab elemen mengikuti letaknya di sumber HTML. Kustom berarti tabindex positif memaksanya ke posisi lain. Posisi kustom ditandai karena paling sering jadi penyebab gagalnya WCAG 2.4.3.

Apakah elemen tersembunyi muncul di urutan fokus?

Kalau benar-benar tersembunyi (display:none atau visibility:hidden), browser melewatinya dan visualizer juga. Tapi aria-hidden saja tidak menghapus kemampuan difokus, dan ini bug umum. Daftar akan menampilkannya, lalu dari data rectangle Anda bisa tahu apakah elemen terlihat.

Apakah alat ini mendeteksi modal tanpa focus trap?

Ia menampilkan urutan, bukan apakah fokus lepas dari modal. Tempel HTML modal dalam keadaan terbuka dan cek apakah elemen pertama dan terakhir yang bisa difokus berada di dalam dialog. Jika urutan melompat ke konten body, focus trap belum ada.

Kenapa elemen yang saya kira bisa difokus tidak ada di daftar?

Input yang disable, anchor tanpa href, dan div tanpa tabindex dilewati karena browser memang tak bisa memfokusnya. Tambahkan tabindex="0" jika div harus terjangkau, beri href pada anchor, atau buang atribut disabled.

Alat terkait