0Pricing
Web Accessibility Academy · Pelajaran

SVG Sebaris: role img dan title

Beri nama yang bermakna pada grafik agar dapat dibaca pembaca layar.

SVG Sebaris: role img dan title adalah pelajaran Web Accessibility Academy gratis di CoddyKit. Ini adalah pelajaran 1 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.

Gambar Tanpa Kata

SVG sebaris menggambar bentuk yang indah bagi mata, tetapi pembaca layar hanya melihat kumpulan path dan tidak mengatakan apa pun yang berguna tentangnya. 🖼️

Bermakna atau Hanya Indah?

Sebelum memberi nama apa pun, ajukan satu pertanyaan: apakah grafik ini bermakna atau murni dekoratif? Seluruh pilihan markup Anda bergantung pada jawaban tersebut.

Beri Tahu Peramban bahwa Ini Gambar

Untuk grafik yang bermakna, tambahkan role="img" agar teknologi bantu memperlakukan seluruh SVG sebagai satu gambar, bukan kumpulan bentuk terpisah.

<svg role="img" viewBox="0 0 24 24">
  <path d="M12 2 L22 22 H2 Z" />
</svg>

Beri Nama dengan title

<title> di dalam SVG menyediakan nama aksesibel yang akan dibacakan pembaca layar untuk grafik tersebut.

<svg role="img" viewBox="0 0 24 24">
  <title>Warning</title>
  <path d="M12 2 L22 22 H2 Z" />
</svg>

Letakkan title di Awal

Letakkan <title> sebagai anak pertama SVG. Beberapa pembaca layar hanya dapat mengambilnya dengan andal jika title berada sebelum bentuk-bentuknya.

Hubungkan dengan aria-labelledby

Untuk dukungan yang sangat andal, berikan title sebuah id dan tunjuk title tersebut dengan aria-labelledby pada elemen svg.

<svg role="img" aria-labelledby="t1">
  <title id="t1">Search</title>
  <path d="..." />
</svg>

aria-label sebagai Jalan Pintas

Markup terbatas? aria-label pada svg dapat langsung memberinya nama tanpa title anak. Atribut ini juga menggantikan teks title di dalamnya.

<svg role="img" aria-label="Home">
  <path d="M3 11 L12 3 L21 11" />
</svg>

Beri Nama Maknanya, Bukan Bentuknya

Tulis nama berdasarkan tujuan grafik, seperti Unduh, bukan berdasarkan bagian visualnya seperti panah ke bawah di atas garis.

desc Menambahkan Perincian Lebih Panjang

Memerlukan lebih dari sekadar nama singkat? Elemen <desc> memuat deskripsi yang lebih panjang, yang dipasangkan melalui aria-describedby untuk memberikan konteks tambahan.

<svg role="img" aria-labelledby="t2" aria-describedby="d2">
  <title id="t2">Sales chart</title>
  <desc id="d2">Revenue rose each quarter in 2025.</desc>
</svg>

focusable Mengganggu IE Lama

Peramban lama memungkinkan SVG menerima fokus papan ketik. Menambahkan focusable="false" membuat grafik non-interaktif tidak masuk ke urutan tab.

<svg role="img" focusable="false" aria-label="Star">
  <path d="..." />
</svg>

Verifikasi di Inspektur

Buka panel aksesibilitas peramban Anda dan pastikan SVG ditampilkan sebagai gambar dengan nama persis seperti yang Anda inginkan.

Pemeriksaan Singkat

Anda ingin SVG sebaris yang bermakna diumumkan sebagai satu gambar dengan nama yang dibacakan. Kombinasi mana yang melakukannya?

Ringkasan: Beri Nama yang Bermakna

SVG yang bermakna mendapat role="img" ditambah title atau aria-label yang menyebutkan tujuannya. Periksa untuk memastikan, dan grafik Anda akhirnya dapat berbicara. ✅

Pertanyaan yang Sering Diajukan

Apakah pelajaran “SVG Sebaris: role img dan title” gratis?

Ya — teks lengkap “SVG Sebaris: role img dan title” 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 “SVG Sebaris: role img dan title”?

Beri nama yang bermakna pada grafik agar dapat dibaca pembaca layar. 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 1 dari 4.

Berapa lama pelajaran “SVG Sebaris: role img dan title” 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

  1. SVG Sebaris: role img dan title
  2. Menyembunyikan Ikon Dekoratif dengan aria-hidden
  3. Tombol Ikon yang Tetap Memiliki Nama
  4. Fon Ikon dan Kendala Aksesibilitasnya
← Kembali ke Web Accessibility Academy