ARIA mı semantik HTML mi.
Semantik HTML bir öğenin rolünü zaten taşıyorsa ARIA eklemek fayda getirmez; ARIA yalnız HTML'in ifade edemediği durumlar içindir.
İki yaklaşım rakip değil, sıralı. W3C'nin ARIA kullanım kılavuzundaki ilk kural şudur: karşılığı olan bir HTML öğesi varsa onu kullan, ARIA ekleme. ARIA bir tamamlayıcıdır, bir alternatif değil.
ARIA neden davranış eklemez
En sık yanlış anlaşılan nokta budur. ARIA öznitelikleri yalnız erişilebilirlik ağacına bilgi yazar; tarayıcıya bir şey yaptırmaz. Bir div'e role="button" vermek onu odaklanabilir yapmaz, Enter tuşuna yanıt verdirmez ve devre dışı bırakıldığında tıklamayı engellemez. Üçü de elle yazılmalıdır ve üçü de sıkça unutulur.
Buna karşılık gerçek bir button öğesi bunların hepsini yerleşik olarak taşır ve tarayıcı sürümleri arasında tutarlı davranır. Aynı ilişki liste, başlık, gezinme, form alanı ve tablo için de geçerlidir. Semantik işaretlemenin ne olduğu ayrı yazıldı.
ARIA'nın gerçekten gerektiği yerler
HTML'in karşılığı olmayan bileşenler vardır: sekme paneli, ağaç görünümü, birleşik kutu, kaydırıcı. Bunlar ARIA olmadan yardımcı teknolojiye anlatılamaz ve W3C'nin kullanım kalıpları tam olarak bu bileşenler için yazılmıştır.
İkinci grup ilişkilerdir. Bir form hatasının hangi alana ait olduğu, bir bölgenin adı, sayfa yüklenmeden değişen bir içeriğin duyurulması — hiçbirinin HTML karşılığı yok. Bu sitede iletişim formundaki hata mesajları canlı bölge olarak bildiriliyor; alanla ilişki ise aria-describedby ile kuruluyor. Formun tamamı ayrı anlatıldı.
Ölçüt: ne az ne çok
Pratik kural şu: bir öznitelik silindiğinde ekran okuyucunun anlattığı şey eksiliyorsa gereklidir; hiçbir şey değişmiyorsa gereksizdir ve bakım yükünden başka bir şey getirmez. Denetim araçları fazla ARIA'yı çoğu zaman yakalamaz — çünkü teknik olarak geçerlidir, yalnız yanlıştır. Otomatik denetimin sınırları ayrı yazıldı.
Ölçüt
- Rol bilgisi — Semantik HTML: Öğenin kendisinden gelir — button, nav, main · ARIA: Öznitelikle elle bildirilir — role="button"
- Klavye davranışı — Semantik HTML: Tarayıcı sağlar: odak, Enter, Space · ARIA: Yazılmalıdır — ARIA davranış eklemez, yalnız bildirir
- Durum yönetimi — Semantik HTML: Tarayıcı yürütür (disabled, checked) · ARIA: Elle güncellenmelidir (aria-expanded, aria-checked)
- Hata riski — Semantik HTML: Düşük — davranış yerleşik · ARIA: Yüksek — yanlış rol, yardımcı teknolojiyi yanıltır
- Kod maliyeti — Semantik HTML: Sıfıra yakın · ARIA: Her durum için ayrı güncelleme kodu
- Ne zaman gerekir — Semantik HTML: Karşılığı olan her durumda · ARIA: Sekme paneli, ağaç, birleşik kutu gibi HTML karşılığı olmayan bileşenlerde
- Canlı güncelleme — Semantik HTML: Ayrı mekanizma yok · ARIA: aria-live ile duyurulur — HTML'de karşılığı yok
Her yere ARIA eklemek erişilebilirliği artırır mı?
Hayır, çoğu zaman azaltır. Yanlış ya da gereksiz ARIA, yardımcı teknolojiye öğenin gerçekte olduğundan farklı bir şey olduğunu söyler; hiç ARIA olmaması bu durumdan iyidir.
Ne zaman ARIA gerekir?
HTML'in karşılığı olmayan bir bileşen kurulduğunda: sekme paneli, ağaç görünümü, birleşik kutu, canlı bölge. Bir de HTML'in ifade edemediği ilişkilerde — bir hatanın hangi alana ait olduğu gibi.
role="button" ile <button> aynı mı?
Değil. role="button" yalnız rolü bildirir; odaklanabilirlik, Enter ve Space tuşlarına yanıt ve devre dışı durumu elle yazılmalıdır. <button> bunların hepsini tarayıcıdan alır.