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

Sıradaki ders: Skip link

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler