Etiketler ve metin alternatifleri

Rob Dodson

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 metne alternatif olarak bir öğeye erişilebilir ad verilir. Bu ad, erişilebilirlik ağacında öğe anlamını ifade etmek için kullanılan temel ö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ıştığınızı ve herhangi bir ek bağlam olmadan "düğme", "onay kutusu", "resim" gibi ifadeleri duyduğunuzu hayal edin. 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:

  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. Hesaplanan Özellikler açılır listesinde Ad özelliğini bulun.
Bir düğmenin hesaplanan adını gösteren Geliştirici Araçları 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.

Öğ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 sayfa "Merve'nin Akçaağaç 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 öğelerinde title özellikleri olmalıdır:

<iframe title="An interactive map of San Francisco" src="…"></iframe>

Bir iframe içeriğinin içeriği kendi dahili title öğesini içerebilir ancak ekran okuyucu genellikle çerçeve sınırında durarak öğ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 değerinin her zaman bir alt özelliğiyle birlikte kullanılması gerekir. 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 amaçlı çalışıyorsa ve yararlı bir içerik sağlamıyorsa onu erişilebilirlik ağacından kaldırmak için boş bir alt="" özelliği verebilirsiniz.

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 site deneyimi açısından büyük önem taşır ve 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 öğesinin parçası olmayan düğmelerde, iyi bir erişilebilir ad oluşturmak için ihtiyacınız olan tek şey metin içeriği olarak net bir eylem yazmak 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 düzenleyicisinde kullanılan düğmeler genellikle yalnızca grafik sembolleridir:

Sola hizala simge 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 da erişilebilir adlarını metin içeriklerinden alı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 faydalıdır. Bağlantılar tekrar eden dolgu metinlerle doluysa bu kısayollar çok daha az kullanışlı hale gelir:

VoiceOver&#39;ın bağlantılar menüsü &quot;here&quot; kelimesi ile dolu.
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 faydalı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