Sr-only tekniği

Ekran okuyucu için görsel gizleme tekniğini öğrenirsin.

Sr-only nedir?

Bir öğeyi görselden gizlemek ama ekran okuyucu için ulaşılabilir kılmak istediğinde sr-only tekniğini kullanırsın. Bu yöntem, öğeyi sayfa dışına taşır veya 1 piksele küçültür; gören kullanıcı fark etmez, ekran okuyucu yine de okur.

En yaygın kullanım yalnızca simge içeren düğmelerdir. Bir kapatma simgesinin yanına "Kapat" metnini sr-only olarak eklersin; gören kullanıcı simgeyi görür, ekran okuyucu metni söyler.

Sağlam sr-only yazımı

Sr-only'nin sağlam yazımı birkaç bildirimi bir araya getirir: position: absolute, width: 1px, height: 1px, padding: 0, margin: -1px ve overflow: hidden. En kritik bildirim clip: rect(0, 0, 0, 0) ya da yeni karşılığı clip-path: inset(50%) öğesidir.

Öğe 1 piksele küçülür ve kesilir; üzerindeki tıklanabilir alan korunur. Negatif kenar boşluğu, düzenin kaymaması için öğeyi sayfa dışına çeker.

Uygulama .sr-only sınıfını yaz

.sr-only seçicisi için bir bildirim bloğu yaz. Şu bildirimleri içersin: position: absolute, width: 1px, height: 1px, overflow: hidden ve clip: rect(0, 0, 0, 0). Beş bildirimi de her biri ayrı satırda yaz.

Örnek çözümü göster

/* sr-only sınıfını yaz */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

Kendini test et

Sr-only ne zaman kullanılır?
- Yalnızca simge içeren bir düğmeye ekran okuyucu metni eklemek
- Bir paragrafı hem görsel hem ekran okuyucudan gizlemek
- Bir görseli tam sayfa kaplayacak biçimde büyütmek
- Bir başlığın yazı tipini küçültmek
Cevabı göster

Yalnızca simge içeren bir düğmeye ekran okuyucu metni eklemek — Doğru. Simge düğmelerine sr-only ile gizli metin verirsin; gören simgeyi görür, ekran okuyucu metni okur.

Kırpma bildirimini yaz

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  ____;
  overflow: hidden;
}

Cevabı göster

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  clip: rect(0, 0, 0, 0);
  overflow: hidden;
}

Sr-only bildirimlerini eşle

position: absolute

Sayfa akışı dışına
width: 1px

1 piksel genişlik
clip: rect(0,0,0,0)

Kırpma dikdörtgeni
overflow: hidden

Taşmayı gizle

Sıradaki ders: Focus-visible

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler