Web sitenizin erişilebilirliği, kullanıcı deneyimi açısından büyük önem taşıyor. “Düğmelerin erişilebilir adları yok” hatası, sitenizdeki düğmelerin ekran okuyucu kullanan kullanıcılar tarafından anlaşılabilir olmadığını gösterir. Bu, düğmenin işlevini tanımlayan bir metnin eksik olduğu anlamına gelir ve bu da görme engelli kullanıcılar için büyük bir engel oluşturur.
Bu Hatanın Nedenleri
Bu hata, genellikle düğme etiketinin HTML içinde doğru şekilde tanımlanmamasından kaynaklanır. Düğmenin işlevini belirten bir metin veya aria-label gibi nitelikler eklenmemiş olabilir. Bu durumda, ekran okuyucular düğmenin ne işe yaradığını bilemez ve kullanıcıya faydalı bilgi veremez.
Erişilebilir ad eksikliği, yalnızca görme engelli kullanıcılar için değil, aynı zamanda klavye kullanıcıları ve diğer yardımcı teknolojileri kullanan kişiler için de sorun yaratır. Bu tür erişilebilirlik hataları, kullanıcıların sitenizle etkileşimde bulunmasını zorlaştırır ve kullanıcı deneyimini olumsuz etkiler.
Hatanın Çözümü
Bu sorunu çözmek için, her düğmeye anlamlı bir erişilebilir ad eklemelisiniz. İşte bunu nasıl yapabileceğiniz:
- Düğme Metni Ekleyin: Düğmenin içinde metin varsa, ekran okuyucular bu metni otomatik olarak tanıyacaktır. Örneğin, “Gönder” veya “Kaydet” gibi düğmenin ne yapacağını belirten basit ve anlaşılır bir metin ekleyin.
<button>Gönder</button>
- aria-label Özelliğini Kullanın: Eğer düğmenin içinde görünür metin yoksa, aria-label özelliğini kullanarak düğmenin işlevini belirten bir metin ekleyebilirsiniz. Bu özellik, ekran okuyucuların düğmeyi doğru şekilde tanımasına olanak tanır.
<button aria-label="Formu Gönder">
<img src="gonder.png" alt="">
</button>- aria-labelledby Kullanımı: Eğer birden fazla düğme aynı sayfa üzerindeki bir başlık veya başka bir metinle ilişkilendirilecekse, aria-labelledby özelliğiyle o metni düğmeye bağlayabilirsiniz.
<button aria-labelledby="formBasligi">Gönder</button>
Uyumluluk Verileri ve Etki
Bu hata, özellikle görme engelli ve hem işitme hem görme engelli olan (deafblind) kullanıcıları etkiler, çünkü düğmelerin işlevlerini tanımlayan adlar eksik olduğunda ekran okuyucular bu düğmeleri düzgün şekilde tanımlayamaz. Bu durum, WCAG 2.0, 2.1 ve 2.2 (Seviye A) standartlarının “İsim, Rol, Değer” kriterini ihlal eder. Ayrıca, Section 508, Trusted Tester, ve EN 301 549 gibi erişilebilirlik yönergelerine de uyumsuzluk gösterir. Bu uyumsuzluk, erişilebilirlik değerlendirmelerinde önemli bir sorun olarak ele alınır.
Sonuç
Erişilebilirlik, her kullanıcının web sitenizle rahatça etkileşimde bulunmasını sağlamanın anahtarıdır. Düğmelere anlamlı adlar eklemek, erişilebilirlik standartlarına uyumu artırır ve sitenizin daha geniş bir kitleye hitap etmesini sağlar. Bu hatayı düzelterek, kullanıcı deneyimini iyileştirebilir ve sitenizin herkes tarafından erişilebilir olmasını sağlayabilirsiniz.
Unutmayın, herkesin web sitenizi rahatça kullanabilmesi, dijital dünyada kapsayıcılığı artırmanın temel yollarından biridir.
Kaynak: https://dequeuniversity.com/rules/axe/4.9/button-name
