Lompat ke konten
Aback Tools Logo

Penguji Indikator Fokus

Uji kerangka tampak fokus kustom Anda terhadap persyaratan Penampilan Fokus WCAG 2.4.11 dan 2.4.13. Sesuaikan lebar kerangka, offset, warna, dan radius batas dengan penggeser interaktif dan lihat pratinjau langsung pada tombol sampel, masukan, atau tautan. Segera lihat apakah indikator fokus Anda memenuhi persyaratan area dan kontras AA dan AAA - dengan umpan balik yang dapat ditindaklanjuti dan aturan CSS :fokus-terlihat yang siap digunakan untuk disalin. Sepenuhnya pribadi, 100% gratis, dan tidak perlu mendaftar.

Focus Indicator Tester
Test if custom focus-visible outlines meet WCAG 2.4.11 (Focus Appearance) requirements. Set outline width, offset, and colour, then see a live preview with pass/fail results.

Element Presets

Outline Settings

px
px
px

Colours

Live Preview

Adjust the settings above to see WCAG compliance results.

CSS for focus-visible

/* WCAG-compliant focus-visible style */
:focus-visible {
  outline: 3px solid #6366F1;
  outline-offset: 2px;
  border-radius: 6px;
}

Mengapa Menggunakan Penguji Indikator Fokus Kami?

  • Pemeriksaan Kepatuhan WCAG Waktu Nyata: Penguji indikator fokus mengevaluasi gaya fokus terlihat kustom Anda terhadap persyaratan WCAG 2.4.11 AA dan 2.4.13 AAA secara real time. Sesuaikan lebar garis, offset, dan penggeser warna dan lihat hasil langsung/gagal untuk kriteria area dan kontras.
  • Pratinjau Langsung dengan Preset Elemen: Lihat indikator fokus Anda ditampilkan pada elemen interaktif nyata - pilih dari 10 latar belakang elemen preset termasuk tombol, input, dan tautan. Pratinjau langsung diperbarui saat Anda menyesuaikan lebar, offset, warna, radius batas, dan jenis elemen.
  • 100% Pribadi - Tanpa Unggahan: Semua penghitungan kepatuhan WCAG dilakukan secara lokal di browser Anda. Nilai warna dan desain Anda tidak pernah meninggalkan perangkat Anda dan tidak pernah dikirim ke server mana pun - aman untuk proyek klien dan sistem desain eksklusif.
  • Gratis & Tanpa Batas: Uji konfigurasi indikator fokus tanpa batas tanpa pendaftaran, tanpa langganan, dan tanpa batasan penggunaan. Penguji indikator fokus sepenuhnya gratis selamanya tanpa iklan yang memblokir antarmuka.

Kasus Penggunaan Umum untuk Penguji Indikator Fokus

  • Pengembangan & QA CSS: Pengembang front-end menggunakan penguji indikator fokus untuk memvalidasi gaya khusus yang terlihat fokus selama pengembangan. Uji berbagai warna kerangka, lebar, dan offset terhadap latar belakang komponen Anda untuk memastikan setiap elemen interaktif memenuhi persyaratan tampilan fokus WCAG sebelum dikirimkan.
  • Audit Aksesibilitas: Pakar aksesibilitas menggunakan penguji indikator fokus selama audit kepatuhan WCAG untuk memeriksa indikator fokus terhadap kriteria 2.4.11 dan 2.4.13. Hasil lulus/gagal yang jelas dan rincian persyaratan area dan kontras menyederhanakan proses audit.
  • Penyerahan Desain-ke-Pengembangan: Desainer menggunakan penguji indikator fokus untuk memverifikasi bahwa gaya fokus khusus dalam maket desain akan memenuhi persyaratan WCAG sebelum diserahkan kepada pengembang. Uji warna fokus terhadap latar belakang komponen sebenarnya yang digunakan dalam sistem desain.
  • Penataan Fokus Lintas Platform: Pengembang seluler dan lintas platform menggunakan penguji indikator fokus untuk memvalidasi indikator fokus di berbagai platform. Uji bagaimana kerangka fokus muncul pada berbagai warna latar belakang dan tipe elemen untuk memastikan aksesibilitas yang konsisten di seluruh web, React Native, dan Flutter.
  • Kepatuhan Aksesibilitas Perusahaan: Tim pengembangan perusahaan menggunakan penguji indikator fokus untuk menerapkan standar indikator fokus di seluruh basis kode besar. Alat ini membantu mempertahankan gaya fokus yang konsisten dan sesuai dengan WCAG dengan memvalidasi bahwa setiap aturan fokus terlihat memenuhi persyaratan AA dan AAA.
  • Persiapan Sertifikasi WCAG: Tim yang mempersiapkan sertifikasi WCAG menggunakan penguji indikator fokus untuk memverifikasi kepatuhan indikator fokus secara sistematis. Umpan balik real-time dan ekspor CSS memudahkan perbaikan masalah dan menghasilkan gaya fokus yang sesuai untuk dokumentasi sertifikasi.

Apa itu Pengujian Indikator Fokus?

Pengujian indikator fokus mengevaluasi apakah garis fokus kustom yang terlihat memenuhi persyaratan WCAG (Pedoman Aksesibilitas Konten Web) untuk Tampilan Fokus. WCAG 2.4.11 (Level AA) mengharuskan indikator fokus setidaknya berukuran sebesar 2 piksel batas tebal di sekeliling elemen dan memiliki rasio kontras minimal 3:1 terhadap latar belakang yang berdekatan. WCAG 2.4.13 (Level AAA) meningkatkan persyaratan area setara dengan tebal batas 4 piksel. Penguji indikator fokus kami memeriksa kedua persyaratan secara real time saat Anda menyesuaikan pengaturan garis besar.

Cara Kerja Penguji Indikator Fokus Kami

  1. Konfigurasikan gaya fokus Anda: Atur lebar kerangka (0-10 piksel), offset (0-10 piksel), warna, dan radius batas menggunakan penggeser dan pemilih warna. Pilih jenis elemen (tombol, masukan, tautan, kotak centang, atau kustom) dan pilih dari 10 preset latar belakang elemen atau masukkan nilai HEX khusus untuk latar belakang elemen dan teks.
  2. Pratinjau langsung diperbarui secara instan: Elemen sampel dirender dengan gaya terlihat fokus Anda diterapkan, menunjukkan dengan tepat bagaimana indikator fokus akan muncul di browser. Latar belakang dan warna teks sesuai dengan pengaturan Anda untuk representasi visual yang akurat.
  3. Tampilan hasil WCAG: Penguji indikator fokus menghitung area garis luar dan rasio kontras antara warna fokus dan latar belakang elemen. Lencana lulus/gagal yang jelas untuk WCAG AA, WCAG AAA, rasio kontras, dan persyaratan area memberikan masukan langsung mengenai kepatuhan.
  4. Salin CSS yang sesuai: Setelah Anda memiliki konfigurasi yang lewat, salin aturan CSS fokus-terlihat yang dihasilkan untuk digunakan langsung di lembar gaya proyek Anda.

Persyaratan Penampilan Fokus WCAG Dijelaskan

  • Persyaratan area (2.4.11 AA - Minimum): Indikator fokus harus setidaknya sama besarnya dengan area batas setebal 2 piksel di sekeliling elemen. Hal ini memastikan indikator fokus cukup menonjol secara visual agar mudah ditemukan oleh pengguna keyboard. Penguji indikator fokus kami menghitung perkiraan keliling elemen dan mengalikannya dengan lebar garis untuk menentukan luas indikator.
  • Persyaratan area (2.4.13 AAA - Ditingkatkan): Untuk kepatuhan Level AAA, indikator fokus harus setidaknya berukuran sebesar batas tebal 4 piksel. Hal ini memberikan indikasi fokus yang lebih jelas bagi pengguna dengan gangguan penglihatan atau mereka yang hanya mengandalkan navigasi keyboard.
  • Persyaratan kontras (baik AA maupun AAA): Indikator fokus harus memiliki rasio kontras minimal 3:1 antara pikselnya dan warna non-indikator fokus yang berdekatan. Hal ini memastikan indikator fokus dapat dibedakan secara visual dari elemen di sekitarnya. Rasio kontras dihitung menggunakan rumus pencahayaan relatif WCAG berdasarkan ruang warna sRGB.

Privasi, Keamanan & Ketersediaan

100% pemrosesan sisi klien: Penguji indikator fokus kami berjalan sepenuhnya di browser Anda menggunakan JavaScript. Tidak ada nilai warna, pengaturan desain, atau hasil pengujian yang diunggah, disimpan, atau dikirimkan ke server mana pun. Hal ini membuatnya aman untuk proyek klien sensitif dan sistem desain eksklusif.

Tanpa pendaftaran atau batasan: Penguji indikator fokus sepenuhnya gratis tanpa memerlukan akun, tanpa batasan penggunaan, dan tanpa fitur premium. Uji konfigurasi indikator fokus tanpa batas secara instan tanpa batasan apa pun.

Pertanyaan yang Sering Diajukan

Penguji indikator fokus mengevaluasi gaya CSS khusus yang terlihat fokus terhadap persyaratan Penampilan Fokus WCAG. Ini memeriksa dua kriteria: area garis luar (setidaknya sebesar batas 2 piksel untuk AA, 4 piksel untuk AAA) dan rasio kontras (setidaknya 3:1 antara warna fokus dan latar belakang yang berdekatan).

Penguji indikator fokus memeriksa Penampilan Fokus WCAG 2.4.11 (Level AA) dan Penampilan Fokus WCAG 2.4.13 (Level AAA). Keduanya memerlukan rasio kontras minimal 3:1 antara indikator fokus dan latar belakang yang berdekatan. Persyaratan area minimal lebar batas setara 2 piksel untuk AA dan 4 piksel untuk AAA.

Luas dihitung dengan mengambil perkiraan keliling elemen (berdasarkan persegi panjang bulat standar 120×40 piksel) dan mengalikannya dengan lebar garis. Luas minimum yang diperlukan untuk AA adalah keliling dikalikan 2 piksel, dan untuk AAA adalah keliling dikalikan 4 piksel.

WCAG memerlukan rasio kontras minimum 3:1 antara warna indikator fokus dan warna indikator non-fokus yang berdekatan (biasanya latar belakang elemen). Ini adalah rasio kontras yang sama yang diperlukan untuk objek grafis.

Ya. Semua penghitungan kepatuhan WCAG terjadi 100% di sisi klien di browser Anda. Nilai warna dan pengaturan desain Anda tidak pernah dikirim ke server mana pun, tidak pernah disimpan, dan tidak pernah dikirim ke mana pun.

Penguji indikator fokus menghasilkan aturan CSS :focus-visible yang dapat Anda salin langsung ke stylesheet Anda. Aturannya mencakup lebar garis, warna garis, offset garis, dan radius batas yang telah Anda konfigurasikan.

Penguji indikator fokus mendukung lima jenis elemen: tombol, input teks, tautan, kotak centang, dan elemen blok khusus. Anda juga dapat memilih dari 10 latar belakang elemen prasetel atau memasukkan warna khusus untuk latar belakang elemen dan teks.

Ya. Penguji indikator fokus 100% gratis tanpa perlu mendaftar, tanpa fitur premium, dan tanpa batasan penggunaan. Uji konfigurasi indikator fokus tanpa batas tanpa batasan atau biaya tersembunyi apa pun.