ARIA Giriş Alanlarının Erişilebilir Özellikli Adı Yok Sorunu

“ARIA giriş alanlarının erişilebilir özellikli adı yok” uyarısı, Google’a ait Page Speed Insights sayfası analizlerinde karşılaşılabilecek bir uyarıdır. Bu hata özellikle web sitesindeki sayfayı yukarı kaydıran butonlarda, formlarda bulunan giriş alanlarının (input) ARIA (Accessible Rich Internet Applications) özellikleriyle düzgün bir şekilde etiketlenmediği durumlarda ortaya çıkar. Bu, ekran okuyucu kullanan kullanıcıların form alanlarını doğru şekilde anlamamalarına sebep olabilir. Erişilebilirlik açısından kritik bir sorundur çünkü her form alanının ne amaçla kullanıldığını ekran okuyucu kullanıcıları anlayabilmelidir.

ARIA Giriş Alanlarının Erişilebilir Özellikli Adı Yok Hatası nedir?

Bu hata, ARIA’nın “label” (etiket) ya da “aria-label” gibi özelliklerinin eksik olduğu bir durumu ifade eder. Erişilebilirlik standartlarına göre, her form elemanının anlamlı bir etiketi olmalıdır. Eğer etiket yoksa, bu durumda ekran okuyucular bu giriş alanlarını anlamada zorlanır.

ARIA Sorunu Nasıl Çözülür?

Bu hatayı düzeltmek için aşağıdaki adımları takip edebilirsiniz:

• Etkili bir etiket kullanın (label): Her giriş alanının bir <label> etiketi ile ilişkilendirilmesi gerekir. Etiketin for özelliği, giriş alanının id özelliğiyle eşleşmelidir.
  <label for=”username”>Kullanıcı Adı:</label>
  <input type=”text” id=”username” name=”username”>
• Eğer <label> kullanılamıyorsa, aria-label ekleyin: Eğer etiket kullanmak mümkün değilse, aria-label özelliği ile giriş alanına açıklama ekleyebilirsiniz.
  <input type=”text” aria-label=”Kullanıcı Adı”>
• Eğer giriş alanı bir buton ya da diğer interaktif eleman ise aria-label veya aria-labelledby kullanabilirsiniz: Eğer giriş elemanına ait bir metin ya da açıklama zaten başka bir yerde bulunuyorsa, aria-labelledby özelliğini kullanabilirsiniz.
  <button aria-labelledby=”submitButtonLabel”>Gönder</button>
  <span id=”submitButtonLabel” class=”sr-only”>Formu gönder</span>
• Hedeflenen ARIA özelliklerini doğru kullanın: Bazen aria-describedby gibi ek açıklamalarla, kullanıcıyı daha detaylı bilgilendirebilirsiniz.
  <input type=”text” aria-label=”Telefon Numarası” aria-describedby=”phone-help”>
  <div id=”phone-help”>Lütfen telefon numaranızı başında sıfır olmadan girin.</div>

Erişilebilirlik hatalarını düzeltmek, sadece ekran okuyucuları kullanan kişilere değil, tüm kullanıcı deneyimini iyileştirmeye yardımcı olur. “ARIA giriş alanlarının erişilebilir özellikli adı yok” hatasını düzeltmek için doğru ARIA etiketleri ve erişilebilirlik kurallarını kullanmak, form elemanlarını her kullanıcı için erişilebilir kılar.