Bir ekran okuyucunun kullanıcıya sesli kullanıcı arayüzü sunabilmesi için anlamlı öğelerin uygun etiketlerine veya metin alternatiflerine sahip olması gerekir. Bir etiket veya metin alternatifi, bir öğeye erişilebilirlik ağacında öğe anlamını ifade etmek için temel özelliklerden biri olan erişilebilir adını verir.
Bir öğenin adı öğenin rolüyle birleştirildiğinde, kullanıcılar ne tür bir öğeyle etkileşimde bulunduklarını ve öğenin sayfada nasıl temsil edildiğini anlayabilmeleri için kullanıcı bağlamını sağlar. Ad yoksa ekran okuyucu yalnızca öğenin rolünü bildirir. Bir sayfada gezinmeye çalıştığınızı ve herhangi bir ek bağlam olmadan "düğme", "onay kutusu", "resim" ifadelerini duymaya çalıştığınızı düşünün. Bu nedenle, iyi ve erişilebilir bir deneyim için etiketleme ve metin alternatiflerinin önemi büyüktür.
Bir öğenin adını inceleme
Chrome'un Geliştirici Araçları'nı kullanarak bir öğenin erişilebilir adını kolayca kontrol edebilirsiniz:
- Bir öğeyi sağ tıklayıp İncele'yi seçin. Bu, Geliştirici Araçları Öğe panelini açar.
- Nesne panelinde Erişilebilirlik bölmesini bulun.
»sembolünün arkasına gizlenmiş olabilir. - Hesaplanan Özellikler açılır listesinde Ad özelliğini bulun.
İster alt metni olan bir img ister label içeren bir input bakıyor olun, tüm bu senaryolar aynı sonuçla sonuçlanır: bir öğeye erişilebilir adını vermek.
Eksik ad olup olmadığını kontrol edin
Türüne bağlı olarak bir öğeye erişilebilir ad eklemenin farklı yolları vardır. Aşağıdaki tabloda, erişilebilir adlara ihtiyaç duyan en yaygın öğe türleri ve bunların nasıl ekleneceğiyle ilgili açıklamalar için bağlantılar verilmiştir.
| Öğe türü | Ad ekleme |
|---|---|
| HTML dokümanı | Dokümanları ve çerçeveleri etiketleme |
<frame> veya <iframe> öğeleri
|
Dokümanları ve çerçeveleri etiketleme |
| Resim öğesi sayısı | Resimler ve nesneler için metin alternatifleri ekleyin |
<input type="image"> öğe
|
Resimler ve nesneler için metin alternatifleri ekleyin |
<object> öğe
|
Resimler ve nesneler için metin alternatifleri ekleyin |
| Düğmeler | Etiket düğmeleri ve bağlantıları |
| Bağlantılar | Etiket düğmeleri ve bağlantıları |
| Form öğeleri | Form öğelerini etiketleme |
Dokümanları ve çerçeveleri etiketleme
Her sayfada, sayfanın neyle ilgili olduğunu kısaca açıklayan bir title öğesi olmalıdır. title öğesi, sayfaya erişilebilir adını verir. Ekran okuyucu sayfaya girdiğinde, duyurulan ilk metin bu olur.
Örneğin, aşağıdaki sayfanın başlığı "Mary's Maple Bar Hızlı Pişirme Tarifi" başlığına sahiptir:
<!doctype html>
<html lang="en">
<head>
<title>Mary's Maple Bar Fast-Baking Recipe</title>
</head>
<body>
…
</body>
</html>
Benzer şekilde, tüm frame veya iframe öğelerinin title özellikleri olmalıdır:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
Bir iframe içeriği kendi dahili title öğesini içerebilir. Ancak bir ekran okuyucu genellikle çerçeve sınırında durur ve öğenin rolünü ("çerçeve") ve title özelliği tarafından sağlanan erişilebilir adını bildirir. Bu sayede kullanıcı çerçeveye girmek mi yoksa atlamak istediğine karar verebilir.
Resimler ve nesneler için metin alternatifleri ekleyin
Görüntüye erişilebilir adını vermek için img ile birlikte her zaman alt özelliği bulunmalıdır. Resim yüklenemezse kullanıcıların resmin ne iletmeye çalıştığına dair bir fikir sahibi olmaları için yer tutucu olarak alt metni kullanılır.
İyi alt metni yazmak biraz sanatsal bir iş olsa da uygulayabileceğiniz birkaç kural vardır:
- Resimde, etrafındaki metnin okunması zor bir içerik olup olmadığını belirleyin.
- Böyle bir durum söz konusuysa içeriği mümkün olduğunca kısa ve öz bir şekilde iletin.
Resim, süsleme işlevi görüyor ve yararlı bir içerik sağlamıyorsa erişilebilirlik ağacından kaldırmak için boş bir alt="" özelliği ekleyebilirsiniz.
Bağlantı ve giriş olarak resimler
Bağlantı içine sarmalanmış bir resim, kullanıcının bağlantıyı tıkladığında nereye gideceğini tanımlamak için img alt özelliğini kullanmalıdır:
<a href="https://en.wikipedia.org/wiki/Google">
<img alt="Google's wikipedia page" src="google-logo.jpg">
</a>
Benzer şekilde, bir resim düğmesi oluşturmak için <input type="image"> öğesi kullanılıyorsa bu öğe, kullanıcı düğmeyi tıkladığında gerçekleşen işlemi açıklayan alt metni içermelidir:
<form>
<label>
Username:
<input type="text">
</label>
<input type="image" alt="Sign in" src="./sign-in-button.png">
</form>
Yerleştirilmiş nesneler
Genellikle Flash, PDF veya ActiveX gibi yerleştirmeler için kullanılan <object> öğeleri de alternatif metin içermelidir. Resimlere benzer şekilde, bu metin de öğe oluşturulamazsa görüntülenir. Alternatif metin, aşağıdaki "Yıllık rapor" gibi normal metin olarak object öğesinin içine yerleştirilir:
<object type="application/pdf" data="/report.pdf">
Annual report.
</object>
Etiket düğmeleri ve bağlantıları
Düğmeler ve bağlantılar genellikle bir sitenin deneyimi açısından hayati önem taşır ve her ikisinin de erişilebilir iyi adlarının olması önemlidir.
Düğmeler
Bir button öğesi, her zaman metin içeriğini kullanarak erişilebilir adını hesaplamaya çalışır. form parçası olmayan düğmelerde, erişilebilir iyi bir ad oluşturmak için ihtiyacınız olan tek şey metin içeriğinden dolayı net bir eylem yazmak olabilir.
<button>Book Room</button>
Bu kuralın yaygın bir istisnası simge düğmeleridir. Bir simge düğmesi, düğme için metin içeriğini sağlamak üzere bir resim veya simge yazı tipi kullanabilir. Örneğin, metni biçimlendirmek için "Ne Görüyorsan Onu Elde Edersin" (WYSIWYG) düzenleyicisinde kullanılan düğmeler genellikle yalnızca grafik simgelerden oluşur:
Simge düğmeleriyle çalışırken, aria-label özelliğini kullanarak düğmelerle açıkça erişilebilir bir ad vermek faydalı olabilir. aria-label, düğmenin içindeki metin içeriğini geçersiz kılarak işlemi ekran okuyucu kullanan herkese net bir şekilde açıklamanızı sağlar.
<button aria-label="Left align"></button>
Bağlantılar
Düğmelere benzer şekilde, bağlantılar da erişilebilir adlarını esasen metin içeriklerinden alır. Bağlantı oluştururken iyi bir püf noktası, bağlantının içine "Burada" veya "Devamı" gibi dolgu sözcükler yerine en anlamlı metin parçasını yerleştirmektir.
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
Bu, özellikle sayfadaki tüm bağlantıları listelemek için kısayollar sunan ekran okuyucular için faydalıdır. Bağlantılar yinelenen dolgu metinleriyle doluysa şu kısayollar çok daha az kullanışlı hale gelir:
Form öğelerini etiketleme
Bir etiketi, onay kutusu gibi bir form öğesiyle ilişkilendirmenin iki yolu vardır. Her iki yöntem de etiket metninin onay kutusu için bir tıklama hedefi olmasına neden olur. Bu, fare veya dokunmatik ekran kullanıcıları için de yararlı olur. Bir etiketi bir öğeyle ilişkilendirmek için:
- Giriş öğesini bir etiket öğesinin içine yerleştirme
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- Alternatif olarak, etiketin
forözelliğini kullanarak öğeninidözelliğine de bakabilirsiniz.
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
Onay kutusu doğru şekilde etiketlendiğinde ekran okuyucu, aşağıdaki VoiceOver örneğinde olduğu gibi öğenin onay kutusu rolüne sahip olduğunu, işaretli durumda olduğunu ve "Promosyon teklifleri alınsın mı?" olarak adlandırıldığını bildirebilir:
YAPILACAKLAR: DevSite - Think and Check and Check değerlendirmesi