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:
- Bir öğeyi sağ tıklayın ve İncele'yi seçin. Bu işlem, Geliştirici Araçları'nı açar Nesne paneli.
- Öğeler panelinde Erişilebilirlik bölmesini bulun. Gizli olabilir
yanında
»sembolü görünür. - Hesaplanan Özellikler açılır listesinde Ad özelliğini bulun.
İ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:
- Resmin, kullanması zor olabilecek içerik sağlayıp sağlamadığını belirleyin kısa ve öz içerikler oluşturun.
- Ö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ı ve giriş olarak resimler
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üğmeleri ve bağlantıları etiketleme
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>
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:
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>
Bağlantılar
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."
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 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:
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 öğeninidö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:
YAPILACAKLAR: DevSite - Değerlendirme ve Kontrol Etme