ARIA rolü ne zaman gereklidir?

Mehmet · Dün 21:46 da

ARIA rolü ne zaman gereklidir?

ARIA rolü, bir HTML öğesinin anlamını yardımcı teknolojilere bildirmek için kullanılır. Ancak çoğu durumda gerekli değildir: Önce amacınıza uygun yerleşik HTML öğesini kullanın. Örneğin düğme için <button>, bağlantı için <a href="...">, başlık için <h1> veya <h2> seçilmelidir. Bu öğeler anlamın yanında klavye davranışı, odaklanma ve tarayıcı erişilebilirliği gibi temel özellikleri de sağlar.

ARIA rolü, yerleşik HTML semantiğinin ihtiyacı karşılamadığı durumlarda gereklidir. En yaygın örnek, özel bir arayüz bileşeninin oluşturulmasıdır. Örneğin tasarım gereği bir <div> öğesi düğme gibi çalıştırılıyorsa role="button" rolü, öğenin yardımcı teknolojilere düğme olarak duyurulmasını sağlar. Fakat rol tek başına öğeyi düğmeye dönüştürmez; klavye ile çalıştırma, odaklanma ve durum değişiklikleri ayrıca uygulanmalıdır.

Önce yerleşik HTML'yi seçin

Aynı işlevi sağlayan yerleşik bir öğe varsa ARIA eklemeyin. Gereksiz veya yanlış ARIA, tarayıcının doğal anlamını değiştirebilir ve ekran okuyucu kullanıcılarını yanıltabilir.

İşlevi belirleyin: bağlantı mı, düğme mi, form alanı mı, başlık mı, açılır menü mü?
Bu işleve karşılık gelen yerleşik HTML öğesini seçin.
Yerleşik öğe görünüm veya davranış bakımından yeterli değilse CSS ile görünümü değiştirin; yalnızca görünüm için ARIA kullanmayın.
Gerçekten özel bir bileşen gerekiyorsa uygun rolü ve gerekli durum özelliklerini belirleyin.
Klavye odağını, klavye işlemlerini, görünür durumu ve ekran okuyucu duyurusunu birlikte test edin.

Örneğin tıklanınca başka bir sayfaya gidilecekse <div role="button"> yerine bağlantı kullanın. Bir işlem başlatılacaksa <span role="button"> yerine düğme kullanın. Bu seçim, yalnızca ekran okuyucunun duyurusunu değil, klavye ve tarayıcı davranışını da doğru hale getirir.

ARIA'nın gerekli olabileceği durumlar

Aşağıdaki karar özeti, rol ekleme ihtiyacını ayırmaya yardımcı olur:

Durum	Tercih	ARIA gereksinimi
Sayfa içi veya dışı gezinme	`<a href>`	Genellikle gerekmez
Bir işlem başlatma	`<button>`	Genellikle gerekmez
Özel açılır pencere veya sekme bileşeni	Yerleşik karşılığı olmayan kontrollü bileşen	Uygun rol, durum ve klavye davranışı gerekebilir
Sayfanın ana, gezinme veya tamamlayıcı bölümü	Anlamlı HTML bölümleri	Çoğunlukla HTML semantiği yeterlidir

Tablodaki “gerekebilir” ifadesi, rol adını eklemenin yeterli olduğu anlamına gelmez. Örneğin özel bir sekme bileşeninde sekmelerin rolleriyle birlikte seçili sekmenin durumu, ilgili panelle ilişki ve klavye geçişleri de doğru kurulmalıdır. Bileşen bu ayrıntıları gerektirdiği için mümkünse erişilebilirliği yerleşik HTML ile daha kolay korunan bir çözüm tercih edilir.

Somut örnek: özel düğme

Aşağıdaki örnek, ARIA rolünün tek başına neden yeterli olmadığını gösterir. Bu, yerleşik <button> kullanılamayan özel bir bileşen varsayımıdır:

Kod:

<style>
  #action { display: inline-block; padding: 8px; border: 1px solid; border-radius: 4px; }
  #action:focus-visible { outline: 2px solid; outline-offset: 2px; }
  #action[aria-pressed="true"] { font-weight: bold; }
</style>
<div id="action" role="button" tabindex="0" aria-pressed="false">Seçim</div>

<script>
  const action = document.querySelector('#action');

  function toggle() {
    const pressed = action.getAttribute('aria-pressed') === 'true';
    action.setAttribute('aria-pressed', String(!pressed));
  }

  action.addEventListener('click', toggle);
  action.addEventListener('keydown', (event) => {
    if (!event.repeat && (event.key === 'Enter' || event.key === ' ')) {
      event.preventDefault();
      toggle();
    }
  });
</script>

Beklenen sonuç, fareyle tıklama veya odak öğedeyken Enter ya da Boşluk tuşuna basma sonucunda aria-pressed değerinin değişmesi ve seçili görünümün güncellenmesidir. Toggle düğmenin erişilebilir adı sabit kalır; durum adın değiştirilmesiyle değil aria-pressed ile bildirilir. Ekran okuyucu rolü ve basılı durum bilgisini alabilir. Klavye ile çalışmıyorsa yalnız rol eklenmiş, bileşenin davranışı tamamlanmamış demektir. Gerçek projede bu örneğin ilk tercihi yine <button type="button"> kullanmaktır; özel <div> yaklaşımı, yerleşik öğenin gerçekten kullanılamadığı bileşenlerle sınırlı tutulmalıdır.

Sık yapılan hatalar

Her <div> öğesine rol eklemek: Bu, öğeye otomatik olarak işlev veya klavye desteği kazandırmaz.
Yerleşik öğeye gereksiz eşdeğer rol eklemek: Doğal HTML semantiğini tekrar etmek bakım yükünü artırabilir.
Görsel simgeyi rol sanmak: İkonun görünmesi, işlemin adını ve durumunu açıklamaz; erişilebilir ad ayrıca düşünülmelidir.
Durum rolünü güncellememek: Açık-kapalı veya seçili-seçili değil gibi bilgiler değiştiğinde ilgili ARIA durumu da güncellenmelidir.
Yalnız fareyle test etmek: Rol verilen özel bileşen, klavye odağı ve klavye işlemleriyle de denenmelidir.

Kısa kural şudur: Önce doğru HTML öğesini kullanın; yalnızca gerçek bir semantik boşluk veya özel bileşen varsa ARIA ekleyin. Rol eklediğinizde bununla birlikte gerekli durumları, erişilebilir adı, odağı ve klavye davranışını da tamamlayın.

Sık sorulan sorular

ARIA, SEO için zorunlu mudur?

Hayır. ARIA'nın amacı arama sıralamasını yükseltmek değil, arayüzün anlamını ve durumunu yardımcı teknolojilere aktarmaktır. SEO gerekçesiyle rastgele rol eklemek doğru bir yaklaşım değildir.

CSS ile gizlenen bir öğeye ARIA rolü eklemek yeterli olur mu?

Hayır. Görsel olarak gizli veya erişilebilirlik ağacından çıkarılmış bir öğenin rolü kullanıcıya anlamlı biçimde ulaşmayabilir. Görünürlük, erişilebilirlik ağacındaki durum ve etkileşim davranışı birlikte değerlendirilmelidir.

Bir öğeye birden fazla ARIA rolü yazabilir miyim?

Role özniteliği boşlukla ayrılmış bir yedek rol listesi kabul edebilir; tarayıcı desteklediği ilk rolü kullanır. Bu, öğeye aynı anda birkaç bağımsız rol kazandırmaz. Çoğu bileşende tek ve doğru rol seçmek yeterlidir. Birden fazla davranışı tek öğede birleştirmek yerine bileşeni uygun HTML yapısına ayırmak daha anlaşılır ve güvenilir olur.

ARIA rolü ne zaman gereklidir?

Mehmet