Bağlantı erişilebilirliği
Anlamlı bağlantı metni ve aria-label kullanımını öğrenirsin.
Anlamlı bağlantı metni
Ekran okuyucu kullananlar bağlantıları metinden tanır. 'Tıkla', 'Buraya' ya da 'Devamı' gibi belirsiz metinler bağlamı anlatmaz; kullanıcı nereye gideceğini bilemez. Bunun yerine 'Tarifleri görüntüle' gibi açıklayıcı bir metin seç.
İyi bağlantı metni, cümleden koparınca da tek başına anlamlıdır. Sayfayı hızla taramak isteyenler de bağlantılara bakar; net metin herkese yardımcı olur.
aria-label özniteliği
Bazen bir bağlantı yalnızca bir simge ya da kısa bir sözcük içerir; örneğin bir ok işareti. Gören kullanıcı bağlamı çevresinden çıkarabilir, ama ekran okuyucu için bağlam eksik kalır. aria-label özniteliği bağlantıya ek bir açıklama ekler.
Örnek: <a href="/yardım" aria-label="Yardım sayfasını aç">?</a>. Ekran okuyucu '?' yerine 'Yardım sayfasını aç' diye okur. Gören kullanıcı yine '?' görür.
Uygulama aria-label'li bağlantı yaz
Bir bağlantı yaz. href ile /yardım adresine gitsin, metni yalnızca ? olsun ve aria-label özniteliğiyle değeri Yardım sayfasını aç olsun.
Örnek çözümü göster
<a href="/yardım" aria-label="Yardım sayfasını aç">?</a>Kendini test et
-
Aşağıdakilerden hangisi en anlamlı bağlantı metnidir?
- 'Tıkla'
- 'Buraya'
- 'Devamı'
- 'Tarifleri görüntüle'
Cevabı göster
'Tarifleri görüntüle' — Doğru. 'Tarifleri görüntüle' hedefi açıkça söyler.
-
aria-label özniteliğini ekle
<a href="/yardım" ____="Yardım sayfasını aç">Yardım</a>Cevabı göster
<a href="/yardım" aria-label="Yardım sayfasını aç">Yardım</a> -
Sorunu çözümle eşleştir
- 'Tıkla' metni
- Açıklayıcı metin kullan
- Sadece simge
- aria-label ekle
- 'Buraya' metni
- Bağlamı belirt
- Çok uzun bağlantı
- Kısa ve öz tut