Etiketler ve metin alternatifleri

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.

Chrome'un Geliştirici Araçları'nı kullanarak bir öğenin erişilebilir adını kontrol etmek kolaydır:

  1. Bir öğeyi sağ tıklayın ve İncele'yi seçin. Bu işlem, DevTools'un Öğeler panelini açar.
  2. Öğeler panelinde Erişilebilirlik bölmesini bulun. » sembolünün arkasında gizlenmiş olabilir.
  3. Hesaplanmış Özellikler açılır menüsünde Ad özelliğini bulun.
Bir düğmenin hesaplanmış adını gösteren DevTools erişilebilirlik bölmesi.

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.

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:

  1. Resmin, etrafındaki metni okuyarak elde edilmesi zor olan içerikler sağlayıp sağlamadığını belirleyin.
  2. 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ı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üğ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>

&quot;Oda Rezerve Et&quot; düğmesi içeren bir mobil form.

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:

Sola hizalama simgesi düğmesi.

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>

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.

Yeterince açıklayıcı değil
Check out our guide to web performance <a href="/guide">here</a>.
Faydalı içerikler
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:

Sesli Betimleme&#39;nin bağlantı menüsü &quot;burada&quot; kelimesiyle doldurulmuş.
MacOS için bir ekran okuyucu olan VoiceOver'un, bağlantılara göre gezinme menüsünü gösteren örneği.

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 öğenin id ö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:

&quot;Tanıtım teklifleri almak istiyor musunuz?&quot; ifadesini gösteren VoiceOver metin çıkışı

TODO: DevSite - Think and Check assessment