Praktik terbaik keterangan alat

Dalam artikel ini, saya mencoba merangkum praktik terbaik yang disebutkan oleh beberapa pakar aksesibilitas dan karya mereka (seperti ini dan ini dan ini) menjadi satu artikel yang mudah dibaca, dipahami, dan diterapkan.

Mari kita mulai.

Apa itu tooltip?

Tooltip digunakan untuk memberikan petunjuk teks sederhana untuk kontrol antarmuka pengguna. Anggap saja sebagai tip alat. Itu pada dasarnya adalah gelembung kecil berisi konten teks yang muncul saat Anda mengarahkan kursor ke kontrol yang tidak berlabel (seperti ikon lonceng di Stripe).

Arahkan kursor ke ikon lonceng di bilah navigasi. Mengklik ikon tersebut akan memicu pemberitahuan yang ditampilkan di bawahnya. — Teks “Pemberitahuan” yang muncul saat Anda mengarahkan kursor ke ikon lonceng Stripe adalah keterangan alat.

Jika Anda lebih menyukai definisi yang lebih formal, Sarah Haley memberi kami definisi yang sangat bagus:

Tooltip adalah hamparan modeless (atau non-pemblokiran) yang berisi konten hanya teks yang memberikan informasi tambahan tentang kontrol UI saat ini. Ini disembunyikan secara default, dan tersedia saat Anda mengarahkan kursor atau fokus pada kontrol yang dijelaskannya.

Dia melanjutkan dengan mengatakan:

Definisi ini dapat dipersempit lebih lanjut dengan mengatakan bahwa tooltips seharusnya hanya menyediakan teks deskriptif.

Ini pada dasarnya adalah definisi yang sempit (menurut pengalaman saya) Bagaimana setiap pakar aksesibilitas mendefinisikan tooltips:

Tooltipnya adalah jendela pop-up.
Tooltip tidak boleh berisi konten interaktif.

Haydon Pickering melangkah lebih jauh dengan mengatakan: Jika Anda berpikir untuk menambahkan konten interaktif (bahkan jika… ok tombol), harus digunakan dialog alih-alih.

Dalam kata-katanya:

Anda berpikir dalam dialog. Gunakan kotak dialog.

Dua jenis tooltip

Tooltips terutama digunakan hanya untuk dua hal:

Tandai ikonnya
Berikan deskripsi kontekstual dari kode tersebut

Heydon dengan jelas membagi elemen-elemen ini menjadi dua kategori, “klasifikasi dasar” dan “deskripsi tambahan” dalam artikel Komponen Komprehensifnya di ToolTips dan ToggleTips).

Dua contoh ikon lonceng dengan konten ditampilkan di bawahnya, satu sebagai label utama dan satu lagi sebagai deskripsi tambahan.

Pelabelan

Jika tooltip Anda digunakan untuk memberi nama suatu simbol – hanya menggunakan satu atau dua kata – Anda harus menggunakannya aria-labelledby Atribut untuk memberi nama dengan benar karena melekat pada hal lain di halaman yang akan membantu pengenalannya.

<button aria-labelledby="notifications"> ... </button>
<div role="tooltip" id="notifications">Notifications</div>

Anda dapat memberikan informasi kontekstual, seperti membatasi jumlah notifikasi, dengan menampilkan daftar yang dipisahkan spasi idMengatakan aria-labelledby.

Ikon lonceng dengan lencana yang menunjukkan tiga notifikasi dan keterangan alat ditampilkan di sebelah kanan.

<button aria-labelledby="notifications-count notifications-label">  
  <!-- bell icon here --> 
  <span id="notifications-count">3</span>
</button>  

<div role="tooltip" id="notifications-label">Notifications</div>

Berikan deskripsi kontekstual

Jika keterangan alat Anda memberikan deskripsi kontekstual tentang ikon tersebut, Anda harus menggunakannya aria-describedby. Namun, saat Anda melakukan ini, Anda juga perlu memberikan nama yang dapat diakses untuk ikon tersebut.

Dalam hal ini, Heydon merekomendasikan untuk menyertakan label sebagai konten teks tombol. Label ini akan disembunyikan secara visual dari pengguna yang dapat melihat namun dapat dibaca oleh pembaca layar.

Lalu, Anda bisa menambahkan aria-describedby Untuk memasukkan deskripsi tambahan.

<button class="notifications" aria-describedby="notifications-desc">  
  <!-- icon for bell here --> 
  <span id="notifications-count">3</span> 
  <span class="visually-hidden">Notifications</span>
</button>  

<div role="tooltip" id="notifications-desc">View and manage notifications settings</div>

Di sini, pembaca layar akan mengucapkan “3 notifikasi” terlebih dahulu, diikuti dengan “Lihat dan kelola pengaturan notifikasi” setelah jeda singkat.

Berikut beberapa poin tambahan yang harus Anda waspadai:

melakukan:

digunakan aria-labellebdy atau aria-describedby Atribut bergantung pada jenis tooltip yang Anda buat.
menggunakan tooltip Meskipun tidak terlalu berdampak pada pembaca layar saat ini, hal ini dapat memperluas dukungan aksesibilitas untuk beberapa program.
Buka ToolTips aktif mouseover atau focusDan tutuplah mouseout atau blur.
Memungkinkan pengguna mouse untuk menggerakkan mouse ke atas konten tooltip tanpa mengabaikan tooltip.
Memungkinkan pengguna keyboard untuk menutup tooltip Escape Tombol, sesuai dengan Standar Sukses WCAG 1.4.13.

TIDAK:

Jangan gunakan title menjelaskan. Banyak yang telah dikatakan tentang hal ini, jadi saya tidak akan mengulanginya.
Jangan gunakan aria-haspopup atribut dengan tooltip Perannya karena aria-haspopup Menunjukkan konten interaktif sementara tooltip Harus berisi konten non-interaktif.
Jangan sertakan konten dasar di dalam tooltips karena beberapa pembaca layar mungkin mengabaikannya aria-labelledby atau aria-describedby. (Ini jarang terjadi tetapi mungkin).

ToolTips tidak dapat diakses oleh sebagian besar perangkat sentuh karena alasan berikut:

Pengguna tidak dapat mengarahkan kursor ke tombol pada perangkat yang mendukung sentuhan
Pengguna tidak dapat fokus pada tombol di perangkat sentuh.

Alternatif yang lebih baik adalah dengan tidak menggunakan tooltips, dan sebaliknya, temukan cara untuk menyertakan label atau teks deskriptif dalam desain.

Jika Tooltip berisi banyak konten — termasuk konten interaktif — Anda mungkin ingin menampilkan informasi tersebut dengan tooltip pengalih (atau cukup gunakan <dialog> komponen).

Heydon menjelaskan tips peralihan dengan baik dan ringkas:

Ada petunjuk sakelar untuk mengungkapkan balon informasi. Mereka sering kali berbentuk ikon “i” kecil.

Ikon informasi dengan pesan ditampilkan di sebelah kanannya sebagai pemberitahuan.

Kode informasi ini harus dibungkus dalam sebuah file <button> komponen. Saat dibuka, pembaca layar dapat mengumumkan teks di dalamnya melalui area langsung menggunakan tombol tersebut status peran.

<span class="tooltip-container"> 
  <button type="button" aria-label="more info">i</button> 
  <span role="status">This clarifies whatever needs clarifying</span>
</span>

Berbicara lagi tentang tip beralih mengalihkan perhatian dari artikel ini, jadi saya akan mengarahkan Anda ke artikel “Tooltips dan Tip Beralih” Heydon jika Anda tertarik untuk menelusuri lubang kelinci pendek itu.

Itu saja yang perlu Anda ketahui tentang tooltips dan praktik terbaiknya saat ini!

Bacaan lebih lanjut

Memperjelas hubungan antara Popover dan Kotak Dialog (Zell Liew)
Tooltip dan tip beralih (komponen global)
Tooltip di Masa WCAG 2.1 (Sarah Higley)
Catatan singkat tentang aria-label, aria-labelledbyDan aria-describedby (Leonie Watson)
Beberapa elemen dialog HTML praktis (Chris Cowher)

Praktik Terbaik Tooltip awalnya diterbitkan di CSS-Tricks, yang merupakan bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.

Sumber