ARIA Rolleri ve Özellikleri Referansı

ARIA'nın Beş Kuralı

1. Gerekli semantiğe ve davranışa sahip yerel bir HTML öğesi veya niteliği kullanabiliyorsanız, bir öğeyi yeniden amaca uygun hale getirmek yerine onu kullanın.
2. Gerçekten zorunlu olmadıkça yerel semantiği değiştirmeyin.
3. Tüm etkileşimli ARIA kontrolleri klavyeyle kullanılabilir olmalıdır.
4. Odaklanabilir bir öğede role="presentation" veya aria-hidden="true" kullanmayın.
5. Tüm etkileşimli öğelerin erişilebilir bir adı olmalıdır.

ARIA Ne Zaman Kullanılır

• Yerel HTML'in gerekli semantiği sağlayamadığı özel etkileşimli widget'lar — sekmeler, akordeonlar, ağaç görünümleri.
• Ekran okuyuculara dinamik içerik güncellemelerini duyurmak için canlı bölgeler.
• Yapısal olarak ifade edilemeyen ilişkili öğeleri ilişkilendirmek için ilişkiler.
• Etkileşimli bileşenlerin mevcut durumunu iletmek için durum açıklaması.

Canlı Bölgeler

Canlı bölgeler, odak hareketi gerektirmeden ekran okuyucu kullanıcılarına dinamik içerik değişikliklerini duyurur. Arama sonuçları, form doğrulama mesajları, yükleme göstergeleri ve bildirim tostları için kullanın.

<!-- aria-live="polite": mevcut konuşma bittikten sonra duyurur -->
<div aria-live="polite" aria-atomic="true">
  <!-- İçeriği buraya dinamik olarak enjekte edin -->
</div>

<!-- Yaygın hata: öğe DOM'a girdikten SONRA aria-live enjekte etmek -->
<!-- Öğe, içerik enjekte edilmeden ÖNCE DOM'da olmalıdır -->
<div aria-live="polite" class="ekran-okuyucu-duyurusu"></div>

Erişilebilir Adlar: Hiyerarşi

1. aria-labelledby — başka bir öğenin metnine başvurur. En yüksek öncelik.
2. aria-label — doğrudan bir dize sağlar.
3. HTML etiket öğesi — form girişleri için ilişkili <label> metni.
4. Metin içeriği — düğmeler ve bağlantılar için öğenin içindeki metin.
5. alt niteliği — görseller için alt metni.