Ekran okuyucunun kullanıcıya sesli kullanıcı arayüzü sunabilmesi için anlamlı öğelerin uygun etiketlere veya metin alternatiflerine sahip olması gerekir. Etiket veya metin alternatifi, bir öğeye erişilebilir adını verir. Bu ad, erişilebilirlik ağacında öğe anlamlarını ifade etmek için önemli özelliklerden biridir.
Bir öğenin adı, öğenin rolüyle birleştirildiğinde kullanıcıya bağlam bilgisi verir. Böylece kullanıcı, hangi tür bir öğeyle etkileşimde bulunduğunu ve bu öğenin sayfada nasıl temsil edildiğini anlayabilir. Ad yoksa ekran okuyucu yalnızca öğenin rolünü duyurur. Bir sayfada gezinmeye çalışırken ek bağlam bilgisi olmadan "düğme", "onay kutusu", "resim" gibi ifadeleri duyduğunuzu düşünün. Bu nedenle, etiketleme ve metin alternatifleri, iyi ve erişilebilir bir deneyim için çok önemlidir.
Bir öğenin adını inceleme
Chrome'un Geliştirici Araçları'nı kullanarak bir öğenin erişilebilir adını kontrol etmek kolaydır:
- Bir öğeyi sağ tıklayın ve İncele'yi seçin. Bu işlem, DevTools'un Öğeler panelini açar.
- Öğeler panelinde Erişilebilirlik bölmesini bulun.
»sembolünün arkasında gizlenmiş olabilir. - Hesaplanmış Özellikler açılır menüsünde Ad özelliğini bulun.
alt metni içeren bir img veya label içeren bir input'ye bakıyor olsanız da tüm bu senaryolar aynı sonuca yol açar: Bir öğeye erişilebilir adı verilir.
Eksik adları kontrol etme
Bir öğeye erişilebilir bir ad eklemenin, türüne bağlı olarak 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ğine dair açıklamaların bağlantıları listelenmiş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 | Düğmeleri ve bağlantıları etiketleme |
| Bağlantılar | Düğmeleri ve bağlantıları etiketleme |
| 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 ilk olarak bu metin okunur.
Örneğin, aşağıdaki sayfanın başlığı "Mary'nin Hızlı Pişirilen Akçaağaçlı Bar Tarifi"dir:
<!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 öğelerinde title özellikleri olmalıdır:
<iframe title="An interactive map of San Francisco" src="…"></iframe>
Bir iframe öğesinin içeriği kendi dahili title öğesini içerebilir ancak ekran okuyucular 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ı duyurur. Bu sayede kullanıcı, çerçeveye girip girmeyeceğine karar verebilir.
Resimler ve nesneler için metin alternatifleri ekleme
Resme erişilebilir adını vermek için img öğesinin yanında her zaman bir alt özelliği bulunmalıdır. Resim yüklenemezse alt metni, kullanıcıların resmin ne anlatmaya çalıştığı hakkında fikir sahibi olması için yer tutucu olarak kullanılır.
İyi bir alt metni yazmak biraz sanattır ancak uygulayabileceğiniz birkaç kural vardır:
- Resmin, etrafındaki metni okuyarak elde edilmesi zor olan içerikler sağlayıp sağlamadığını belirleyin.
- Bu durumda, içeriği mümkün olduğunca kısa bir şekilde aktarın.
Resim, süsleme görevi görüyorsa ve yararlı bir içerik sağlamıyorsa erişilebilirlik ağacından kaldırmak için resme boş bir alt="" özelliği atayabilirsiniz.
Bağlantı ve giriş olarak resimler
Bağlantıya yerleştirilmiş bir resim, kullanıcının bağlantıyı tıkladığında nereye gideceğini açıklamak için img'nin 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, resim düğmesi oluşturmak için bir <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şik nesneler
Genellikle Flash, PDF veya ActiveX gibi yerleşimler için kullanılan <object> öğeleri de alternatif metin içermelidir. Resimlere benzer şekilde bu metin, öğe oluşturulamazsa gösterilir. 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>
Düğmeleri ve bağlantıları etiketleme
Düğmeler ve bağlantılar genellikle bir sitenin deneyimi açısından çok önemlidir. Bu nedenle, her ikisinin de erişilebilir adlara sahip olması önemlidir.
Düğmeler
button öğeleri, erişilebilir adlarını her zaman metin içeriklerini kullanarak hesaplamaya çalışır. form'ün parçası olmayan düğmeler için metin içeriği olarak net bir işlem yazmak, erişilebilir bir ad oluşturmak için tek ihtiyacınız olan şey olabilir.
<button>Book Room</button>
Bu kuralın yaygın bir istisnası simge düğmeleridir. Simge düğmeleri, düğmenin metin içeriğini sağlamak için resim veya simge yazı tipi kullanabilir. Örneğin, metni biçimlendirmek için bir WYSIWYG (Gördüğünüz Gibi Olsun) düzenleyicisinde kullanılan düğmeler genellikle yalnızca grafik simgelerinden oluşur:
Simge düğmeleriyle çalışırken aria-label özelliğini kullanarak bunlara açık bir erişilebilir ad vermek yararlı olabilir. aria-label, düğmedeki tüm metin içeriklerini geçersiz kılar. Böylece, ekran okuyucu kullanan herkese işlemi net bir şekilde açıklayabilirsiniz.
<button aria-label="Left align"></button>
Bağlantılar
Düğmelere benzer şekilde, bağlantıların erişilebilir adı temel olarak metin içeriklerinden alınır. Bağlantı oluştururken "Buraya" veya "Devamı" gibi doldurma kelimeleri yerine en anlamlı metni bağlantıya eklemek iyi bir fikirdir.
Check out our guide to web performance <a href="/guide">here</a>.
Check out <a href="/guide">our guide to web performance</a>.
Bu özellik, özellikle sayfadaki tüm bağlantıları listelemek için kısayollar sunan ekran okuyucular için kullanışlıdır. Bağlantılar tekrar eden dolgu metinlerle doluysa bu 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. Bu yöntemlerden herhangi biri, etiket metninin onay kutusunun tıklama hedefi olmasına da neden olur. Bu, fare veya dokunmatik ekran kullanıcıları için de yararlıdır. Bir etiketi bir öğeyle ilişkilendirmek için:
- Giriş öğesini bir etiket öğesinin içine yerleştirin
<label>
<input type="checkbox">Receive promotional offers?</input>
</label>
- Alternatif olarak, etiketin
forözelliğini kullanın ve öğeninidözelliğine referans verin.
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>
Onay kutusu doğru şekilde etiketlendiğinde ekran okuyucu, öğenin onay kutusu rolüne sahip olduğunu, işaretli durumda olduğunu ve aşağıdaki VoiceOver örneğinde olduğu gibi "Tanıtım amaçlı teklifler alın mı?" olarak adlandırıldığını bildirebilir:
TODO: DevSite - Think and Check assessment