ARIA

Q: aria-label ile aria-labelledby arasındaki fark nedir?

aria-label bir öğeye adını doğrudan metin olarak verir. aria-labelledby ise görünür metni ad olarak kullanılacak başka bir öğenin id değerine işaret eder; böylece ekranda görünenle sesli okunan uyumlu kalır.

Erişilebilir Zengin İnternet Uygulamaları (Accessible Rich Internet Applications)

Okunuşu: arya

Güncellendi 6 Ekim 20262 dk okuma

Kısaca

ARIA, role ve aria-label gibi HTML özniteliklerinden oluşan bir W3C standardıdır; yardımcı teknolojilere özel bir bileşenin ne olduğunu ve durumunu bildirir.

ARIA nedir?

Genellikle kısaca ARIA denen WAI-ARIA, W3C'nin Web Accessibility Initiative (WAI) çalışmalarından gelir; 1.2 sürümü 2023'ten beri bir W3C Tavsiyesi'dir (Recommendation). Tarayıcılar her sayfayı, ekran okuyucuların ve diğer yardımcı teknolojilerin okuduğu bir erişilebilirlik ağacına dönüştürür ve her öğenin rolünü, adını ve durumunu kaydeder. Yerel HTML öğeleri bu bilgileri kendiliğinden doldurur; ama <div> öğelerinden yapılmış bir açılır menü, sekme listesi ya da diyalog kendisi hakkında hiçbir şey söylemez ve eksik anlamı ARIA öznitelikleri sağlar.

ARIA'nın üç tür özniteliği vardır. Roller bir öğenin ne olduğunu söyler, örneğin role="dialog" ya da role="tab"; durumlar (states) onun o anki hâlini anlatır, örneğin aria-expanded="true" ya da aria-checked="false"; özellikler (properties) ise başka bilgiler ekler: yalnızca ikon içeren bir butona ad vermek için aria-label, bir yardım metnini bağlamak için aria-describedby ya da kullanıcı odağı taşımadan beliren mesajları duyurmak için aria-live. W3C'nin ARIA Authoring Practices Guide'ı yaygın bileşenler için, her birinin gerektirdiği klavye davranışı da dahil, eksiksiz kalıplar gösterir.

ARIA yalnızca yardımcı teknolojiye ne söylendiğini değiştirir, bir öğenin nasıl davrandığını asla değiştirmez. Bir <div> öğesine role="button" eklemek onu odaklanabilir yapmaz ya da Enter tuşuna yanıt verdirmez; bunu script'inizin yapması gerekir. ARIA'nın ilk kuralının, işi gören bir yerel HTML öğesi (<button>, <dialog> ya da <details> gibi) varsa onu kullanmak olmasının nedeni budur. Araştırmaların ARIA kullanan sayfalarda kullanmayanlara göre sürekli daha fazla erişilebilirlik hatası bulmasının nedeni de budur: yanlış ARIA, hiç ARIA olmamasından kötüdür.

ARIA sık sık erişilebilirliğin kendisi sanılır. Web erişilebilirliği hedeftir; WCAG (Web Content Accessibility Guidelines) da erişilebilir bir sayfanın neyi başarması gerektiğini söyler. ARIA ise oraya ulaşmanın teknik araçlarından biridir ve semantik HTML'in yetmediği yerde kullanılır. Öznitelikleri, gören kullanıcıların ne gördüğünü de değiştirmez: aria-hidden="true" içeriği yalnızca ekran okuyuculardan gizler, ekrandan değil.

Önemli noktalar

ARIA, yardımcı teknolojiler için anlam ekleyen özniteliklerden oluşan bir W3C standardıdır.
Roller bir öğenin ne olduğunu söyler; durumlar ve özellikler onu tarif eder.
Ekran okuyucuların ne duyurduğunu değiştirir, öğelerin nasıl davrandığını değil.
Önce yerel HTML öğelerini kullanın; ARIA özel bileşenlerdeki boşlukları doldurur.
WCAG erişilebilirlik hedeflerini belirler; ARIA bunlara ulaşmanın araçlarından biridir.

Örnek

Bir aç-kapa butonu, bir ikon butonu ve bir durum mesajıhtml

<!-- aria-expanded tells screen readers whether the panel is open -->
<button aria-expanded="false" aria-controls="shipping">Shipping costs</button>
<div id="shipping" hidden>Shipping is free on orders over $50.</div>

<!-- An icon-only button needs a name; role="status" announces new messages -->
<button aria-label="Close">×</button>
<p role="status"></p>
<script>
  const toggle = document.querySelector("[aria-controls='shipping']");
  toggle.addEventListener("click", () => {
    const open = toggle.getAttribute("aria-expanded") === "true";
    toggle.setAttribute("aria-expanded", String(!open));
    document.getElementById("shipping").hidden = open;
  });
</script>

Sık sorulan sorular

ARIA'nın ilk kuralı nedir?

İhtiyacınız olan anlam ve davranışa zaten sahip bir yerel HTML öğesi ya da özniteliği varsa ARIA eklemek yerine onu kullanın. Gerçek bir <button> odaklanabilir, klavyeyle çalışır ve hiçbir ek kod olmadan doğru şekilde duyurulur.

aria-label ile aria-labelledby arasındaki fark nedir?

aria-label bir öğeye adını doğrudan metin olarak verir. aria-labelledby ise görünür metni ad olarak kullanılacak başka bir öğenin id değerine işaret eder; böylece ekranda görünenle sesli okunan uyumlu kalır.

ARIA ile WCAG arasındaki fark nedir?

WCAG, erişilebilir bir sayfanın neyi başarması gerektiğini anlatan bir yönergeler bütünüdür; metin alternatifleri ve klavyeyle erişim gibi. ARIA ise özniteliklerden oluşan teknik bir spesifikasyondur ve bu yönergelerin bazılarını özel bileşenlerde karşılamanın yollarından biridir.

İlgili sayfalar

Kaynaklar

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin