Saklı başlık
Sadece ekran okuyucu için başlık ve metin yazmayı öğrenirsin.
Saklı metin nedir?
Bazen bir öğenin görünen metni olmaz ya da çok kısadır. Bir <button> içinde sadece bir ok simgesi (→) varsa, gören kişi 'sonraki' anlar; ama ekran okuyucu yalnızca 'ok' duyar. Saklı metin bu boşluğu doldurur: görsel olarak gizlenir ama ekran okuyucuya okunur.
Bu tekniğe İngilizce visually hidden (görsel olarak gizli) ya da sınıf adıyla sr-only denir. Amacı erişilebilir adı güçlendirmektir.
sr-only sınıfı nasıl yazılır?
Saklı metin yazmak için bir <span> içine metni koy ve class="sr-only" ekle. Önemli: sr-only bir HTML özelliği değil, bir CSS sınıfıdır; çalışması için sayfanda bu sınıfı tanımlayan bir <style> bloğu olmalı (örneğin .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }). CSS olmadan metin ekranda görünür ve amaç bozulur.
Örnek: <button>→<span class="sr-only">Sonraki</span></button>. Gören kişi yalnızca ok simgesini görür, ekran okuyucu ise 'Sonraki' diye okur. Bu tekniği ikon düğmeler ve görsel olarak gizlenmesi gereken ek açıklamalar için kullan.
Uygulama İkon düğmeye sr-only span ekle
Body içine bir <button> ekle. Görünen metin olarak bir ok simgesi → koy. Düğmenin içinde bir <span class="sr-only"> ekle ve metni Sonraki yap.
Örnek çözümü göster
<body>
<button>→<span class="sr-only">Sonraki</span></button>
</body>Kendini test et
-
Bir ikon düğmeye sr-only span ne zaman eklenir?
- Düğmenin metni yeterince uzun olduğunda
- Düğmenin rengi soluk olduğunda
- Düğme çok küçük olduğunda
- Düğmede sadece bir simge olduğunda
Cevabı göster
Düğmede sadece bir simge olduğunda — Doğru. Sadece simge içeren düğmelerde ekran okuyucu için ek ad gerekir.
-
İkon düğmeye sr-only ekle
<button>→<span class="____">Sonraki</span></button>Cevabı göster
<button>→<span class="sr-only">Sonraki</span></button> -
Tekniği amacıyla eşleştir
- sr-only
- Metni görsel olarak gizler
- aria-label
- Kısa adı doğrudan yazar
- aria-describedby
- Ek açıklama bağlar
- role
- Görevi söyler