Saat mendesain sebuah website, tentu kita ingin tampilannya terlihat bersih, modern, dan menarik.

Lalu Anda mencoba menekan tombol Tab pada keyboard.

Tiba-tiba muncul garis kotak biru atau hitam di sekeliling tombol yang sedang menerima fokus.

Banyak developer kemudian berpikir:

"Garis ini mengganggu tampilan."

Tanpa berpikir panjang, file CSS pun dibuka dan ditambahkan kode seperti berikut.

Seketika garis tersebut menghilang.

Website memang terlihat lebih bersih.

Namun tanpa disadari, Anda baru saja menghilangkan satu-satunya petunjuk visual yang dimiliki pengguna keyboard untuk mengetahui posisi fokus mereka.

Pada artikel ini kita akan membahas mengapa indikator fokus sangat penting, bagaimana WCAG mengaturnya, dan bagaimana membuat fokus keyboard tetap terlihat tanpa mengorbankan desain antarmuka.

Apa Itu Focus Indicator?

Ketika pengguna berpindah antar elemen menggunakan keyboard, browser akan memberikan tanda visual pada elemen yang sedang menerima fokus.

Tanda tersebut dikenal sebagai focus indicator, focus ring, atau focus outline.

Misalnya ketika pengguna menekan tombol Tab, fokus dapat berpindah ke:

1. tombol;
2. tautan;
3. kolom formulir;
4. kotak centang;
5. menu;
6. atau elemen interaktif lainnya.

Focus indicator membantu pengguna mengetahui posisi mereka saat melakukan navigasi menggunakan keyboard.

Siapa yang Membutuhkan Focus Indicator?

Banyak orang mengira indikator fokus hanya berguna bagi penyandang disabilitas.

Padahal manfaatnya jauh lebih luas.

Focus indicator sangat membantu:

1. pengguna yang mengandalkan keyboard karena gangguan motorik;
2. pengguna screen reader yang juga menggunakan keyboard untuk bernavigasi;
3. pengguna dengan gangguan penglihatan yang masih memiliki sisa penglihatan;
4. developer yang sedang menguji aksesibilitas;
5. bahkan siapa pun ketika mouse atau touchpad tidak dapat digunakan.

Tanpa indikator fokus, pengguna dapat terus menekan tombol Tab tanpa mengetahui elemen mana yang sedang aktif.

Mengapa Menghapus Outline Berbahaya?

Menghapus indikator fokus tanpa menyediakan pengganti membuat pengguna kehilangan orientasi ketika menggunakan keyboard.

Akibatnya:

1. pengguna tidak mengetahui posisi fokus;
2. tombol atau tautan yang sedang aktif menjadi tidak terlihat;
3. navigasi keyboard menjadi membingungkan;
4. sebagian pengguna mungkin mengira website tidak dapat digunakan.

Karena alasan inilah WCAG mengatur bahwa elemen yang menerima fokus harus memiliki indikator fokus yang dapat terlihat oleh pengguna.

Pada WCAG 2.1, hal ini diatur melalui Success Criterion 2.4.7 – Focus Visible.

Sementara pada WCAG 2.2, persyaratan mengenai tampilan indikator fokus diperkuat melalui Success Criterion 2.4.13 – Focus Appearance, yang memberikan ketentuan lebih rinci mengenai ukuran dan kontras indikator fokus.

Solusi Modern: Gunakan :focus-visible

Dahulu, developer hanya memiliki pseudo-class :focus.

Masalahnya, :focus aktif baik ketika elemen dipilih menggunakan keyboard maupun ketika diklik menggunakan mouse.

Akibatnya, banyak developer memilih menghapus outline sama sekali.

Saat ini browser modern telah mendukung pseudo-class :focus-visible.

Pseudo-class ini memungkinkan browser menampilkan indikator fokus terutama ketika pengguna melakukan navigasi menggunakan keyboard, sehingga pengalaman pengguna keyboard tetap baik tanpa mengganggu tampilan bagi pengguna mouse.

Contoh yang Kurang Tepat

Kode tersebut menghilangkan indikator fokus tanpa menyediakan pengganti.

Contoh yang Direkomendasikan

Dengan pendekatan ini:

1. pengguna keyboard tetap memperoleh indikator fokus yang jelas;
2. pengguna mouse tidak selalu melihat outline ketika melakukan klik;
3. tampilan website tetap bersih dan modern.

Catatan: Sebelum menghilangkan outline bawaan browser, pastikan Anda telah menyediakan indikator fokus pengganti yang setidaknya sama jelasnya.

Membuat Focus Indicator yang Menarik

Indikator fokus tidak harus berupa garis hitam atau biru bawaan browser.

Anda dapat membuat desain yang tetap konsisten dengan identitas visual website.

Contoh 1 – Efek Glow

Contoh 2 – Outline Putus-putus

Contoh 3 – Outline Tebal

Semua contoh di atas tetap dapat memberikan indikator fokus yang jelas selama memiliki kontras yang memadai.

Pastikan Kontras Warna Cukup

Indikator fokus harus mudah terlihat terhadap latar belakang maupun elemen yang sedang menerima fokus.

Sebagai contoh:

1. jika latar belakang berwarna putih, gunakan warna fokus yang cukup gelap;
2. jika latar belakang gelap, gunakan warna fokus yang terang;
3. hindari warna yang terlalu mirip dengan warna tombol atau latar belakang.

Indikator fokus yang sulit dibedakan sama saja dengan indikator yang tidak terlihat.

Kesalahan yang Sering Terjadi

Praktik Cepat: Menguji Navigasi Keyboard

Salah satu cara paling sederhana untuk memeriksa aksesibilitas adalah mencoba menggunakan website tanpa mouse.

Langkah-langkah

1. Buka halaman web yang ingin diperiksa.
2. Tekan tombol Tab berulang kali untuk berpindah antar elemen interaktif.
3. Tekan Shift + Tab untuk berpindah ke arah sebaliknya.

Kemudian perhatikan beberapa hal berikut.

1. Apakah fokus berpindah secara berurutan dan logis?
2. Apakah seluruh tombol, tautan, dan kolom formulir dapat dijangkau?
3. Apakah indikator fokus selalu terlihat dengan jelas?
4. Apakah ada elemen yang tidak dapat menerima fokus?

Jika Indikator Fokus Tidak Terlihat

Apabila indikator fokus menghilang atau sulit dikenali, periksa kembali CSS pada elemen tersebut.

Hindari menghapus indikator fokus tanpa menyediakan pengganti.

Jika menggunakan outline: none, pastikan Anda menggantinya dengan indikator fokus yang setidaknya sama jelasnya, misalnya menggunakan :focus-visible dengan outline, border, atau box-shadow yang memiliki kontras memadai.

Focus indicator bukan sekadar elemen dekoratif. Bagi banyak pengguna, indikator fokus merupakan satu-satunya cara untuk mengetahui posisi mereka saat bernavigasi menggunakan keyboard.

Daripada menghilangkan outline demi alasan estetika, buatlah indikator fokus yang selaras dengan desain website sekaligus tetap mudah dikenali. Dengan menggunakan :focus-visible dan memastikan indikator fokus memiliki ukuran serta kontras yang memadai, Anda dapat menciptakan antarmuka yang modern, nyaman digunakan, dan tetap memenuhi prinsip-prinsip aksesibilitas WCAG.