Ini akan menjadi postingan ke-2 dalam seri kecil yang kami lakukan tentang aksesibilitas formulir. Jika Anda melewatkan posting pertama, periksa Formulir yang Dapat Diakses dengan Kelas Pseudo. Dalam posting ini kita akan melihat :focus-visible dan cara menggunakannya di situs web Anda!

Titik Sentuh Fokus

Sebelum kita melanjutkan :focus-visible, mari kita lihat kembali caranya :focus berfungsi di CSS Anda. Fokus adalah indikator visual di mana suatu elemen berinteraksi melalui keyboard, mouse, trackpad, atau teknologi bantu. Elemen tertentu bersifat interaktif secara alami, seperti tautan, tombol, dan elemen formulir. Kami ingin memastikan bahwa pengguna kami mengetahui di mana mereka berada dan interaksi yang mereka lakukan.

Ingat jangan lakukan ini di CSS Anda!

:focus {
  outline: 0;
}

/*** OR ***/

:focus {
  outline: none;
}

Saat Anda menghapus fokus, Anda menghapusnya SETIAP ORANG! Kami ingin memastikan bahwa kami tetap mempertahankan fokus.

Jika karena alasan apa pun Anda perlu menghapus fokus, pastikan juga terdapat fallback :focus gaya untuk pengguna Anda. Penggantian tersebut dapat disesuaikan dengan warna merek Anda, namun pastikan warna tersebut juga dapat diakses. Jika bagian pemasaran, desain, atau pencitraan merek tidak menyukai gaya cincin fokus default, inilah saatnya untuk mulai berdiskusi dan berkolaborasi dengan mereka mengenai cara terbaik untuk menambahkannya kembali.

Apa itu focus-visible?

Kelas semu, :focus-visible, sama seperti default kami :focus kelas semu. Ini memberi pengguna indikator bahwa ada sesuatu yang sedang difokuskan pada halaman. Cara Anda menulis :focus-visible dipotong dan dikeringkan:

:focus-visible {
  /* ... */
}

Ketika menggunakan :focus-visible dengan elemen tertentu, sintaksnya terlihat seperti ini:

.your-element:focus-visible {
  /*...*/
}

Hal hebat tentang menggunakan :focus-visible apakah Anda dapat membuat elemen Anda menonjol, cerah dan berani! Tidak perlu khawatir akan muncul jika elemen diklik/disadap. Jika Anda memilih untuk tidak mengimplementasikan kelas tersebut, defaultnya adalah cincin fokus agen pengguna yang bagi sebagian orang tidak diinginkan.

Latar belakang dari focus-visible

Sebelum kami memiliki :focus-visible, gaya agen pengguna akan diterapkan :focus ke sebagian besar elemen pada halaman; tombol, tautan, dll. Ini akan menerapkan garis luar atau "cincin fokus" ke elemen yang dapat difokus. Ini dianggap jelek, sebagian besar tidak menyukai cincin fokus default yang disediakan browser. Karena cincin fokus tidak bagus untuk dilihat, sebagian besar penulis menghapusnya… tanpa cadangan. Ingat, saat Anda menghapus :focus, hal ini mengurangi kegunaan dan membuat pengalaman tidak dapat diakses oleh pengguna keyboard.

Dalam kondisi web saat ini, browser tidak lagi menunjukkan fokus di sekitar berbagai elemen saat elemen tersebut memiliki fokus. Sebaliknya, browser menggunakan berbagai heuristik untuk menentukan kapan heuristik akan membantu pengguna, dan sebagai imbalannya memberikan cincin fokus. Berdasarkan Khan Academy, heuristik adalah, “sebuah teknik yang memandu suatu algoritma untuk menemukan pilihan yang baik.”

Artinya, browser dapat mendeteksi apakah pengguna berinteraksi dengan pengalaman dari keyboard, mouse, atau trackpad dan berdasarkan jenis input tersebut, browser menambah atau menghapus cincin fokus. Contoh dalam postingan ini menyoroti interaksi input.

Pada hari-hari awal :focus-visible kami menggunakan a isi poli untuk menangani cincin fokus yang dibuat oleh Alice Boxhall dan Brian Kardell, Mozilla juga mengeluarkan kelas semunya sendiri, :moz-focusring, sebelum spesifikasi resmi. Jika Anda ingin mempelajari lebih lanjut tentang hari-hari awal ring fokus, bacalah Pemeran A11y dengan Rob Dodson.

Pentingnya Fokus

Ada banyak alasan mengapa fokus itu penting dalam lamaran Anda. Pertama, seperti yang saya nyatakan di atas, kita sebagai duta web harus memastikan bahwa kita memberikan pengalaman terbaik dan dapat diakses. Kami tidak ingin pengguna kami menebak di mana mereka berada saat mereka menavigasi pengalaman tersebut.

Salah satu contoh yang selalu terlintas dalam pikiran adalah Situs web Dua Saudara Buta. Jika Anda membuka situs web dan mengeklik/mengetuk (ini berfungsi di perangkat seluler), mata tertutup di pojok kiri bawah, Anda akan melihat mata terbuka dan simulasi dimulai. Kedua bersaudara, Bradford dan Bryan Manning, didiagnosis menderita Penyakit Stargardt pada usia muda. Penyakit Stargardt adalah salah satu bentuk degenerasi makula pada mata. Lama kelamaan kedua bersaudara itu akan menjadi buta total. Kunjungi situsnya dan klik mata untuk melihat bagaimana mereka melihatnya.

Jika Anda berada di posisi mereka dan harus menavigasi suatu halaman, Anda pasti ingin memastikan bahwa Anda tahu persis di mana Anda berada sepanjang pengalaman. Cincin fokus memberi Anda kekuatan itu.

Demo

Demo di bawah ini menunjukkan caranya :focus-visible berfungsi saat ditambahkan ke CSS Anda. Bagian pertama dari video menunjukkan pengalaman saat bernavigasi dengan mouse, bagian kedua menunjukkan bernavigasi hanya dengan keyboard saya. Saya merekam diri saya sendiri juga untuk menunjukkan bahwa saya beralih dari penggunaan mouse ke keyboard.

Browser memperkirakan apa yang harus dilakukan dengan cincin fokus berdasarkan masukan saya (keyboard/mouse), dan kemudian menambahkan cincin fokus ke elemen tersebut. Dalam hal ini, saat saya menavigasi contoh ini dengan keyboard, semuanya menjadi fokus. Saat menggunakan mouse, hanya input yang mendapat fokus dan tombolnya tidak. Jika Anda menghapus :focus-visible, browser akan menerapkan cincin fokus default.

Kode di bawah ini berlaku :focus-visible ke elemen yang dapat difokuskan.

:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Jika Anda ingin menentukan label atau tombol untuk menerima :focus-visible cukup awali kelas dengan input or button masing.

button:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

/*** OR ***/

input:focus-visible {
  outline-color: black;
  font-size: 1.2em;
  font-family: serif;
  font-weight: bold;
}

Bantuan

Jika browser tidak mendukung :focus-visible Anda dapat mengambil langkah mundur untuk menangani interaksi tersebut. Kode di bawah ini berasal dari Taman Bermain MDN. Anda dapat menggunakan @support sesuai aturan atau “permintaan fitur” untuk memeriksa dukungan. Satu hal yang perlu diingat, aturan harus ditempatkan di bagian atas kode atau disarangkan di dalam grup aturan lain.

<button class="button with-fallback" type="button">Button with fallback</button>
<button class="button without-fallback" type="button">Button without fallback</button>

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

Masalah Aksesibilitas Lebih Lanjut

Masalah aksesibilitas yang perlu diingat saat mengembangkan pengalaman Anda:

• Pastikan warna yang Anda pilih untuk indikator fokus Anda, jika ada, masih dapat diakses sesuai dengan informasi yang didokumentasikan dalam WCAG 2.2 Kontras Non-teks (Level AA)
• Kelebihan kognitif dapat menyebabkan kesusahan pengguna. Pastikan untuk menjaga konsistensi gaya pada berbagai elemen interaktif

Dukungan Browser

Link

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• PlatoData.Jaringan Vertikal Generatif Ai. Berdayakan Diri Anda. Akses Di Sini.
• PlatoAiStream. Intelijen Web3. Pengetahuan Diperkuat. Akses Di Sini.
• PlatoESG. Karbon, teknologi bersih, energi, Lingkungan Hidup, Tenaga surya, Penanganan limbah. Akses Di Sini.
• PlatoHealth. Kecerdasan Uji Coba Biotek dan Klinis. Akses Di Sini.
• Sumber: https://css-tricks.com/managing-user-focus-with-focus-visible/