Kamu harus :focus

Focus state adalah salah satu hal yang penting dalam elemen interaktif di web. Namun kadang-kadang, saya menemukan beberapa front-end developer menulis kode ini.

*:focus {
  outline: none;
}

Kode diatas mengilangkan styling bawaan yang diberikan browser. Entah itu keputusan karena pilihan desainer atau karena mereka tidak suka tampilannya. Khususnya ketika focus state diaktifkan setelah kita klik elemen interaktif seperti tombol.

Tetapi ini bukanlah praktek yang baik khususnya bagi untuk orang yang menggunakan keyboard untuk menjelajah internet karena menghilangkan styling bawaan pada focus state, mereka tidak mendapatkan tanda visual pada elemen mana yang mereka akses.

Hal terbaik yang seharusnya dilakukan adalah dengan cara mengatur focus state berdasarkan desain. Dan jika desainer hanya memberikan hover state tanpa focus state, mintalah untuk membuatnya karena hover dan focus adalah hal yang berbeda.

Tidak apa jika hover state hanya memiliki beberapa perubahan halus pada elemen seperti perubahan opacity latar belakang atau warna teks, tetapi, untuk focus state, perubahan harus cukup menonjol sehingga dapat langsung menarik perhatian pengguna.

Oleh dari itu hal tersebut disebut focus state karena intensinya adalah untuk membuat pengguna fokus ke elemen tersebut. Jika kamu tidak suka bagaimana focus state dipicu ketika kita klik elemen tertentu, kamu bisa menggunakan :focus-visible pseudo-selector untuk menanggulangi hal ini.

input:focus-visible {
  outline: thin solid tomato;
}

Dengan :focus-visible, styling akan hanya berlaku ketika pengguna fokus ke elemen tersebut dengan menggunakan keyboard saja. Anda juga bisa menambahkan styling ke orang tua dari elemen yang sedang di posisi fokus dengan :focus-within pseudo-selector.

.FormWrapper:focus-within {
  border: 2px solid tomato;
}

Semoga banyak developer dan desainer mulai menyadari bahwa state ini penting untuk orang - orang yang tidak bisa menjelajah internet menggunakan tetikus atau orang yang menggunakan pembaca layar (screen reader).