Adı Olan Simge Düğmeleri
Metinsiz bir düğmeye açık ve erişilebilir bir etiket verin.
Adı Olan Simge Düğmeleri, CoddyKit'te ücretsiz bir Web Accessibility Academy dersidir. Bu, 4 dersinin 3. 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.
Sessiz Düğme Sorunu
İçinde yalnızca bir simge bulunan düğme göze anlaşılır görünür; ancak ekran okuyucu ne yaptığını açıklamadan yalnızca düğme diyebilir. 🔇
Her Denetimin Bir Adı Olmalıdır
Her etkileşimli denetimin erişilebilir bir adı olmalıdır. Metin düğmelerinde bu adı metin sağlar; yalnızca simge içeren bir düğmenin yararlanabileceği metin yoktur.
Düğmeye aria-label Ekleyin
En basit çözüm, içeriği yalnızca bir simge olsa bile eylemi adlandırmak için düğmenin kendisine aria-label eklemektir.
<button aria-label="Close">
<svg aria-hidden="true">...</svg>
</button>İçteki Simgeyi Gizleyin
İçteki simgeyi aria-hidden="true" ile işaretleyin. Ad düğmeye aittir; etiket mevcut olduğunda simge yalnızca dekorasyondur.
<button aria-label="Search">
<svg aria-hidden="true" focusable="false">...</svg>
</button>Veya Görsel Olarak Gizlenmiş Metin Kullanın
Gerçek metni mi tercih ediyorsunuz? visually-hidden sınıfıyla biçimlendirilmiş bir span ekleyin. Görme yetisine sahip kullanıcılar yalnızca simgeyi görür; ekran okuyucular sözcükleri seslendirir.
<button>
<svg aria-hidden="true">...</svg>
<span class="sr-only">Add to cart</span>
</button>sr-only CSS Nasıl Görünür
visually-hidden sınıfı, display none kullanmadan metni tek bir piksele kırpar. display none kullanmak metni ekran okuyuculardan da gizler.
.sr-only {
position: absolute;
width: 1px; height: 1px;
clip-path: inset(50%);
}Simgeyi Değil, Eylemi Adlandırın
Resmi değil, gerçekleşecek şeyi etiketleyin. trash can yerine Delete kullanın. Kullanıcılar glifin açıklamasını değil, eylemi belirten fiili ister.
title Özniteliğini Tek Başına Asla Kullanmayın
HTML title özniteliği ad olarak güvenilir değildir: dokunmatik ekran ve klavye kullanıcılarını tamamen göz ardı eder. Bunun yerine aria-label veya gizli metin kullanın.
Açıp Kapatan Düğmeler Durum Gerektirir
Sessize alma gibi simgeli bir açıp kapatma düğmesine, düğmenin şu anda açık mı kapalı mı olduğunu duyurması için aria-pressed de ekleyin.
<button aria-label="Mute" aria-pressed="false">
<svg aria-hidden="true">...</svg>
</button>Adı Durumla Eşleşir Tutun
Bir simge düğmesinin anlamı değişirse adını da güncelleyin. Oynat düğmesi duraklatmaya dönüştüyse artık Oynat değil, Duraklat demelidir.
Seslendirilen Adı Doğrulayın
Erişilebilirlik denetleyicisinde düğmeyi seçin ve hesaplanan adını okuyun. Bu ad eylemle eşleşmeli, kesinlikle boş olmamalıdır.
Hızlı Kontrol
Yalnızca büyüteç SVG'si içeren ve metni olmayan bir düğmeniz var. Ona nasıl erişilebilir bir ad verirsiniz?
Özet: Her Simge Düğmesini Adlandırın
Yalnızca simge içeren düğmelere aria-label veya görsel olarak gizlenmiş metin aracılığıyla ad verin, simgeyi gizleyin ve eylemi etiketleyin. Artık her düğme konuşur. ✅
Yapay zeka eğitmeniyle HTML öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 30
- Dersler
- 120
Sıkça Sorulan Sorular
“Adı Olan Simge Düğmeleri” dersi ücretsiz mi?
Evet — “Adı Olan Simge Düğmeleri” 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.
“Adı Olan Simge Düğmeleri” dersinde ne öğreneceğim?
Metinsiz bir düğmeye açık ve erişilebilir bir etiket verin. 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 3. dersidir.
“Adı Olan Simge Düğmeleri” 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ı