Dekoratif Simgeleri aria-hidden ile Gizleme
Süslemelerin erişilebilirlik ağacına girmesini önleyin.
Dekoratif Simgeleri aria-hidden ile Gizleme, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 2. 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.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Some Icons Say Nothing
A little flourish next to a label adds nothing for a screen reader user. Announcing it just adds noise they have to wade through. 🔇
The Word Decorative
An icon is decorative when removing it would not change what the user understands. The nearby text already carries the meaning.
Hide It From the Tree
Set aria-hidden="true" on a decorative icon to pull it out of the accessibility tree so screen readers skip it entirely.
<button>
<svg aria-hidden="true" focusable="false">...</svg>
Save
</button>It Hides Children Too
One aria-hidden="true" on a wrapper hides the element and everything inside it, so you mark the container, not each path.
Empty alt Does the Same for img
If the decorative icon is an <img>, give it an empty alt instead. An empty alt tells screen readers to skip the image.
<img src="sparkle.png" alt="" />Never Hide Visible Content
The golden rule: do not put aria-hidden on anything a sighted user relies on. You would erase real content for some people.
Never Hide Focusable Things
Putting aria-hidden on a focusable element creates a ghost: keyboard users land on a control screen readers refuse to announce.
Pair It With focusable false
For decorative inline SVGs, add focusable="false" alongside aria-hidden so no browser sneaks it into the tab order.
<svg aria-hidden="true" focusable="false">
<path d="..." />
</svg>Redundant Icons Are Decorative
A trash icon beside the word Delete is redundant. Hide the icon and let the visible text do the talking for everyone.
Watch for the Lone Icon
Careful: an icon with no nearby text is usually not decorative. Hiding it would leave the control silent and unnamed.
Confirm It Is Gone
In the accessibility inspector, a properly hidden icon simply vanishes from the tree. That empty spot is exactly what you want.
Quick Check
A checkmark icon sits right next to the visible word Complete. What should you do with the icon?
Recap: Hide the Noise
Decorative icons get aria-hidden="true" (or empty alt) and focusable false, never on focusable or unique content. Less noise, clearer pages. 🎯
Sıkça Sorulan Sorular
“Dekoratif Simgeleri aria-hidden ile Gizleme” dersi ücretsiz mi?
Evet — “Dekoratif Simgeleri aria-hidden ile Gizleme” 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.
“Dekoratif Simgeleri aria-hidden ile Gizleme” dersinde ne öğreneceğim?
Süslemelerin erişilebilirlik ağacına girmesini önleyin. 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 2. dersidir.
“Dekoratif Simgeleri aria-hidden ile Gizleme” 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
- Satır İçi SVG: role img ve title
- Dekoratif Simgeleri aria-hidden ile Gizleme
- Adı Olan Simge Düğmeleri
- Simge Yazı Tipleri ve Erişilebilirlik Tuzakları