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