Erişilebilir Ad: aria-label, aria-labelledby ve aria-describedby

Erişilebilir ad nereden gelir?

MDN'nin aria-labelledby sayfasına göre bazı öğeler adlarını kendi içeriklerinden alır: <button>, <a> ve <td> için ad, açılış ve kapanış etiketleri arasındaki metindir. Bazı öğeler ise adı ilişkili bir öğeden alır: <textarea> için for özniteliğiyle bağlanmış <label>, <fieldset> için <legend>, <table> için <caption>. Görsellerde ad alt değerinden, <iframe> için title özniteliğinden gelir. MDN'ye göre etkileşimli her öğenin bir erişilebilir adı olmalıdır.

Bir öğe adını kaynaktan alamıyorsa ya da kaynak yanıltıcıysa ARIA devreye girer. Ama MDN'nin aria-label sayfası bir sınır da çizer: aria-label her ad alabilen öğede tanımlıdır, pratikte ise yalnızca etkileşimli öğelerde, bileşenlerde, yer işaretlerinde, görsellerde ve iframe'lerde desteklenir. <span> ve <div> varsayılan olarak generic rolündedir; ad alabilen bir rol verilmedikçe onlara aria-label ya da aria-labelledby eklemek işe yaramaz.

label: form alanları için ilk tercih

Form denetimlerinde en sağlam yol yerel <label> öğesidir. MDN iki bağlama biçimi tanımlar: açık bağlama (alanın id değerini <label> öğesinin for özniteliğine yazmak) ve örtük bağlama (alanı <label> öğesinin içine koymak). İkisi eşdeğerdir, ancak MDN örtük bağlamayı her yardımcı teknolojinin desteklemediğini not eder ve dış araçlarla uyum için for ile açık bağlamayı önerir; isterseniz ikisini birlikte de kullanabilirsiniz.

<!-- Acik baglama -->
<label for="eposta">E-posta adresi</label>
<input type="email" id="eposta" name="eposta" />

<!-- Ortuk baglama ve for birlikte -->
<label for="bulten">
  <input type="checkbox" id="bulten" name="bulten" />
  Kampanya e-postaları almak istiyorum
</label>

<label> yalnızca ad vermez. Kullanıcı etikete tıkladığında tarayıcı odağı ilişkili alana taşır; bu, özellikle dokunmatik ekranda tıklanabilir alanı büyütür. aria-labelledby bu davranışı sağlamaz, MDN'nin ifadesiyle yalnızca erişilebilir adı tanımlar; tıklamayla alanı etkinleştirme gibi işlevleri JavaScript ile sizin eklemeniz gerekir. Bu yüzden form alanında <label> kullanabiliyorsanız ARIA'ya geçmeyin.

<label> ile ilişkilendirilebilen (labelable) öğeler <button>, type="hidden" dışındaki <input> türleri, <meter>, <output>, <progress>, <select> ve <textarea> öğeleridir. Bir alana birden fazla <label> bağlayabilirsiniz. Öte yandan MDN, type="button" ve geçerli bir value değeri olan <input> öğesinin ve <button> öğesinin ayrıca bir etikete ihtiyacı olmadığını, eklemenin yardımcı teknolojinin düğmeyi yorumlamasını bozabileceğini belirtir.

aria-label: görünür metin olmadığında

aria-label, öğeye doğrudan bir metin ad verir. MDN'nin örneği klasik durumdur: içinde yalnızca bir simge bulunan "Kapat" düğmesi. Görünür bir metin yoksa ve sayfada başvurabileceğiniz bir öğe de yoksa aria-label doğru araçtır:

<button type="button" aria-label="Kapat">
  <span aria-hidden="true">&#215;</span>
</button>

<nav aria-label="Sayfalama">
  <a href="?sayfa=1">1</a>
  <a href="?sayfa=2">2</a>
</nav>

İkinci örnekte aria-label bir yer işaretine ad veriyor; sayfada birden fazla <nav> olduğunda ekran okuyucu kullanıcısı "Sayfalama" ile ana menüyü birbirinden ayırabilir. MDN, aria-label değerinin iframe öğesinin title değerinden, görselin alt değerinden ve alanın <label> metninden önce geldiğini belirtir. Yani zaten bir <label> varken aria-label eklerseniz görünür etiket ekran okuyucu için devre dışı kalır.

• Görünür bir etiket varsa aria-label yerine aria-labelledby kullanın; MDN bunu güçlü biçimde önerir.
• Talimatları aria-label içine gizlemeyin. Açıklama gerekiyorsa görünür metin yazıp aria-describedby ile bağlayın; talimat yalnızca ekran okuyucu kullananlara değil herkese görünmelidir.
• aria-label ve aria-labelledby değerlerini aynı öğede birlikte kullanmayın; ikisi varsa aria-labelledby kazanır.
• code, strong, mark, paragraph, generic, presentation/none gibi roller ad alamaz; MDN bunları desteklenmeyen roller listesinde sayar.

aria-labelledby: sayfadaki metni ad yapmak

aria-labelledby, boşlukla ayrılmış bir id listesi alır ve bu öğelerin metnini birleştirerek ad üretir. MDN'ye göre ad hesaplamasında en yüksek önceliğe sahip yöntemlerden biridir: aria-label'ı, <label> öğesini ve öğenin kendi metnini ezer (DOM tarafında Element.ariaLabelledByElements daha da önceliklidir). MDN'nin örneğinde içinde "Red" yazan, aria-label="Blue" taşıyan ve "Yellow" metnine başvuran bir düğmenin adı "Yellow" olur. Türkçe karşılığı şöyle:

<button type="button" aria-label="Mavi" aria-labelledby="renk">Kırmızı</button>
<span id="renk">Sarı</span>
<!-- Erisilebilir ad: "Sari" -->

Bu davranış bilinçli kullanıldığında çok işe yarar. Aynı listede öğenin kendi id değerini de verebilirsiniz; metinler listede yazdığınız sırayla birleştirilir. Tekrarlanan "devamını oku" bağlantılarını ayırt etmek için:

<h2 id="baslik-yedek">Sunucu yedeklemesi nasıl planlanır?</h2>
<p>
  Yedekleme planı, neyi ne sıklıkla sakladığınızla başlar.
  <a href="yedek.html" id="devam-yedek" aria-labelledby="devam-yedek baslik-yedek">Devamını oku</a>
</p>
<!-- Erisilebilir ad: "Devamını oku Sunucu yedeklemesi nasıl planlanır?" -->

MDN bu özniteliğin birkaç ayrıntısını daha sıralar. Listede tekrarlanan id değerleri yok sayılır, her öğe yalnızca ilk geçtiği yerde işlenir. Başvurulan öğe görünmez olabilir: hidden özniteliği, display: none veya visibility: hidden ile gizlenmiş öğelerin metni de ada katılır (yine de herkese aynı içeriği sunmaya çalışın). Başvurulan öğe bir <input> ise alanın o anki değeri ada eklenir ve değer değiştikçe ad da değişir. Son olarak zincirleme çalışmaz: başvurduğunuz öğenin kendi aria-labelledby değeri dikkate alınmaz.

Son ayrıntı, MDN'nin "çok parçalı etiketler" rehberindeki durumu çözer. Cümlenin ortasına gömülü bir alan düşünün: "Bilgisayarı [10] dakika sonra kapat". Ekran okuyucu yalnızca kutuyu duyurursa kullanıcı birimin dakika mı saat mi olduğunu bilemez. Üç parçayı tek ada birleştirirsiniz; alanın değeri de ada girer:

<input type="checkbox" aria-labelledby="kapat-metin kapat-sure kapat-birim" />
<span id="kapat-metin">Bilgisayarı şu süre sonra kapat:</span>
<input type="text" id="kapat-sure" value="10" aria-labelledby="kapat-metin kapat-sure kapat-birim" />
<span id="kapat-birim">dakika</span>

aria-describedby: ada değil açıklamaya metin bağlamak

Ad kısa olmalı, öğenin özünü anlatmalıdır. Açıklama ise kullanıcının ihtiyaç duyabileceği ek bilgiyi verir ve daha uzun olabilir. aria-describedby de bir id listesi alır, ama bu metinler ada değil erişilebilir açıklamaya gider. Böylece ad kısa kalır, ek bilgi ayrı bir açıklama olarak sunulur:

<label for="sifre">Şifre</label>
<input type="password" id="sifre" name="sifre" aria-describedby="sifre-ipucu" />
<p id="sifre-ipucu">En az 12 karakter kullanın; harf ve rakamı karıştırın.</p>

<button type="button" aria-describedby="cop-aciklama">Çöp kutusuna taşı</button>
<p id="cop-aciklama">Çöp kutusundaki öğeler 30 gün sonra kalıcı olarak silinir.</p>

MDN'ye göre aria-describedby yalnızca form alanlarıyla sınırlı değildir; bileşenlere, gruplara, başlıklı bölgelere de açıklama bağlayabilirsiniz. Başvurulan öğe gizli olabilir; örneğin bir "daha fazla bilgi" simgesiyle açılan açıklamayı gören kullanıcılar tıklayarak görür, ekran okuyucu kullanıcıları ise alana geldiklerinde doğrudan duyar. İki sınır vardır: değer yalnızca aynı belgedeki öğelere başvurabilir, dış kaynaklara başvuramaz; ve açıklama düz metin olarak okunur. İçerik uzunsa, listeler veya bağlantılar gibi anlamlı yapı taşıyorsa MDN aria-details kullanmayı önerir.

aria-description ve aria-details

aria-description, aria-label'ın açıklama karşılığıdır: açıklamayı id başvurusu yerine doğrudan bir metin olarak yazar. MDN'ye göre bu öznitelik ARIA 1.3 için hâlâ W3C Editör Taslağı aşamasındadır ve şimdilik ARIA 1.1'den beri desteklenen aria-describedby kullanılmaya devam edilmelidir. Sayfada açıklama metni varsa aria-describedby tercih edilir; ikisi birlikte varsa erişilebilir açıklamayı aria-describedby belirler.

aria-details ise farklı bir iş yapar. Başvurduğu içerik açıklamaya dönüştürülmez, düz metne çevrilmez; yardımcı teknoloji kullanıcıya ek bilgi olduğunu bildirir ve oraya gidebilmesini sağlar. MDN, başvurulan içeriğin herkese görünür olması gerektiğini ve bu özniteliğin, hiçbir zaman tam desteklenmemiş longdesc özniteliğinin amacına benzer bir amaca hizmet ettiğini belirtir. Bir öğede hem aria-details hem de aria-describedby bulunması geçerlidir.

Hata mesajını alana bağlamak

Form doğrulamasında hata metnini alana bağlamak için MDN iki özniteliği birlikte kullanmayı önerir: alanı hata durumunda işaretlemek için aria-invalid="true", hata metnini içeren öğeyi göstermek için aria-errormessage. aria-errormessage yalnızca alan gerçekten geçersizken anlam taşır; alan geçerliyken başvurulan öğe gizli olmalı, geçersizken görünür olmalıdır. Hata metninin bir canlı bölge olması, metin sonradan belirdiğinde duyurulmasını kolaylaştırır.

<p>
  <label for="eposta2">E-posta adresi:</label>
  <input type="email" name="eposta2" id="eposta2" aria-invalid="true" aria-errormessage="eposta2-hata" />
  <span id="eposta2-hata">Hata: Geçerli bir e-posta adresi girin.</span>
</p>

Yerleşik doğrulama öznitelikleri (required, pattern, minlength) ve tarayıcının hata davranışı için form doğrulama yazısına bakın.

Ad gerektiren diğer yerler

• Diyaloglar: role="dialog" veya role="alertdialog" taşıyan kapsayıcıya, varsa içindeki başlığa aria-labelledby ile, başlık yoksa aria-label ile ad verin. Yerel diyalog için dialog etiketi yazısına bakın.
• Çerçeveler: her <iframe> öğesinde içeriği anlatan bir title bulunmalı. MDN, gömülü belgenin kendi <title> öğesine de aynı metni yazmayı iyi uygulama sayar, çünkü bazı ekran okuyucular birini diğerinin yerine kullanır. Ayrıntılar iframe yazısında.
• Görseller: içerik taşıyan her görselde açıklayıcı alt, süs görselinde boş alt="". alt kabul etmeyen <canvas> gibi öğelerde role="img" ile aria-label. Ayrıntılar img etiketi yazısında.
• Gruplar: <fieldset> içinde <legend>; <optgroup> öğesinde label özniteliği.
• Araç çubukları: sayfada birden fazla toolbar rolü varsa her birine aria-label verin; MDN tek araç çubuğunda bile ad vermeyi iyi uygulama sayar.
• Başlıklar: boş olmamalı, aria-hidden="true" veya display: none ile gizlenmemelidir.

title özniteliği neden ad için zayıf bir araçtır?

MDN'ye göre title özniteliğinin asıl erişilebilirlik kullanımı <iframe> öğelerine ad vermektir. Bir <input> öğesine title ile programatik etiket vermek mümkündür ama iyi uygulama değildir; <label> kullanın. MDN, title ile oluşan araç ipuçlarının yalnızca dokunmatik cihaz kullananlar, klavyeyle gezinenler, ekran okuyucu veya büyüteç kullananlar, ince motor becerisi kısıtlı ve bilişsel güçlük yaşayan kişiler için sorunlu olduğunu listeler. Kısacası önemli bir bilgiyi yalnızca title içine koymayın.

WCAG bağlantısı: etikette ad (2.5.3)

MDN'nin WCAG "Kullanılabilir" özetindeki 2.5.3 ölçütü, görünür bir metin etiketi olan her arayüz bileşeninde erişilebilir adın bu görünür metinle eşleşmesini ya da onu içermesini ister. Ekranda "Gönder" yazan bir düğmenin adını aria-label="Formu ilet" ile değiştirirseniz görünen metin ile erişilebilir ad birbirini tutmaz. MDN'nin mobil erişilebilirlik kontrol listesi de görünür metin etiketi olan her bileşende aynı metnin programatik adda bulunmasını ister. Bu yüzden aria-label veya aria-labelledby ile görünür metni ezerken görünür metni adın içinde tutun. Diğer ölçütler için WCAG temelleri yazısına bakın.

Sık yapılan hatalar

• placeholder metnini etiket yerine kullanmak: MDN, kullanıcı yazmaya başlayınca kaybolduğu için yer tutucuya güvenilmemesini, etiketlerin görünür olmasını ister.
• Görünür etiket varken üstüne farklı bir aria-label yazmak: ekran okuyucu görünen metni değil aria-label değerini okur.
• <div> veya <span> öğesine rol vermeden aria-label eklemek: generic rol ad alamaz.
• aria-labelledby içinde var olmayan veya yanlış yazılmış bir id kullanmak.
• Aynı id değerini iki öğeye vermek: MDN'ye göre for özniteliği belgede eşleşen ilk öğeyi bulur, sonrakileri dikkate almaz.
• Uzun yönergeleri ada koymak: ad kısa olmalı, ayrıntı aria-describedby ile açıklamaya gitmeli.

Sık Sorulan Sorular

aria-label mı aria-labelledby mi kullanmalıyım?

Sayfada adı oluşturabilecek görünür bir metin varsa aria-labelledby, yoksa aria-label. MDN, görünür etiket varken aria-labelledby tercih edilmesini güçlü biçimde önerir.

Bir form alanında hem label hem aria-labelledby varsa ne olur?

aria-labelledby kazanır; ad, başvurulan öğelerin metninden hesaplanır. <label> öğesinin tıklamayla odaklama davranışı ise sürer, çünkü ARIA davranışı değiştirmez.

aria-describedby gizli bir öğeye başvurabilir mi?

Evet. MDN, başvurulan öğenin gizli olabileceğini belirtir; hidden ile gizlenmiş bir açıklama da ekran okuyucuya okunur. Yine de görme engeli olmayan kullanıcıların da aynı bilgiye ulaşabildiğinden emin olun.

Simgeli düğmenin adını nasıl veririm?

Simgeyi aria-hidden="true" ile addan çıkarın ve düğmeye aria-label ile kısa bir ad verin. MDN'nin button rolü sayfasına göre düğmelerin her zaman bir erişilebilir adı olmalıdır; simgeden oluşan düğmelerde bu ad aria-label veya aria-labelledby ile sağlanabilir.

Marka adları sahiplerine aittir. Bu yazı bağımsız bir teknik rehberdir; adı geçen kuruluşlarla bayilik veya ortaklık ilişkisi bulunduğu anlamına gelmez.

İlgili içerikler: HTML öğrenme rehberi · ARIA nedir · label, fieldset ve legend · WCAG temelleri · img ve alt metni · form doğrulama