ARIA (Accessible Rich Internet Applications), erişilebilirlik semantiği — roller, durumlar ve özellikler — ekleyen bir öznitelik setidir ve bu, yerel HTML tarafından ifade edilemez. Ancak en önemli ARIA kuralı: yerel HTML'i tercih edin.
Save
Save
Yerel öğeler doğru rollara, klavye davranışına ve odaklanmaya ücretsiz olarak gelir. ARIA'ya yalnızca yerel bir öğe işi yapamadığında gidin.
<!-- 1. Roles — what an element IS (for custom widgets) -->
<div role="tablist"><div role="tab" aria-selected="true">Tab 1</div></div>
<!-- 2. States — current condition (dynamic) -->
<button aria-expanded="false" aria-controls="menu">Menu</button>
<input aria-invalid="true" aria-describedby="err" />
<!-- 3. Properties — relationships / labels -->
<input aria-label="Search" />
<div aria-labelledby="heading-id"></div>
<div aria-live="polite">3 results found</div> <!-- screen reader announces updates -->
<div aria-live="assertive" role="alert">Error saving!</div> <!-- interrupts -->
Bu gerçekten yararlı ARIA: ekran okuyuculara sayfa yeniden yüklemesi olmaksızın değişen içerik hakkında bilgi verir (arama sonuçları, toast'lar, doğrulama hataları).
Yanlış ARIA hiç olmamasından daha kötüdür — ekran okuyucu kullanıcılarına yanlış bilgi verir. Ve ARIA yalnızca semantiği değiştirir, hiçbir zaman davranışı değil: bir <div> üzerindeki role="button" onu odaklanabilir veya tıklanabilir yapmaz; tabindex ve tuş işleyicileri kendiniz eklemelisiniz.
%95 durumda anlamsal HTML kullanın; özel widget'lar (sekmeler, birleşik kutular, menüler) için boşlukları doldurmak ve live region'lar aracılığıyla dinamik güncellemeleri duyurmak için ARIA kullanın.
Kurallara uyun — yerel olanı tercih edin, yerel semantiği gereksiz yere değiştirmeyin, durumları senkronize tutun ve asla tam olarak uygulamadığınız bir rol uygulamayın.