M

MLOG

Bahasa Indonesia

Panduan komprehensif untuk mengimplementasikan tooltip yang aksesibel menggunakan status hover dan fokus, memastikan kegunaan bagi semua pengguna, termasuk penyandang disabilitas.

Implementasi Tooltip: Informasi Aksesibel dengan Hover dan Fokus

Tooltip adalah pesan bantuan kontekstual kecil yang muncul saat pengguna mengarahkan pointer mouse atau fokus pada suatu elemen. Pesan ini dapat memberikan informasi tambahan, memperjelas tujuan elemen, atau menawarkan petunjuk tentang cara menggunakan suatu fitur. Namun, tooltip dapat dengan mudah menjadi mimpi buruk aksesibilitas jika tidak diimplementasikan dengan benar. Panduan ini menguraikan praktik terbaik untuk membuat tooltip yang dapat digunakan oleh semua orang, termasuk pengguna dengan disabilitas.

Mengapa Aksesibilitas Penting untuk Tooltip

Aksesibilitas bukan hanya tentang kepatuhan; ini tentang menciptakan pengalaman pengguna yang lebih baik untuk semua orang. Ketika tooltip tidak aksesibel, hal ini dapat mengecualikan pengguna yang mengandalkan teknologi bantu seperti pembaca layar, navigasi keyboard, atau input suara. Pertimbangkan skenario berikut:

Dengan mengikuti praktik terbaik aksesibilitas, kita dapat memastikan bahwa tooltip meningkatkan, bukan menghambat, pengalaman pengguna untuk semua.

Prinsip Utama untuk Tooltip yang Aksesibel

Prinsip-prinsip berikut sangat penting untuk menciptakan tooltip yang aksesibel:

  1. Sediakan akses alternatif: Pastikan tooltip dapat diakses melalui hover dan fokus keyboard.
  2. Gunakan atribut ARIA: Gunakan atribut ARIA (Accessible Rich Internet Applications) untuk mengidentifikasi dan mendeskripsikan tooltip dengan benar kepada teknologi bantu.
  3. Kelola fokus: Kontrol ke mana fokus diarahkan saat tooltip ditampilkan dan disembunyikan.
  4. Pastikan kontras yang cukup: Sediakan kontras warna yang cukup antara teks dan latar belakang tooltip.
  5. Berikan waktu yang cukup: Beri pengguna cukup waktu untuk membaca konten tooltip.
  6. Buat agar dapat ditutup: Sediakan cara yang jelas untuk menutup tooltip.
  7. Hindari penggunaan berlebihan: Gunakan tooltip secukupnya dan hanya jika diperlukan.

Teknik Implementasi

1. Menggunakan Hover dan Fokus

Aspek paling penting dari tooltip yang aksesibel adalah memastikan tooltip tersebut dapat diakses oleh pengguna mouse dan keyboard. Ini berarti tooltip harus muncul baik saat di-hover maupun saat elemen menerima fokus.

HTML:

<a href="#" aria-describedby="tooltip-example">Contoh Tautan</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Ini adalah contoh tooltip.</div>

CSS:

a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Pastikan tooltip berada di paling atas */
}

Penjelasan:

JavaScript (Kontrol Lanjutan - Opsional):

Meskipun CSS dapat menangani tampil/sembunyi sederhana, JavaScript memungkinkan kontrol yang lebih kuat, terutama ketika tooltip dibuat secara dinamis atau memerlukan perilaku yang lebih kompleks.

const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});

2. Menggunakan Atribut ARIA

Atribut ARIA sangat penting untuk memberikan informasi semantik kepada teknologi bantu. Berikut adalah rincian atribut-atribut utama:

Contoh:

<button aria-describedby="help-tooltip">Kirim</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Klik di sini untuk mengirimkan formulir.</div>

JavaScript (untuk aria-hidden):

const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

3. Mengelola Fokus

Saat tooltip muncul, umumnya tooltip *tidak boleh* merebut fokus dari elemen pemicunya. Fokus harus tetap pada elemen yang memicu tooltip. Ini memastikan bahwa pengguna keyboard dapat terus menavigasi halaman tanpa gangguan yang tidak terduga.

Namun, mungkin ada situasi di mana Anda *ingin* memindahkan fokus ke tooltip, terutama jika tooltip berisi elemen interaktif (misalnya, tautan, tombol). Dalam hal ini, pastikan bahwa:

Dalam kebanyakan kasus, menghindari manajemen fokus di dalam tooltip itu sendiri lebih disukai untuk kesederhanaan dan kegunaan.

4. Memastikan Kontras yang Cukup

Kontras warna sangat penting untuk keterbacaan. Pastikan bahwa warna teks di tooltip Anda memiliki kontras yang cukup terhadap warna latar belakang. Web Content Accessibility Guidelines (WCAG) merekomendasikan rasio kontras setidaknya 4.5:1 untuk teks normal dan 3:1 untuk teks besar (18pt atau 14pt tebal).

Gunakan pemeriksa kontras online untuk memverifikasi bahwa pilihan warna Anda memenuhi standar aksesibilitas. Contoh pemeriksa kontras meliputi:

Contoh (Kontras Baik):

.tooltip {
  background-color: #000;
  color: #fff;
}

Contoh (Kontras Buruk):

.tooltip {
  background-color: #fff;
  color: #eee;
}

5. Memberikan Waktu yang Cukup

Pengguna membutuhkan waktu yang cukup untuk membaca konten tooltip. Hindari tooltip yang menghilang terlalu cepat. Meskipun tidak ada angka ajaib, usahakan waktu tampilan minimal beberapa detik. Selain itu, tooltip harus tetap terlihat selama pengguna mengarahkan kursor atau fokus pada elemen pemicu. Jika Anda perlu menutup tooltip karena peristiwa lain, berikan indikator bahwa tooltip akan ditutup.

Jika konten tooltip panjang, pertimbangkan untuk menyediakan cara bagi pengguna untuk menutup tooltip secara manual (misalnya, tombol tutup atau menekan tombol Escape).

6. Membuatnya Dapat Ditutup

Meskipun tooltip seringkali hilang secara otomatis saat pengguna menjauhkan mouse atau menghilangkan fokus, adalah praktik yang baik untuk menyediakan cara yang jelas untuk menutupnya secara manual, terutama untuk tooltip yang panjang atau tooltip yang berisi elemen interaktif.

Metode untuk Menutup Tooltips:

Contoh (Tombol Tutup):

<div id="my-tooltip" role="tooltip" aria-hidden="true">
  Ini adalah konten tooltip saya.
  <button onclick="hideTooltip()">Tutup</button>
</div>

Contoh (Tombol Escape):

document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Ganti dengan fungsi sembunyikan tooltip Anda yang sebenarnya
  }
});

7. Menghindari Penggunaan Berlebihan

Tooltip harus digunakan secukupnya dan hanya jika memberikan informasi yang benar-benar membantu. Penggunaan tooltip yang berlebihan dapat mengacaukan antarmuka, mengalihkan perhatian pengguna, dan menciptakan pengalaman yang membuat frustrasi.

Alternatif untuk Tooltip:

Pertimbangan Lanjutan

Konten Dinamis

Jika konten tooltip Anda dibuat secara dinamis (misalnya, dimuat dari API atau diperbarui berdasarkan input pengguna), pastikan bahwa atribut aria-describedby dan visibilitas tooltip diperbarui sesuai. Gunakan JavaScript untuk mengelola pembaruan ini.

Penentuan Posisi

Pertimbangkan dengan cermat penentuan posisi tooltip Anda. Hindari menempatkannya dengan cara yang menutupi konten penting atau menyebabkan pergeseran tata letak. Perhatikan ukuran dan resolusi layar yang berbeda, dan gunakan CSS untuk memastikan bahwa tooltip selalu terlihat di dalam viewport.

Perangkat Seluler

Tooltip secara tradisional mengandalkan interaksi hover, yang tidak tersedia pada perangkat berbasis sentuhan. Untuk perangkat seluler, pertimbangkan untuk menggunakan metode interaksi alternatif, seperti:

Menguji Tooltip Anda

Uji tooltip Anda secara menyeluruh untuk memastikan tooltip tersebut dapat diakses oleh semua pengguna. Gunakan kombinasi pengujian manual dan alat pengujian aksesibilitas otomatis.

Metode Pengujian:

Internasionalisasi (i18n) dan Lokalisasi (l10n)

Saat mengembangkan tooltip untuk audiens global, pertimbangkan internasionalisasi dan lokalisasi:

Kesimpulan

Menerapkan tooltip yang aksesibel memerlukan perencanaan yang cermat dan perhatian terhadap detail. Dengan mengikuti prinsip dan teknik yang diuraikan dalam panduan ini, Anda dapat membuat tooltip yang dapat digunakan oleh semua orang, terlepas dari kemampuan mereka. Ingatlah bahwa aksesibilitas adalah proses yang berkelanjutan, jadi teruslah menguji dan menyempurnakan tooltip Anda untuk memastikan tooltip tersebut memenuhi kebutuhan semua pengguna Anda.

Sumber Daya

Implementasi Tooltip: Informasi Aksesibel dengan Hover dan Fokus | MLOG