Grafik Interaktif yang Dapat Dinavigasi dengan Papan Ketik
Biarkan pengguna menjelajahi titik data tanpa tetikus.
Grafik Interaktif yang Dapat Dinavigasi dengan Papan Ketik adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 4 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Web Accessibility Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Arahkan Kursor Saja Tidak Cukup
Bagan interaktif sering kali menampilkan nilai hanya saat kursor diarahkan. Pengguna papan ketik dan sentuhan tidak pernah mengarahkan kursor, sehingga data tersebut tidak dapat mereka akses.
Buat Titik Data Dapat Difokuskan
Biarkan pengguna menekan Tab untuk mencapai setiap titik data atau rangkaian dengan memberi mereka tabindex="0". Kini papan ketik dapat menjangkau hal yang sebelumnya hanya dapat diarahkan dengan tetikus.
<circle tabindex="0" role="img" aria-label="March: 240 sales" />Setiap Titik Memerlukan Nama
Titik yang dapat difokuskan tetapi tidak mengumumkan apa pun tidak berguna. Beri masing-masing titik nama yang dapat diakses yang menyatakan label dan nilainya, seperti Maret, 240 penjualan.
Gunakan Tombol Panah untuk Berpindah Antar-Titik
Berpindah dengan Tab melalui 100 titik sangat melelahkan. Gunakan tombol panah untuk berpindah dari satu titik ke titik berikutnya, dan gunakan Tab untuk masuk ke atau keluar dari bagan.
Pola tabindex Berpindah
Pertahankan satu titik pada tabindex 0 dan titik lainnya pada -1, lalu pindahkan nilai 0 saat tombol panah ditekan. tabindex berpindah ini menjaga jumlah titik berhenti Tab tetap wajar.
Tampilkan Tooltip saat Fokus Juga
Apa pun yang ditampilkan tooltip saat kursor diarahkan, tampilkan juga saat fokus. Padukan setiap penangan mouseenter dengan penangan fokus agar kedua jenis masukan memberikan hasil yang sama.
point.addEventListener('focus', showTooltip);Pertahankan Cincin Fokus yang Terlihat
Sorot titik yang sedang fokus dengan garis luar atau penanda yang jelas. Tanpanya, pengguna papan ketik tidak tahu mereka sedang berada di mana.
Umumkan Perubahan dengan Bijak
Saat fokus berpindah ke titik baru, wilayah aria-live dapat membacakan nilainya. Ini membantu ketika label ditampilkan secara visual tetapi tidak berada dalam DOM.
<div aria-live="polite">March: 240 sales</div>Kelompokkan Bagan sebagai Figure
Bungkus seluruhnya dalam figure dengan nama agar pengguna dapat menemukannya dan melewatinya sebagai satu unit setelah selesai menjelajah.
<figure role="group" aria-label="Sales over time, interactive"> ... </figure>Selalu Pertahankan Tabel Cadangan
Interaktivitas adalah tambahan, bukan pengganti. Selalu pertahankan tabel data biasa agar pengguna memiliki cara sederhana ketika berpindah dengan tombol panah terlalu lambat.
Uji dengan Tab dan Tombol Panah
Singkirkan tetikus dan kendalikan bagan hanya dengan Tab dan tombol panah. Jika Anda tidak dapat mencapai setiap nilai, pengguna Anda juga tidak dapat. ⌨️
Pemeriksaan Singkat
Bagaimana seharusnya pengguna papan ketik berpindah di antara banyak titik data dalam bagan?
Rangkuman: Bagan yang Dapat Anda Kendalikan
Anda telah mempelajari cara membuat titik dapat difokuskan dan diberi nama, berpindah dengan tombol panah melalui tabindex berpindah, menampilkan hal yang sama saat fokus seperti saat kursor diarahkan, serta selalu mempertahankan tabel cadangan. 🚀
Belajar HTML dengan tutor AI — gratis
Tulis dan jalankan kode asli di browser kamu, dapatkan bantuan instan dari tutor AI 24/7, dan lanjutkan di mana kamu tinggalkan di web atau aplikasi.
- Kursus
- 30
- Pelajaran
- 120
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Grafik Interaktif yang Dapat Dinavigasi dengan Papan Ketik” gratis?
Ya — teks lengkap “Grafik Interaktif yang Dapat Dinavigasi dengan Papan Ketik” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Web Accessibility Academy, upgrade ke CoddyKit PRO. Kursus Web Accessibility Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Grafik Interaktif yang Dapat Dinavigasi dengan Papan Ketik”?
Biarkan pengguna menjelajahi titik data tanpa tetikus. Kamu berlatih Web Accessibility Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Web Accessibility Academy?
Tidak diperlukan pengalaman sebelumnya. Web Accessibility Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 4 dari 4.
Berapa lama pelajaran “Grafik Interaktif yang Dapat Dinavigasi dengan Papan Ketik” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Web Accessibility Academy ini?
Ya. Setiap pelajaran Web Accessibility Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Setiap Grafik Membutuhkan Alternatif Teks
- Cadangan Tabel Data
- Warna, Pola, dan Label Langsung
- Grafik Interaktif yang Dapat Dinavigasi dengan Papan Ketik