Amalan terbaik alat

Panduan ini meringkaskan amalan terbaik untuk petua yang boleh diakses, menarik dari pakar kebolehaksesan terkemuka.

Memahami ToolTips

Tooltips menawarkan petunjuk teks ringkas untuk elemen UI, muncul pada hover atau fokus. Definisi ringkas: Overlay bukan modal yang menyediakan teks tambahan, deskriptif mengenai kawalan UI. Secara kritikal, tooltip yang boleh diakses mengandungi

hanya teks deskriptif dan tiada elemen interaktif. Jika interaktiviti diperlukan, gunakan dialog sebaliknya.

Dua jenis tooltip

Tooltips melayani dua tujuan utama:

1. Pelabelan ikon: Untuk label ringkas (satu atau dua perkataan), gunakan atribut . Untuk konteks tambahan (mis., Kiraan pemberitahuan), menyediakan senarai ID yang dipisahkan ruang. aria-labelledby

   <button aria-labelledby="notification-count notification-label">
       <span id="notification-count">3</span>
       <span id="notification-label">Notifications</span>
   </button>
   <div role="tooltip" id="tooltip-label">Notifications</div>

2. Keterangan Kontekstual: Untuk deskripsi yang lebih lama, gunakan . Ikon itu sendiri memerlukan nama yang boleh diakses, disertakan sebagai teks tersembunyi dalam elemen. aria-describedby

   <button aria-describedby="tooltip-description">
       <span style="display:none;">Notifications</span>
       <span aria-hidden="true">?</span>
   </button>
   <div role="tooltip" id="tooltip-description">View and manage notification settings</div>

Essential Do's and don'ts

Do:

Gunakan
• atau aria-labelledby dengan sewajarnya. aria-describedby
menggunakan
• walaupun sokongan pembaca skrin semasa adalah terhad; Sokongan masa depan dapat bertambah baik. role="tooltip"
dibuka pada tetikus/fokus, tutup pada tetikus/kabur.
Mencegah pemecatan alat apabila melayang ke atas kandungannya.
membolehkan penutupan papan kekunci melalui kunci melarikan diri (WCAG 1.4.13).

Jangan:

Gunakan atribut
• (ia mempunyai masalah kebolehcapaian yang signifikan). title
Gunakan
• dengan aria-haspopup (tooltips tidak interaktif). role="tooltip"
Letakkan kandungan penting dalam tooltips; Pembaca skrin mungkin mengabaikan atribut Aria yang berkaitan.

Had dan alternatif

Tooltips sememangnya tidak dapat diakses untuk menyentuh peranti kerana kekurangan hover dan fokus. Penyelesaian terbaik adalah untuk mengintegrasikan label atau penerangan terus ke dalam reka bentuk. Untuk kandungan yang luas (termasuk elemen interaktif), pertimbangkan elemen toggletip atau

. Toggletips, sering ditunjukkan oleh ikon "i", mendedahkan maklumat di rantau langsung menggunakan <dialog></dialog>. role="status"

<button aria-controls="toggletip-content">
    <span aria-hidden="true">ⓘ</span>
</button>
<div id="toggletip-content" role="status" aria-live="assertive" style="display:none;">This clarifies whatever needs clarifying</div>

untuk lebih lanjut mengenai toggletips, rujuk sumber di bawah.

bacaan selanjutnya

menjelaskan hubungan antara popovers dan dialog (Zell Liew)
ToolTips dan toggletips (komponen inklusif)
Tooltips pada masa WCAG 2.1 (Sarah Higley)
Nota ringkas mengenai Aria-label, Aria-Labelledby, dan Aria-Depuncribedby (Léonie Watson)
beberapa tangan dengan elemen dialog HTML (Chris Coyier)

Atas ialah kandungan terperinci Amalan terbaik alat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!