Ana içeriğe geç

4.1.2 Ad, Rol, Değer

Kullanıcı arayüzü bileşenleri; erişilebilir adlarını, rollerini, durumlarını ve mevcut değerlerini yardımcı teknolojilere açıkça iletmelidir. Bu sayede kullanıcılar farklı araç ve cihazlarda bileşenleri tutarlı şekilde anlayıp kullanabilir.

SC Kodu: 4.1.2 Seviye: A
URL: https://www.w3.org/TR/WCAG22/#name-role-value

Genel Tanım​

Bu başarı kriteri, kullanıcı arayüzü bileşenlerinin (form kontrolleri, düğmeler, bağlantılar ve özel kontroller gibi) erişilebilir adlarını, rollerini, durumlarını ve özelliklerini yardımcı teknolojilere iletmesini sağlar. Bu, engelli kullanıcıların bu öğelerle etkili bir şekilde etkileşim kurabilmesi için çok önemlidir. Yerel HTML öğeleri genellikle bu gereksinimleri varsayılan olarak karşılar, ancak özel bileşenler genellikle WAI-ARIA özniteliklerini kullanarak ek kodlama gerektirir.

Faydalar​

  • Geliştirilmiş Erişilebilirlik: Yardımcı teknolojilerin, kullanıcı arayüzü öğelerinin işlevini ve durumunu kullanıcılara doğru bir şekilde iletebilmesini sağlar.
  • Geliştirilmiş Kullanıcı Deneyimi: Engelli kullanıcıların özel araçları ve kontrolleri anlamalarına ve bunlarla etkileşim kurmalarına yardımcı olur.

Ana Amaç​

Kullanıcı arayüzü bileşenlerinin erişilebilirlik özelliklerinin (ad, rol, değer, durum ve özellikler) doğru şekilde tanımlanmasını ve yardımcı teknolojiler için programatik olarak kullanılabilir olmasını sağlamak, engelli kullanıcılar için etkileşimi kolaylaştırmak amacıyla anlamsal HTML kullanmak çok önemlidir. Varsayılan olarak, anlamsal HTML bileşenlere önceden tanımlanmış ad, rol, değer ve durum özellikleri sağlar.

Ancak, web geliştiricileri etkileşimli widget'lar veya applet'ler (örneğin, sekme panelleri, ağaçlar, iç içe gezinme çubukları) gibi karmaşık web içeriği oluştururken, ad, rol, değer, durum veya klavye işlevselliği gibi temel özellikler gözden kaçabilir. WAI-ARIA entegrasyonu, bu etkileşimli bileşenlerin gerekli tüm özelliklere sahip olmasını sağlar.

Bu bileşenleri bir ekran okuyucu ile test etmek, doğru WAI-ARIA özniteliklerinin varlığını doğrular. Örneğin, anlamsal HTML olmadan oluşturulmuş gösterişli bir kaydırıcıda temel öznitelikler eksik olabilir. Bunu düzeltmek için, erişilebilir ad için aria-label veya aria-labelledby, rol için role="slider", özellikler ve durumlar için aria-valuemax, aria-valuemin ve aria-valuenow, klavye odağını etkinleştirmek için tabindex="0" ve işlevsellik için JavaScript gibi öznitelikler eklenmelidir.

Anlamsal HTML'ye öncelik vermek yalnızca zamandan tasarruf sağlamakla kalmaz, aynı zamanda test çabalarını ve olası erişilebilirlik sorunlarını da azaltır.

En İyi Uygulamalar​

  • Yerel HTML Öğelerini Kullanın: Gerekli erişilebilirlik özelliklerine doğal olarak sahip oldukları için yerel HTML öğelerini tercih edin.
  • Klavye ile Çalıştırılabilirliği Sağlayın: Sekme panelleri gibi özel öğelerin odaklanmasını ve klavye etkileşimleri yoluyla tetiklenebilmesini sağlayın. Bu, tabindex özniteliğini ve JavaScript keydown veya keyup olay işleyicilerini ekleyerek gerçekleştirilebilir.
  • WAI-ARIA Niteliklerini Uygulayın: Özel veya taklit edilen öğelerde, ad, rol, durum ve özellikleri tanımlamak için WAI-ARIA niteliklerini kullanın.
  • Etiket Yerleşimi: Etiketlerin "for" ve "id" öznitelikleri kullanılarak denetimlerle programatik olarak ilişkilendirildiğinden emin olun. Bu öznitelikler olmadan, denetimlerin erişilebilir adı eksik olabilir.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

Açılır kutuda Kapat düğmesi (X)

Nelerden Kaçınılmalı?

Açılır kutu için özel bir kapatma düğmesi, uygun erişilebilirlik özelliklerine sahip olmayan bir div veya span öğesi kullanılarak oluşturulur.

HTML/CSS

<div id = "box">
  Bu bir açılır kutu.
  <div class = " close-button" onclick = "document.getElementById('box').style.display='none';"> X</div>
</div>

Açıklama: Bu uygulamada erişilebilirlik özellikleri eksiktir. Yardımcı teknolojiler ve klavye kullanıcıları, doğru erişilebilirlik adı (şu anda sadece "X"), rol ve tabindex özelliklerine sahip olmadığı için düğmeyle etkili bir şekilde etkileşim kuramazlar.

Ne Yapılmalı?

HTML/CSS

<div id = "box" >
  Bu bir açılır kutu.
  <button aria-label = "Kapat" onclick = "document.getElementById('box').style.display='none';" class = " close-button" >X </button>
</div>

Açıklama: Düzeltilmiş örnekte, <div> yerine <button> elementi kullanılmış ve aria-label özniteliği erişilebilir bir ad sağlamıştır. Doğru HTML etiket adı kullanıldığı için role özniteliğine gerek yoktur. Ayrıca, düğme herhangi bir durum değişikliğini temsil etmediği için, durumla ilgili WAI-ARIA öznitelikleri gerekli değildir. Bu kurulum, yardımcı teknolojilerin düğmenin amacını kullanıcılara iletebilmesini ve düğmenin klavye aracılığıyla çalıştırılabilir olmasını sağlar.