Fon Ikon dan Kendala Aksesibilitasnya
Pahami mengapa fon glif sering dibaca sebagai karakter yang tidak bermakna.
Fon Ikon dan Kendala Aksesibilitasnya 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.
Apa Itu Font Ikon
Font ikon memetakan karakter ke gambar mesin terbang, sehingga sebuah huruf ditampilkan sebagai hati atau panah. Praktis untuk mengatur ukuran, tetapi dapat menimbulkan banyak masalah bagi pembaca layar.
Masalah Karakter Sampah
Banyak font ikon menyembunyikan gambar mesin terbang di area penggunaan pribadi Unicode. Saat font tidak aktif, pembaca layar mungkin membaca kotak acak atau huruf yang aneh.
Font Dapat Gagal Dimuat
Jika berkas font terblokir atau gagal dimuat, gambar mesin terbang cadangan akan ditampilkan menggantikan ikon Anda. Kini pengguna melihat karakter asing di tempat ikon yang jelas seharusnya berada.
Konten CSS Bukan Teks Sungguhan
Font ikon sering menyisipkan gambar mesin terbang melalui CSS pseudo-elements. Konten yang dihasilkan itu rapuh dan mudah salah dibaca oleh teknologi asistif.
i.icon-star::before {
content: "\e801";
}Sembunyikan Gambar Mesin Terbang Dekoratif
Jika gambar mesin terbang dari font ikon bersifat dekoratif, bungkuslah dan tambahkan aria-hidden="true" agar karakter yang tidak bermakna itu tidak pernah masuk ke pohon aksesibilitas.
<span class="icon-star" aria-hidden="true"></span>Gambar Mesin Terbang Bermakna Membutuhkan Teks
Saat gambar mesin terbang membawa makna, pasangkan ikon tersembunyi dengan teks visually hidden yang nyata agar maknanya tetap ada ketika font gagal dimuat.
<span class="icon-warn" aria-hidden="true"></span>
<span class="sr-only">Warning</span>Lembar Gaya Pengguna Dapat Merusaknya
Beberapa pengguna mengganti font untuk mengatasi disleksia atau gangguan penglihatan. Font mereka menggantikan font Anda, dan setiap gambar mesin terbang dari font ikon berubah menjadi huruf biasa.
Alat Penerjemahan Dapat Mengacaukannya
Terjemahan peramban dapat menukar karakter gambar mesin terbang dengan teks lain, sehingga ikon Anda berantakan karena secara teknis ikon tersebut adalah huruf, bukan gambar.
Mengapa SVG Lebih Unggul
SVG sebaris menghindari semua masalah ini: SVG merupakan gambar sungguhan, tetap berfungsi saat font diganti dan saat diterjemahkan, serta dapat menerima peran dan label dengan baik.
Beralih dari Font Ikon
Saran modern adalah menghentikan penggunaan font ikon dan menggantinya dengan SVG sebaris atau sprite SVG. Anda mendapatkan tampilan yang tajam dan jauh lebih sedikit jebakan aksesibilitas.
Uji dengan Menonaktifkan Font
Blokir font di alat pengembang lalu muat ulang. Jika Anda melihat karakter asing alih-alih ikon, cadangan dan label Anda perlu diperbaiki.
Pemeriksaan Singkat
Anda mewarisi halaman yang menggunakan font ikon untuk peringkat bintang yang bermakna. Apa perbaikan aksesibilitas yang paling aman?
Ringkasan: Perlakukan Font Ikon dengan Hati-Hati
Gambar mesin terbang dari font ikon adalah teks yang rapuh: sembunyikan gambar dekoratif dengan aria-hidden, dukung gambar yang bermakna dengan teks nyata, dan utamakan SVG. 🎯
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Fon Ikon dan Kendala Aksesibilitasnya” gratis?
Ya — teks lengkap “Fon Ikon dan Kendala Aksesibilitasnya” 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 “Fon Ikon dan Kendala Aksesibilitasnya”?
Pahami mengapa fon glif sering dibaca sebagai karakter yang tidak bermakna. 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 “Fon Ikon dan Kendala Aksesibilitasnya” 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