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

Sıradaki ders: Buton vs bağlantı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler