Sayfa Hızı: Form öğelerinin ilişkili etiketleri eksik. Formlar, web siteleri için önemli bir araçtır ve arama motorları tarafından doğru şekilde taranmaları gerekmektedir. Form öğelerinin ilişkili etiketleri olmadığı zaman, arama motorları bu verileri doğru şekilde okuyamazlar ve bu da SEO’ya olumsuz etki edebilir. Doğru etiketleri kullanarak web sitenizi arama motorları için daha dostu hale getirebilirsiniz.
Form Öğelerinin İlişkili Etiketleri Yok Hatası
Bazı sitelerin sayfa hız skoru raporunda erişilebilirlik başlığı altında beliren bir hata olan “Form öğelerinin ilişkili etiketleri yok” hatası, aslında bir uyarıdır ve erişilebilirlik altında olmasının bir sebebi vardır. Görme engelli kullanıcılar, sitelerimizi bazı özel programlarla ziyaret ederler. Sitemizdeki ögelerin içerikleri ise HTML tarafında bir dizi işlem yapıldıktan sonra görme engelli bireye aktarılır. Bu kişilerin, içeriklerimizi daha rahat tüketmesi için onlara uygun formatta içerik üretmemiz gerekir.
Neden İlişkili Etiketler Önemlidir?
Form öğelerinin ilişkili etiketleri olmaması, görme engelli kullanıcıların sitelerimizdeki formları kullanmasını zorlaştırır. Bu nedenle, ilişkili etiketlerin eklenmesi gerekmektedir.
Form Öğelerinin İlişkili Etiketleri Nasıl Eklenir?
Sitenizde hatayı aldığınız sayfa içerisindeki form ögelerinin en az birinde etiket sorunu olabilir. Bu durumda öncelikle, form öğelerinin ilişkili etiketlerinin olup olmadığını kontrol etmeniz gerekmektedir.
Örnek:
Formda bir “name” değeri var. Buradaki değer aslında yazılım tarafından random olarak belirlenmiş ve karmaşık ifadeler yer alıyor. Eğer görme engelli bireylerin programı bu form ögesini seslendirecek olsaydı, ilgili veri giriş alanı (form ögesi) için “jf7a719750” gibi bir seslendirme yapacaktı ve kullanıcı doğal olarak bu ifadeyi anlamayacaktı. Fakat “Yorum detay alanı” gibi bir ifadenin yazılması durumunda, kullanıcı bu alanda yazı yazma komutlarını çalıştıracak ve yorum yapabilecekti.
Form ilişkilendirmeleri daha anlaşılabilir olmalıdır. <input> etiketi ile oluşturduğunuz tüm form elemanlarını ilgili forma bağlarken kullandığınız “id” anlaşılır olmalıdır.
Örnek:
Veri girişi yaptığınız form elemanını <label> içerisinde kullanıyorsanız label ile input nesnesini ilişkilendirebilirsiniz:
<label for="adsoyad">Ad Soyad:</label> <input type="text" id="adsoyad">
Eğer <label> ile <input> iç içe kullanılacaksa ilişkilendirme şu şekilde yapılabilir:
<label>Ad Soyad: <input type="text"></label>
Arama gibi bir özellik eklemek isterseniz, bunu ifade etmek için input içerisine “aria-label” ekleyebilirsiniz:
<input type="text" aria-label="Arama">
Eğer CSS ile çakışacak bir kullanıma sahipseniz ve bunu düzeltmek istiyorsanız “aria-labelledby” ile çözüm üretebilirsiniz:
<div id="adsoyad">Ad Soyad:</div> <input type="text" aria-labelledby="adsoyad">
Arama formları için mutlaka placeholder kullanın:
<input type="text" placeholder="Arama...">
Bu tür kullanımlardan sonra “Form öğelerinin ilişkili etiketleri yok” hatasını gidermiş olacaksınız.