0Pricing
Web Accessibility Academy · Ders

Satır İçi SVG: role img ve title

Ekran okuyucular için anlamlı bir grafiği adlandırın.

Satır İçi SVG: role img ve title, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Web Accessibility Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Web Accessibility Academy kursu toplamda 4 dersten oluşur.

Sözcüksüz Bir Görsel

Satır içi bir SVG gözün sevdiği şekiller çizer; ancak ekran okuyucu bir yol yığını görür ve bunun hakkında yararlı hiçbir şey söylemez. 🖼️

Anlamlı mı, Yoksa Yalnızca Güzel mi?

Herhangi bir ad vermeden önce şu soruyu sorun: Bu grafik anlamlı mı, yoksa yalnızca dekoratif mi? Tüm işaretleme seçiminiz bu yanıta göre şekillenir.

Tarayıcıya Bunun Bir Görsel Olduğunu Söyleyin

Anlamlı bir grafik için role="img" ekleyin; böylece yardımcı teknoloji tüm SVG'yi dağınık şekiller yerine tek bir görsel olarak değerlendirir.

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

title ile Ad Verin

SVG içindeki bir <title>, ekran okuyucunun grafik için sesli okuyacağı erişilebilir adı sağlar.

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

title Öğesini İlk Sıraya Koyun

<title> öğesini SVG'nin ilk alt öğesi olarak yerleştirin. Bazı ekran okuyucular, şekillerden önce geldiğinde bu öğeyi güvenilir biçimde algılar.

aria-labelledby ile Bağlayın

En güvenilir destek için title öğesine bir id verin ve svg öğesindeki aria-labelledby ile bu öğeye başvurun.

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

Kestirme Olarak aria-label

İşaretleme alanınız kısıtlı mı? svg üzerine eklenen bir aria-label, alt öğe olarak title gerektirmeden doğrudan ad verir. Ayrıca iç title metninin üzerine yazar.

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

Şekillere Değil, Anlama Ad Verin

Adı grafiğin görsel parçalarıyla değil, amacıyla yazın. Örneğin bir çizginin üzerindeki aşağı ok yerine İndir deyin.

desc Daha Uzun Ayrıntı Ekler

Kısa bir addan fazlasına mı ihtiyacınız var? Bir <desc> öğesi daha uzun bir açıklama içerir; ek bağlam için aria-describedby ile eşleştirilir.

<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 Eski IE Sorununa Yol Açar

Eski tarayıcılar SVG'lerin klavye odağını almasına izin verirdi. focusable="false" eklemek, etkileşimli olmayan bir grafiği sekme sırasının dışında tutar.

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

Denetleyicide Doğrulayın

Tarayıcınızın erişilebilirlik panelini açın ve SVG'nin amaçladığınız tam adla bir görsel olarak göründüğünü doğrulayın.

Hızlı Kontrol

Anlamlı bir satır içi SVG'nin sesli bir adla tek bir görsel olarak duyurulmasını istiyorsunuz. Bunu hangi birleşim sağlar?

Özet: Anlamlı Olanı Adlandırın

Anlamlı SVG'lere, amaçlarını belirten bir title veya aria-label ile birlikte role="img" verilir. Doğrulamak için inceleyin; böylece grafikleriniz sonunda konuşur. ✅

Sıkça Sorulan Sorular

“Satır İçi SVG: role img ve title” dersi ücretsiz mi?

Evet — “Satır İçi SVG: role img ve title” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Web Accessibility Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Web Accessibility Academy kursu toplamda 4 dersten oluşur.

“Satır İçi SVG: role img ve title” dersinde ne öğreneceğim?

Ekran okuyucular için anlamlı bir grafiği adlandırın. Web Accessibility Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Web Accessibility Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Web Accessibility Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Satır İçi SVG: role img ve title” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Web Accessibility Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Web Accessibility Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Satır İçi SVG: role img ve title
  2. Dekoratif Simgeleri aria-hidden ile Gizleme
  3. Adı Olan Simge Düğmeleri
  4. Simge Yazı Tipleri ve Erişilebilirlik Tuzakları
← Web Accessibility Academy Sayfasına Dön