Menyembunyikan Ikon Dekoratif dengan aria-hidden
Jauhkan hiasan dari pohon aksesibilitas.
Menyembunyikan Ikon Dekoratif dengan aria-hidden adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.
Beberapa Ikon Tidak Mengatakan Apa-Apa
Hiasan kecil di samping label tidak menambahkan apa pun bagi pengguna pembaca layar. Mengumumkannya hanya menambah gangguan yang harus mereka lewati. 🔇
Kata Dekoratif
Ikon bersifat dekoratif jika menghapusnya tidak mengubah pemahaman pengguna. Teks di dekatnya sudah menyampaikan maknanya.
Sembunyikan dari Pohon
Atur aria-hidden="true" pada ikon dekoratif untuk mengeluarkannya dari pohon aksesibilitas sehingga pembaca layar melewatinya sepenuhnya.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>Ini Juga Menyembunyikan Anak
Satu aria-hidden="true" pada pembungkus menyembunyikan elemen tersebut dan semua isi di dalamnya, jadi tandai wadahnya, bukan setiap path.
alt Kosong Melakukan Hal yang Sama untuk img
Jika ikon dekoratif berupa <img>, berikan alt kosong. alt kosong memberi tahu pembaca layar untuk melewati gambar tersebut.
<img src="sparkle.png" alt="" />Jangan Pernah Menyembunyikan Isi yang Terlihat
Aturan emasnya: jangan menaruh aria-hidden pada apa pun yang diandalkan pengguna yang dapat melihat. Anda akan menghapus isi yang sebenarnya bagi sebagian orang.
Jangan Pernah Menyembunyikan Hal yang Dapat Difokuskan
Menaruh aria-hidden pada elemen yang dapat difokuskan menciptakan hantu: pengguna papan ketik dapat mencapai kontrol yang tidak mau mengumumkan dirinya kepada pembaca layar.
Padukan dengan focusable false
Untuk SVG sebaris dekoratif, tambahkan focusable="false" bersama aria-hidden agar tidak ada peramban yang memasukkannya ke urutan tab.
<svg aria-hidden="true" focusable="false">
<path d="..." />
</svg>Ikon yang Berulang Bersifat Dekoratif
Ikon tempat sampah di samping kata Hapus bersifat berulang. Sembunyikan ikon tersebut dan biarkan teks yang terlihat menyampaikan maksudnya kepada semua orang.
Waspadai Ikon Tunggal
Hati-hati: ikon tanpa teks di dekatnya biasanya bukan dekoratif. Menyembunyikannya akan membuat kontrol tersebut tidak bersuara dan tanpa nama.
Pastikan Ikon Benar-Benar Hilang
Di inspektur aksesibilitas, ikon yang disembunyikan dengan benar akan menghilang begitu saja dari pohon. Ruang kosong itu memang hasil yang Anda inginkan.
Pemeriksaan Singkat
Ikon tanda centang berada tepat di samping kata Lengkap yang terlihat. Apa yang harus Anda lakukan terhadap ikon tersebut?
Ringkasan: Sembunyikan Gangguan
Ikon dekoratif mendapat aria-hidden="true" (atau alt kosong) dan focusable false, tetapi jangan pernah menerapkannya pada isi yang dapat difokuskan atau isi unik. Lebih sedikit gangguan, halaman lebih jelas. 🎯
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 “Menyembunyikan Ikon Dekoratif dengan aria-hidden” gratis?
Ya — teks lengkap “Menyembunyikan Ikon Dekoratif dengan aria-hidden” 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 “Menyembunyikan Ikon Dekoratif dengan aria-hidden”?
Jauhkan hiasan dari pohon aksesibilitas. 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 2 dari 4.
Berapa lama pelajaran “Menyembunyikan Ikon Dekoratif dengan aria-hidden” 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
- SVG Sebaris: role img dan title
- Menyembunyikan Ikon Dekoratif dengan aria-hidden
- Tombol Ikon yang Tetap Memiliki Nama
- Fon Ikon dan Kendala Aksesibilitasnya