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.
Junior'dan Senior'a detaylı cevaplarla bir BT mülakat soruları kütüphanesi.
Bağış Yap