Intinya...

Ketika konten tambahan muncul saat hover atau fokus, konten tersebut harus

  • tetap terlihat sampai pengguna menutupnya atau konten tidak lagi valid,
  • bisa ditutup (misal menggunakan tombol [esc]), dan
  • tetap muncul selama di-hover atau fokus.

Apa itu WCAG 1.4.13?

Ketika konten muncul saat hover atau fokus, pengguna harus dapat:

  • Menutupnya
  • Berinteraksi dengan konten tanpa konten tersebut menghilang
  • Memiliki cukup waktu untuk membaca atau berinteraksi dengannya

Ini berlaku untuk konten yang dipicu oleh hover atau fokus keyboard seperti tooltip, sub-menu, atau pop-up. Hal ini memastikan bahwa elemen-elemen tersebut dapat ditutup, dapat di-hover, dan tetap terlihat tanpa mengganggu pengalaman membaca pengguna atau menyebabkan mereka melewatkan konten.

Contoh tooltip, menu dropdown, dan pop-up

Ilustrasi tiga jenis konten umum yang dipicu oleh hover atau fokus: tooltip yang menjelaskan tombol, sub-menu yang muncul dari menu navigasi atas, dan pop-up bergaya modal.

Mengapa ini penting?

Ketika konten tidak dapat ditutup, di-hover, atau tidak persisten, hal itu dapat menimbulkan frustrasi signifikan bagi pengguna atau membuat halaman tidak dapat digunakan. Jika pengguna tidak dapat menutup konten tambahan, itu bisa menutupi bagian-bagian penting dari halaman, sehingga menghalangi interaksi dengan konten asli. Misalnya, tooltip atau pop-up yang tidak bisa ditutup dapat sepenuhnya menyembunyikan informasi penting atau tombol.

Ketika konten yang dapat di-hover menghilang segera setelah kursor bergerak menjauh, pengguna mungkin tidak pernah mendapat kesempatan untuk membaca atau berinteraksi dengannya sepenuhnya. Ini menjadi tantangan bagi orang yang membutuhkan lebih banyak waktu untuk memproses konten atau yang mengandalkan pembesaran layar, di mana pergerakan kursor mungkin memerlukan pemindahan di layar yang diperbesar.

Jika konten tidak persisten dan hilang terlalu cepat, hal ini dapat membuat pengguna bingung atau frustrasi, terutama mereka yang memiliki gangguan kognitif atau motorik. Mereka mungkin tidak menyadari apa yang terjadi atau tidak memiliki waktu untuk berinteraksi dengan konten tersebut.

Siapa yang terpengaruh?

Pengguna low vision dan penglihatan terbatas, pengguna dengan gangguan motorik, dan pengguna dengan gangguan kognitif.

Pengguna low vision dan penglihatan terbatas mungkin membutuhkan lebih banyak waktu untuk membaca atau menutup konten atau mungkin merasa kesulitan untuk menjaga posisi kursor di tempat yang tepat pada layar yang diperbesar.

Pengguna dengan gangguan motorik mungkin merasa kesulitan untuk menjaga pergerakan kursor dengan tepat agar konten tetap terlihat cukup lama untuk dibaca atau berinteraksi dengannya.

Pengguna dengan gangguan kognitif mungkin kesulitan memahami konten yang tidak dapat diprediksi. Mereka mungkin tidak tahu apa yang menyebabkan konten muncul atau tidak tahu bahwa mereka harus membaca dengan cepat.

Cara menerapkan WCAG 1.4.13

Bagian ini menawarkan penjelasan yang disederhanakan dan contoh-contoh untuk membantu kamu memulai. Untuk panduan lengkap, selalu rujuk ke dokumentasi resmi WCAG.

Buat konten yang muncul pada fokus atau hover bisa ditutup, dapat di-hover, dan persisten

Periksa bahwa konten apa pun yang muncul akibat tindakan fokus keyboard atau hover bisa ditutup, tidak menghilang begitu saja, dan pengguna memiliki cukup waktu untuk membaca atau berinteraksi dengan konten tersebut.

Aksi yang dipicu oleh hover

Semua konten yang dipicu oleh hover harus memenuhi tiga persyaratan. Berikut artinya:

  • Dapat di-hover: Kursor bisa dipindahkan ke konten tambahan tanpa konten tersebut menghilang.
  • Persisten: Konten tambahan tetap terlihat dan tidak menutup secara otomatis.
  • Dapat ditutup: Konten dapat ditutup dengan menekan tombol Esc, menekan shortcut lain, atau mengaktifkan pemicu yang sama yang membukanya.

Aksi yang dipicu oleh fokus keyboard

Semua konten yang dipicu oleh fokus harus memenuhi dua persyaratan. Berikut artinya:

  • Persisten: Konten tambahan tetap terlihat dan tidak menutup secara otomatis.
  • Dapat ditutup: Konten dapat ditutup dengan menekan tombol Esc, menekan shortcut lain, atau memindahkan fokus keluar.

Penerapan fokus keyboard pada tooltip yang dijelaskan di caption

Ilustrasi dari tooltip yang dapat dihover, ditutup, dan persisten. Ilustrasi sisi-demi-sisi dari semua persyaratan ini ditampilkan.

ARIA role="tooltip"

Gunakan atribut ARIA seperti role="tooltip". Atribut ini memberi sinyal kepada teknologi bantu, seperti screen reader, bahwa konten terkait adalah tooltip dan menjelaskan bahwa ini memberikan informasi tambahan tentang elemen tertentu.

Saat dipadukan dengan atribut aria-describedby, kamu dapat menghubungkan tooltip dengan pemicu sehingga screen reader dapat mengumumkan konten tooltip saat pemicu mendapatkan fokus.

Pseudo-class CSS

Menggunakan pseudo-class CSS seperti :hover dan :focus memungkinkan kamu untuk mengontrol bagaimana elemen berperilaku dan terlihat saat pengguna berinteraksi dengannya.

  • :hoverL Menerapkan gaya saat pengguna mengarahkan pointer (mouse atau trackpad) ke elemen.
  • :focus: Menerapkan gaya saat elemen menerima fokus keyboard, seperti ketika pengguna menekan tombol tab ke tombol atau kolom input.

Pseudo-class ini membantu mendesain status interaktif, tetapi mereka tidak mengontrol perilaku seperti menutup konten. Gunakan JavaScript atau atribut ARIA untuk interaksi tersebut.

Kesimpulan

Konten yang dipicu oleh hover dan fokus bisa sangat membantu jika dirancang dengan baik. Dengan membuatnya dapat ditutup, di-hover, dan persisten, kamu menciptakan pengalaman yang lebih lancar dan inklusif untuk semua orang.