ARIA (WAI-ARIA) nedir?

Kısaca

Ekran okuyucu sayfayı tarayıcının verdiği bilgiyle okur. Her öğe için bir ad, bir rol ve gerekirse bir durum duyar: "Ara, düğme" gibi. HTML bu bilgiyi kendisi veremediğinde ARIA devreye girer.

W3C'ye göre WAI-ARIA, HTML'in kendi anlamlarını tamamlar ve onların yerine geçmez. Bu yüzden iyi ARIA çoğu zaman az ARIA demektir.

Roller, durumlar ve özellikler

Rol, öğenin türünü söyler ve role niteliğiyle verilir. Örneğin role="dialog" bir pencereyi, role="alert" bir uyarıyı tanımlar.

Durum, kullanıcı etkileşimiyle değişebilen bir bilgidir. Basılı bir anahtar aria-pressed="true" taşır, tekrar basılınca false olur. Durum değişince öğenin türü değişmez.

Özellik, öğenin doğasına ait bir bilgi ya da bir veri değeridir. aria-label ve aria-labelledby birer özelliktir. Standart da iki terimin birbirine yakın olduğunu kabul eder; ikisi de aria- önekli niteliktir.

ARIA'nın ilk kuralı

W3C'nin "Using ARIA" notundaki ilk kuralı Türkçeye şöyle aktarabilirim. İhtiyacınız olan anlam ve davranış yerleşik olarak gelen bir HTML öğesi ya da niteliği varsa onu kullanın. Başka bir öğeyi alıp ARIA rolü, durumu ya da özelliği ekleyerek erişilebilir yapmaya çalışmayın.

Belge 24 Şubat 2026'da "Discontinued Draft" olarak işaretlendi. Dört kural tarihsel kayıt olarak sayfada duruyor ve W3C okuru ARIA Authoring Practices Guide'a (APG) yönlendiriyor. Üçüncü kural da önemli: etkileşimli her ARIA kontrolü klavyeyle kullanılabilmeli.

Nedeni APG'de yazıyor: ARIA rolleri tarayıcıya klavye davranışı ya da stil eklemez. role="button" verdiğiniz bir div için odak, Enter ve Boşluk desteğini siz eklersiniz. APG'nin başlığı da bunu özetliyor: "No ARIA is better than Bad ARIA".

aria-label nedir?

aria-label, bir öğeye metin olarak ad veren özelliktir. Görünür metni olmayan öğeler içindir. Örneğin yalnızca büyüteç ikonu olan bir arama butonu.

Ad ekranda zaten yazıyorsa WAI-ARIA 1.2 başka bir yol önerir: o metni işaret eden aria-labelledby. İkisi birden varsa tarayıcı aria-labelledby'yi seçer. aria-label ise butonun içindeki yazıdan önce gelir; yani görünür metni ezer.

Adın hangi sırayla hesaplandığı W3C'nin Accessible Name and Description Computation belgesinde tanımlı. Görsellere ad vermenin ayrı kuralları için alt metin yazımı rehberine bakabilirsiniz.

Sık hatalar

Görünür metinle çelişen aria-label. Butonda "Devam et" yazıyor, adı "Sonraki adıma geç". Sesle bilgisayar kullanan kişi gördüğü kelimeyi söyler ve komut eşleşmeyebilir. WCAG 2.2'nin A düzeyindeki 2.5.3 Label in Name kriteri, adın görünür metni içermesini ister. W3C, iyi uygulama olarak görünür metni adın başına koymayı önerir.

div ile buton. Buton gibi görünüyor ama rolü yok ve Tab ile odak almıyor. Çözüm role eklemek değil, <button> kullanmaktır.

Rolü tekrar eden ad. "Kaydet butonu" adı, rolle birlikte "Kaydet butonu, düğme" diye okunur.

Odak alan öğede aria-hidden. Odaklanabilen bir öğeye aria-hidden="true" koymak, Using ARIA'nın dördüncü kuralına aykırıdır.

WebAIM Million 2026 raporu, Şubat 2026 verisiyle bir milyon ana sayfanın %82,7'sinde ARIA buldu. Bu orana ARIA yer işareti rolleri dâhil değil. Toplamda sayfa başına ortalama 133'ten fazla ARIA niteliği sayıldı.

ARIA kullanan sayfalarda ortalama 59,1 hata bulundu, kullanmayanlarda 42. Rapor, bunun ARIA'nın bu hatalara yol açtığı anlamına gelmek zorunda olmadığını yazıyor. ARIA kullanan sayfalar aynı zamanda daha karmaşıktı.

Canlı örnek: ekran okuyucu ne duyar?

Aşağıdaki dört öğe kurgusal. Her birinin bir kötü, bir düzeltilmiş sürümü var.

Ekran okuyucu ne duyar?

Her öğede kodu, rolü, erişilebilir adı ve ekran okuyucunun yaklaşık ne söyleyeceğini görürsünüz.

1. 1 Yalnız ikonlu buton

   Kötü

   <button>
     <svg>…</svg>
   </button>

   Rol

   düğme

   Erişilebilir ad

   (boş)

   Klavyeyle odak

   Evet, Tab ile

   Yaklaşık duyulan

   “düğme”

   Kullanıcı bir düğme olduğunu duyar ama ne yaptığını öğrenemez.

   Düzeltilmiş

   <button aria-label="Ara">
     <svg aria-hidden="true">…</svg>
   </button>

   Rol

   düğme

   Erişilebilir ad

   Ara

   Klavyeyle odak

   Evet, Tab ile

   Yaklaşık duyulan

   “Ara, düğme”

   Görünür metin olmadığı için aria-label burada doğru araç.

2. 2 div ile yapılmış buton

   Kötü

   Sepete ekle

   <div class="buton" onclick="ekle()">
     Sepete ekle
   </div>

   Rol

   yok (genel öğe)

   Erişilebilir ad

   (yok)

   Klavyeyle odak

   Hayır

   Yaklaşık duyulan

   “Sepete ekle” (düz metin gibi)

   Tab ile odak buraya gelmez. Klavyeyle çalışmaz, ekran okuyucu da onu düğme olarak tanıtmaz.

   Düzeltilmiş

   Sepete ekle

   <button type="button" onclick="ekle()">
     Sepete ekle
   </button>

   Rol

   düğme

   Erişilebilir ad

   Sepete ekle

   Klavyeyle odak

   Evet; Enter ve Boşluk ile çalışır

   Yaklaşık duyulan

   “Sepete ekle, düğme”

   Rolü, odağı ve klavye davranışını HTML kendisi veriyor.

3. 3 Doğru <button>

   Kötü

   Kaydet

   <button role="button"
     aria-label="Kaydet butonu">Kaydet</button>

   Rol

   düğme

   Erişilebilir ad

   Kaydet butonu

   Klavyeyle odak

   Evet, Tab ile

   Yaklaşık duyulan

   “Kaydet butonu, düğme”

   Rol zaten vardı. Ada eklenen “butonu” kelimesi rolle birlikte iki kez okunur.

   Düzeltilmiş

   Kaydet

   <button type="submit">Kaydet</button>

   Rol

   düğme

   Erişilebilir ad

   Kaydet

   Klavyeyle odak

   Evet, Tab ile

   Yaklaşık duyulan

   “Kaydet, düğme”

   Ad görünür metinden gelir. Hiç ARIA gerekmiyor.

4. 4 Görünür yazısıyla çelişen aria-label

   Kötü

   Devam et

   <button aria-label="Sonraki adıma geç">
     Devam et
   </button>

   Rol

   düğme

   Erişilebilir ad

   Sonraki adıma geç

   Klavyeyle odak

   Evet, Tab ile

   Yaklaşık duyulan

   “Sonraki adıma geç, düğme”

   aria-label görünür metni ezer. “Devam et” diyen sesli komut eşleşmeyebilir.

   Düzeltilmiş

   Devam et

   <button type="submit">Devam et</button>

   Rol

   düğme

   Erişilebilir ad

   Devam et

   Klavyeyle odak

   Evet, Tab ile

   Yaklaşık duyulan

   “Devam et, düğme”

   Ad ile görünen yazı aynı. Sesli komut da bu kelimeyle eşleşir.

Kurgusal dört öğe. Rol, ad ve duyulan cümle elle yazılmış yaklaşık bir temsildir, tarayıcıdan okunmaz. Gerçek çıktı ekran okuyucuya, tarayıcıya ve dile göre değişir. Soldaki buton görselleri yalnızca resimdir, tıklanmaz.

Kendi sayfanızda gerçek değeri görmek için tarayıcının geliştirici araçlarındaki erişilebilirlik panelini açın. Araç seçenekleri erişilebilirlik test araçları rehberinde.

aria-live: değişen içeriği duyurmak

Sayfanın bir kısmı yenilenmeden değiştiğinde ekran okuyucu bunu kendiliğinden fark etmeyebilir. aria-live o bölgeyi canlı bölge yapar. Üç değeri var:

• off: varsayılan. Ekran okuyucunun odağı o bölgede değilse değişiklik okunmaz.
• polite: değişiklik ilk uygun anda okunur.
• assertive: değişiklik hemen okunur. Standart, kesinti gerçekten şart değilse bunun kullanılmamasını ister.

"Ürün sepete eklendi" gibi bir mesaj için polite yeter. Yukarıdaki örnekteki durum satırı da böyle çalışıyor.

Benim notum

Bir arayüzün erişilebilirliğine bakarken işe HTML'den başlarım. Doğru öğe seçildiyse ARIA ihtiyacı çoğu zaman birkaç aria-label ve bir canlı bölgeyle sınırlı kalır.

Her butona refleksle aria-label eklemek bence pahalı bir alışkanlık. Görünen metin zaten ad olur. İkinci bir ad ise zamanla o metinden ayrışabilir. Kuralların tamamı için WCAG rehberine, kendi ürününüzün kontrolü için UX Audit sayfasına bakabilirsiniz.