ARIA (WAI-ARIA) Nedir?
Kısa tanım
ARIA (WAI-ARIA, Accessible Rich Internet Applications), W3C'nin HTML öğelerine rol, durum ve özellik bilgisi eklemek için tanımladığı bir nitelik setidir. Bu bilgi, ekran okuyucu gibi yardımcı teknolojilere bir öğenin ne olduğunu ve hangi durumda bulunduğunu iletir. ARIA yalnızca anlamı değiştirir, davranış eklemez. Güncel W3C Önerisi WAI-ARIA 1.2'dir ve temel ilke, yerel HTML yetiyorsa ARIA kullanmamaktır.
Diğer adları: WAI-ARIA, Accessible Rich Internet Applications, ARIA nitelikleri, aria-label, ARIA rolleri
Roller, durumlar ve özellikler
Tarayıcı, sayfadaki her öğe için bir erişilebilirlik ağacı oluşturur: öğenin rolü, adı, durumu. Ekran okuyucu bu ağacı okur. HTML öğelerinin çoğu bu bilgiyi kendiliğinden taşır; <button> "buton" rolündedir, <input type="checkbox"> işaretli olup olmadığını bildirir. ARIA, HTML'nin karşılayamadığı durumlarda bu bilgiyi elle eklemenin yoludur. WAI-ARIA 1.2, Haziran 2023'ten beri W3C Önerisi (Recommendation) statüsündedir.
| Tür | Ne anlatır | Örnek |
|---|---|---|
| Rol | Öğenin ne olduğu | role="tablist", role="dialog", role="alert" |
| Durum | Kullanıcı etkileşimiyle değişen bilgi | aria-expanded="true", aria-checked, aria-selected |
| Özellik | Öğenin daha kalıcı nitelikleri ve ilişkileri | aria-label, aria-describedby, aria-controls |
Spesifikasyon rolleri ayrıca gruplar: widget rolleri (sekme, kaydırıcı), belge yapısı rolleri, landmark rolleri (gezinme, ana içerik) ve canlı bölge rolleri (anlık bildirimler).
ARIA'nın ilk kuralı
Gereken anlamı ve davranışı zaten yerleşik olarak sunan yerel bir HTML öğesi veya niteliği kullanabiliyorsanız, bir öğeyi başka amaçla kullanıp ARIA rolü, durumu ya da özelliği ekleyerek erişilebilir kılmak yerine onu kullanın.
Bu kural W3C'nin "Using ARIA" belgesinden gelir. Belge Şubat 2026'da güncellenmeyen taslak (Discontinued Draft) statüsüne alındı; dört kural yalnızca başvuru için korunuyor. İlke ise geçerliliğini koruyor: W3C Önerisi olan "ARIA in HTML", yerel anlamla aynı rolü tekrar etmeyi önermez ve etkileşimli öğelerin rolünü ARIA ile ezmeyi kısıtlar. Desen bazında rehberlik için W3C ARIA Authoring Practices Guide sayfasını işaret eder. Pratikte ilk adım her zaman anlamsal HTML kullanmaktır.
ARIA davranış eklemez
En yaygın yanlış anlama, rol eklemenin bir öğeyi işlevsel yaptığını sanmaktır. Aşağıdaki ilk örnek ekran okuyucuya "buton" diye okunur ama klavyeyle odaklanamaz, Enter veya boşluk tuşuna tepki vermez:
<!-- Yalnızca anlam: klavye desteği yok -->
<div role="button" onclick="kaydet()">Kaydet</div>
<!-- Doğrusu: odak, klavye ve rol kendiliğinden gelir -->
<button type="button" onclick="kaydet()">Kaydet</button>İlk sürümü düzeltmek için tabindex="0", tuş olaylarını dinleyen JavaScript ve devre dışı durumunun yönetimi gerekir; yani <button> öğesinin bedavaya verdiği her şey yeniden yazılır.
ARIA'nın gerçekten gerektiği yer
Yerel karşılığı olmayan veya durumunu HTML'nin ifade edemediği bileşenlerde ARIA vazgeçilmezdir. Açılır bir menü butonu tipik örnektir:
<button type="button" aria-expanded="false" aria-controls="menu">
Hizmetler
</button>
<ul id="menu" hidden>…</ul>Menü açıldığında JavaScript hem hidden niteliğini kaldırmalı hem de aria-expanded değerini true yapmalıdır. Durumu güncellenmeyen bir ARIA niteliği, hiç olmamasından kötüdür: ekran okuyucu kullanıcısına yanlış bilgi verir. Bu tür mantık bir UI bileşeni içinde bir kez doğru yazılırsa tüm sitede tekrar kullanılır. Form gönderildiğinde "Mesajınız alındı" gibi görünmeyen değişiklikleri duyurmak için aria-live bölgeleri de aynı kategoridedir.
Sık görülen hatalar
- Gereksiz roller:
<nav role="navigation">veya<button role="button">hiçbir şey kazandırmaz, yalnızca gürültü ekler. - Odaklanabilir öğeyi gizlemek:
aria-hidden="true"verilen bir kapsayıcının içindeki bağlantıya hâlâ Tab ile gidilebiliyorsa, klavye kullanıcısı adı okunmayan bir öğeye düşer. - Görünen metinle çelişen etiket: Ekranda "Gönder" yazan butona
aria-label="Formu ilet"vermek, sesli komutla "Gönder'e tıkla" diyen kullanıcıyı başarısız kılar. - Her şeye aria-label: Anlamsal rolü olmayan bir
<div>veya<span>üzerindekiaria-labelçoğu yardımcı teknolojide okunmaz. - Otomatik testlere güvenmek: Araçlar geçersiz nitelikleri bulur, ama etkileşim mantığının doğru olup olmadığını ancak klavyeyle ve ekran okuyucuyla yapılan test gösterir. Kapsamın tamamı için web erişilebilirliği maddesine bakılabilir.