Etiketler ve metin alternatifleri

Rob Dodson

Ekran okuyucunun kullanıcıya sözlü bir kullanıcı arayüzü sunmasını sağlamak için öğelerinin uygun etiketlere veya metin alternatiflerine sahip olması gerekir. Etiket veya metin alternatifi bir öğe için erişilebilir ad verir. Bu ad, erişilebilirlik ağacında öğe anlamlarını ifade etmek için kullanın.

Bir öğenin adı, öğenin rolüyle birleştirildiğinde ne tür bir öğe ile etkileşim kurduğunu anlamak için kullanıcı bağlamını nasıl temsil edildiğini gösterir. Ad yoksa bir Ekran okuyucu, yalnızca öğenin rolünü duyurur. Tek bir yerde gezinmeye çalıştığınızı "düğme" gibi bir şey duyduktan sonra "onay kutusu", "resim" ekstra bağlam. Bu nedenle etiketleme ve metin alternatifleri iyi, erişilebilir deneyim.

Bir öğenin adını inceleme

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

  1. Bir öğeyi sağ tıklayın ve İncele'yi seçin. Bu işlem, Geliştirici Araçları'nı açar Nesne paneli.
  2. Öğeler panelinde Erişilebilirlik bölmesini bulun. Gizli olabilir yanında » sembolü görünür.
  3. Hesaplanan Özellikler açılır listesinde Ad özelliğini bulun.
ziyaret edin.
Bir düğmenin hesaplanan adını gösteren Geliştirici Araçları erişilebilirlik bölmesi.
ziyaret edin.
'nı inceleyin.

İster alt metin içeren bir img, ister input label, tüm bu senaryolar aynı sonucu verir: öğesinin erişilebilir adı.

Adların eksik olup olmadığını kontrol edin

Bir öğeye erişilebilir ad eklemenin farklı yolları vardır. seçin. Aşağıdaki tabloda en yaygın öğe türleri listelenmiştir (erişilebilir adlara ve bunların nasıl ekleneceğine ilişkin açıklamaların bağlantılarına gereksinim duyanlar)

Öğe türü Ad nasıl eklenir?
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 'nı inceleyin.
<input type="image"> öğe Resimler ve nesneler için metin alternatifleri ekleyin 'nı inceleyin.
<object> öğe Resimler ve nesneler için metin alternatifleri ekleyin 'nı inceleyin.
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 bir title öğesi, sayfanın neyle ilgili olduğunu kısaca açıklar. title öğesi, erişilebilir adı. Bir ekran okuyucu sayfaya girdiğinde duyurulan ilk metindir.

Örneğin, aşağıdaki sayfa "Mary'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 öğelerinin title özellikleri olmalıdır:

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

iframe öğesinin içeriği kendi dahili title öğesini içerebilir ancak Ekran okuyucu genellikle çerçeve sınırında durur ve öğenin role ("çerçeve") ve erişilebilir adı (title özelliği tarafından sağlanır). Bu kullanıcının çerçeveye girmesini mi yoksa atlamasını mı istediğine karar vermesine olanak tanır.

Resimler ve nesneler için metin alternatifleri ekleyin

Bir img ile her zaman bir alt özelliğini kullanın. Resim yüklenemezse alt metni, kullanıcıların resmin ne olduğunu anlaması için yer tutucu olarak kullanılır çalıştığınızı düşünün.

İyi alt metni yazmak biraz sanat eseri olmakla birlikte, uyulması gereken takip edebilirsiniz:

  1. Resmin, kullanması zor olabilecek içerik sağlayıp sağlamadığını belirleyin kısa ve öz içerikler oluşturun.
  2. Öyleyse içeriği mümkün olduğunca kısa ve öz bir şekilde iletin.

Resim, süsleme amaçlı çalışıyorsa ve yararlı bir içerik sağlamıyorsa, Erişilebilirlik bölümünden kaldırmak için boş bir alt="" özelliği verebilirsiniz ağacı.

Bağlantı içine sarmalanmış resimlerde, aşağıdaki açıklama için img öğesinin alt özelliği kullanılmalıdır: Kullanıcı, bağlantıyı tıkladığında gideceği yere yönlendirilir:

<a href="https://en.wikipedia.org/wiki/Google">
  <img alt="Google's wikipedia page" src="google-logo.jpg">
</a>

Benzer şekilde, resim oluşturmak için <input type="image"> öğesi kullanılırsa bu düğme kullanıldığında, alt ve kullanıcı düğmeyi tıkladığında:

<form>
  <label>
    Username:
    <input type="text">
  </label>
  <input type="image" alt="Sign in" src="./sign-in-button.png">
</form>

Yerleştirilmiş nesneler

<object> öğeleri (genellikle Flash, PDF'ler veya ActiveX, alternatif metin de içermelidir. Resimlere benzer şekilde bu metin öğe oluşturulamazsa görüntülenir. Alternatif metin, "Yıllık rapor" gibi normal metin olarak object öğesi aşağıda bulabilirsiniz:

<object type="application/pdf" data="/report.pdf">
Annual report.
</object>

Düğmeler ve bağlantılar genellikle bir sitenin deneyimi açısından son derece önemlidir ve her ikisinin de erişilebilir adlara sahip olması çok önemlidir.

Düğmeler

Bir button öğesi, her zaman kendi erişilebilir adını kullanarak metin içeriği. form öğesinin parçası olmayan düğmeler için net bir iyi ve erişilebilir bir metin oluşturmak için ihtiyacınız olan tek şey dokunun.

<button>Book Room</button>

&quot;Kitap Odası&quot; bulunan bir mobil form düğmesini tıklayın.

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. Örneğin, "Ne Görüyorsunuz?" (WYSIWYG)" düzenleyicisinde biçimlendirmek için metinler genellikle yalnızca grafik simgelerdir:

Sola hizala simge düğmesi.

Simge düğmeleriyle çalışırken görselliğe hitap eden bir düğme eklemek erişilebilir adı aria-label kullanarak değiştirebilirsiniz. aria-label, şunlardan birini geçersiz kılar: bir metin içeriği oluşturarak eylemi net bir şekilde ekran okuyucu kullanan herkes tarafından görülebilir.

<button aria-label="Left align"></button>

Düğmelere benzer şekilde, bağlantılar da erişilebilir adlarını metinlerinden alır. içerik. Bağlantı oluşturmanın güzel bir yolu da, yerine, bağlantının kendisine metin ekleyerek veya "Oku Diğer."

Yeterince açıklayıcı değil
Check out our guide to web performance <a href="/guide">here</a>.
Faydalı içerik!
Check out <a href="/guide">our guide to web performance</a>.

Bu, özellikle tüm öğeleri listeleme kısayollarını sunan ekran okuyucular için görebilirsiniz. Bağlantılar yinelenen dolgu metinleriyle dolu olduğunda kısayolları da çok daha az faydalı hale gelir:

VoiceOver&#39;ın bağlantılar menüsü &quot;here&quot; kelimesi ile dolu.
macOS için bir ekran okuyucu olan VoiceOver'ı gösteren örnek bağlantılar menüsünü kullanın.

Form öğelerini etiketleme

Bir etiketi, onay kutusu gibi bir form öğesiyle ilişkilendirmenin iki yolu vardır. Bu yöntemlerden herhangi biri, etiket metninin aynı zamanda Bu onay kutusu, fare veya dokunmatik ekran kullanıcıları için de yararlıdır. İlişkilendirilecek aşağıdaki iki öğeden birini içeren bir etiket oluşturabilirsiniz:

  • 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 bakın
<input id="promo" type="checkbox"></input>
<label for="promo">Receive promotional offers?</label>

Onay kutusu doğru bir şekilde etiketlendiğinde ekran okuyucu, öğenin onay kutusu rolüne sahip olması, işaretli durumda olması ve "al" olarak adlandırılmış olması promosyon teklifleri mi?” aşağıdaki VoiceOver örneğindeki gibidir:

&quot;Promosyon teklifleri alınsın mı?&quot; ifadesinin gösterildiği VoiceOver metin çıkışı

YAPILACAKLAR: DevSite - Değerlendirme ve Kontrol Etme