Erişilebilir form etiketleri uygulayarak dünya çapındaki kullanıcılar için kapsayıcı web deneyimleri sağlayın. WCAG uyumluluğu ve gelişmiş kullanılabilirlik için en iyi uygulamaları öğrenin.
Form Etiketleri: Temel Giriş Alanı Erişilebilirlik Gereksinimleri
Formlar, web'in temel bir parçasıdır. Basit iletişim formlarından karmaşık e-ticaret ödeme işlemlerine kadar, kullanıcıların web siteleri ve uygulamalarla etkileşim kurmasını sağlarlar. Ancak, kötü tasarlanmış formlar engelli kullanıcılar için önemli engeller yaratabilir. Erişilebilir formlar oluşturmanın en önemli unsurlarından biri form etiketlerinin doğru kullanılmasıdır. Bu kılavuz, form etiketi erişilebilirlik gereksinimlerine kapsamlı bir genel bakış sunarak formlarınızın, yetenekleri ne olursa olsun herkes tarafından kullanılabilir olmasını sağlar.
Erişilebilir Form Etiketleri Neden Önemlidir?
Erişilebilir form etiketleri birkaç nedenden dolayı hayati önem taşır:
- Kullanılabilirlik: Açık ve net etiketler, tüm kullanıcıların her bir giriş alanının amacını anlamasına yardımcı olarak genel kullanılabilirliği artırır.
- Erişilebilirlik: Etiketler, engelli kullanıcılar, özellikle de ekran okuyucular gibi yardımcı teknolojilere güvenenler için temel bilgiler sağlar. Doğru etiketler olmadan bu kullanıcılar formları dolduramayabilir.
- WCAG Uyumluluğu: Web İçeriği Erişilebilirlik Yönergeleri (WCAG), tüm form kontrollerinin ilişkili etiketlere sahip olmasını gerektirir. Bu yönergelere uymak, web sitenizin erişilebilir olmasını ve birçok yargı alanında yasalara uygun olmasını sağlar.
- SEO: Doğrudan bir sıralama faktörü olmasa da, erişilebilir web siteleri daha iyi bir kullanıcı deneyimine sahip olma eğilimindedir, bu da dolaylı olarak SEO performansını artırabilir.
Form Etiketleri için WCAG Gereksinimlerini Anlamak
WCAG, form erişilebilirliğini sağlamak için özel yönergeler sunar. Form etiketleriyle ilgili temel gereksinimler şunlardır:
WCAG 2.1 Başarı Ölçütü 1.1.1 Metin Dışı İçerik (Seviye A)
Doğrudan etiketlerle ilgili olmasa da, bu ölçüt CAPTCHA'lar ve formlarda kullanılan görseller de dahil olmak üzere tüm metin dışı içerikler için metin alternatifleri sağlamanın önemini vurgular. Düzgün etiketlenmiş bir form, bu alternatiflere bağlam sağlamak için çok önemlidir.
WCAG 2.1 Başarı Ölçütü 1.3.1 Bilgi ve İlişkiler (Seviye A)
Sunum aracılığıyla aktarılan bilgi, yapı ve ilişkiler programlı olarak belirlenebilmeli veya metin olarak mevcut olmalıdır. Bu, bir etiket ile karşılık gelen giriş alanı arasındaki ilişkinin HTML kodunda açıkça tanımlanması gerektiği anlamına gelir.
WCAG 2.1 Başarı Ölçütü 2.4.6 Başlıklar ve Etiketler (Seviye AA)
Başlıklar ve etiketler konuyu veya amacı tanımlar. Form etiketleri, giriş alanları için açıklayıcı bir bağlam sağlayarak kullanıcıların formun yapısını anlamasını ve doğru bir şekilde doldurmasını kolaylaştırır.
WCAG 2.1 Başarı Ölçütü 3.3.2 Etiketler veya Talimatlar (Seviye A)
İçeriğin kullanıcı girişi gerektirdiği durumlarda etiketler veya talimatlar sağlanır.
WCAG 2.1 Başarı Ölçütü 4.1.2 Ad, Rol, Değer (Seviye A)
Tüm kullanıcı arayüzü bileşenleri (form elemanları, bağlantılar ve betikler tarafından oluşturulan bileşenler dahil ancak bunlarla sınırlı olmamak üzere) için ad ve rol programlı olarak belirlenebilir; kullanıcı tarafından ayarlanabilen durumlar, özellikler ve değerler programlı olarak ayarlanabilir; ve bu öğelerdeki değişikliklerin bildirimi, yardımcı teknolojiler de dahil olmak üzere kullanıcı aracılarına sunulur.
Erişilebilir Form Etiketlerini Uygulamak İçin En İyi Pratikler
Erişilebilir form etiketleri oluşturmak için birkaç en iyi pratik şunlardır:
1. <label> Elementini Kullanın
<label> elementi, bir metin etiketini bir giriş alanıyla ilişkilendirmenin birincil yoludur. Etiket ve kontrol arasında anlamsal ve yapısal bir bağlantı sağlar. <label> elementinin for özelliği, ilgili giriş alanının id özelliğiyle eşleşmelidir.
Örnek:
<label for="name">Ad:</label>
<input type="text" id="name" name="name">
Yanlış Örnek (Kaçının):
<span>Ad:</span>
<input type="text" id="name" name="name">
label yerine bir span elementi kullanmak, gerekli programatik ilişkiyi oluşturmaz ve ekran okuyucular için erişilemez hale getirir.
2. Etiketleri Giriş Alanlarıyla Açıkça İlişkilendirin
Yukarıdaki örnekte gösterildiği gibi for ve id özelliklerini kullanarak etiket ile giriş alanı arasında açık ve net bir ilişki sağlayın.
3. Etiketleri Doğru Konumlandırın
Etiketlerin yerleşimi kullanılabilirliği etkileyebilir. Genellikle etiketler şu şekilde yerleştirilmelidir:
- Giriş alanının üstünde: Bu genellikle en erişilebilir ve kullanıcı dostu seçenektir, özellikle metin alanları ve metin kutuları için.
- Giriş alanının solunda: Yaygındır, ancak sayfayı taramakta zorluk çekebilecek görme engelli kullanıcılar için daha az etkili olabilir.
- Radyo düğmeleri ve onay kutuları için: Etiketler kontrolün sağına yerleştirilmelidir.
Etiketleri konumlandırırken kültürel normları göz önünde bulundurun. Bazı dillerde etiketler geleneksel olarak giriş alanından sonra yerleştirilir. Tasarımınızı bu tercihlere uyacak şekilde uyarlayın.
4. Açık ve Net Etiketler Sağlayın
Etiketler kısa, açıklayıcı ve anlaşılması kolay olmalıdır. Kullanıcıları karıştırabilecek jargon veya teknik terimlerden kaçının. Örneğin, "KullanıcıID" yerine "Kullanıcı Adı" veya "E-posta Adresi" kullanın. Yerelleştirmeyi düşünün. Etiketlerinizin anlamlarını koruyarak farklı dillere kolayca çevrilebildiğinden emin olun.
5. Gerektiğinde ARIA Niteliklerini Kullanın
ARIA (Erişilebilir Zengin İnternet Uygulamaları) nitelikleri, özellikle karmaşık senaryolarda form elemanlarının erişilebilirliğini artırabilir. Ancak, ARIA'yı akıllıca ve yalnızca yerel HTML elemanları ve nitelikleri yetersiz olduğunda kullanın.
- aria-label: Görünür bir etiketin mümkün veya pratik olmadığı durumlarda bir etiket sağlamak için bu niteliği kullanın.
- aria-labelledby: Etiket olarak hizmet etmesi için sayfadaki mevcut bir öğenin ID'sine başvurmak için bu niteliği kullanın.
- aria-describedby: Giriş alanı için ek bilgi veya talimatlar sağlamak için bu niteliği kullanın. Bu, bağlam sağlamak veya doğrulama kurallarını açıklamak için kullanışlıdır.
aria-label kullanan örnek:
<input type="search" aria-label="Web sitesinde ara">
aria-labelledby kullanan örnek:
<h2 id="newsletter-title">Bülten Aboneliği</h2>
<input type="email" aria-labelledby="newsletter-title" placeholder="E-posta adresinizi girin">
6. İlgili Form Elemanlarını <fieldset> ve <legend> ile Gruplayın
<fieldset> elementi ilgili form kontrollerini gruplar ve <legend> elementi fieldset için bir başlık sağlar. Bu, formun yapısını iyileştirir ve kullanıcıların farklı giriş alanları arasındaki ilişkileri anlamasını kolaylaştırır.
Örnek:
<fieldset>
<legend>İletişim Bilgileri</legend>
<label for="name">Ad:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">E-posta:</label>
<input type="email" id="email" name="email">
</fieldset>
7. Açık Hata Mesajları Sağlayın
Kullanıcılar bir formu doldururken hata yaptıklarında, neyin yanlış gittiğini ve hatanın nasıl düzeltileceğini açıklayan açık ve bilgilendirici hata mesajları sağlayın. Bu hata mesajlarını aria-describedby gibi ARIA niteliklerini kullanarak ilgili giriş alanlarıyla ilişkilendirin.
Örnek:
<label for="email">E-posta:</label>
<input type="email" id="email" name="email" aria-describedby="email-error">
<span id="email-error" class="error-message">Lütfen geçerli bir e-posta adresi girin.</span>
Hata mesajının görsel olarak belirgin (örneğin, renk veya simgeler kullanarak) ve yardımcı teknolojiler tarafından programatik olarak erişilebilir olduğundan emin olun.
8. Yeterli Renk Kontrastı Kullanın
WCAG gereksinimlerini karşılamak için etiket metni ile arka plan rengi arasında yeterli renk kontrastı olduğundan emin olun. Kontrast oranının minimum gereksinimleri (normal metin için 4.5:1 ve büyük metin için 3:1) karşıladığını doğrulamak için bir renk kontrastı analiz aracı kullanın. Bu, az gören kullanıcıların etiketleri daha kolay okumasına yardımcı olur.
9. Klavye Erişilebilirliğini Sağlayın
Tüm form elemanlarına yalnızca klavye kullanılarak erişilebilmelidir. Kullanıcılar Tab tuşunu kullanarak formda gezinebilmeli ve Boşluk veya Enter tuşunu kullanarak form kontrolleriyle etkileşime girebilmelidir. Düzgün klavye erişilebilirliğini sağlamak için formlarınızı klavyeyle baştan sona test edin.
10. Yardımcı Teknolojilerle Test Edin
Formlarınızın erişilebilir olduğundan emin olmanın en iyi yolu, onları ekran okuyucular (örneğin, NVDA, JAWS, VoiceOver) gibi yardımcı teknolojilerle test etmektir. Bu, görsel inceleme sırasında belirgin olmayan erişilebilirlik sorunlarını belirlemenize yardımcı olacaktır. Değerli geri bildirimler almak için test sürecinize engelli kullanıcıları dahil edin.
Erişilebilir Form Etiketi Uygulamaları Örnekleri
Örnek 1: Basit İletişim Formu (Uluslararası Bakış Açısı)
Küresel bir kitle için bir iletişim formu düşünün. Etiketler açık, net ve kolayca çevrilebilir olmalıdır.
<form>
<label for="name">Tam Ad:</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">E-posta Adresi:</label>
<input type="email" id="email" name="email"><br><br>
<label for="country">Ülke:</label>
<select id="country" name="country">
<option value="">Ülke Seçin</option>
<option value="us">Amerika Birleşik Devletleri</option>
<option value="ca">Kanada</option>
<option value="uk">Birleşik Krallık</option>
<option value="de">Almanya</option>
<option value="fr">Fransa</option>
<option value="jp">Japonya</option>
<option value="au">Avustralya</option>
<!-- Daha fazla ülke ekleyin -->
</select><br><br>
<label for="message">Mesaj:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
<input type="submit" value="Gönder">
</form>
Soyadların adlardan önce geldiği kültürler için netlik sağlamak amacıyla sadece "Ad" yerine "Tam Ad" kullanıldığına dikkat edin.
Örnek 2: E-ticaret Ödeme Formu
E-ticaret ödeme formları genellikle hassas bilgiler gerektirir. Güven oluşturmak ve erişilebilirliği sağlamak için açık etiketler ve talimatlar çok önemlidir.
<form>
<fieldset>
<legend>Teslimat Adresi</legend>
<label for="shipping_name">Tam Ad:</label>
<input type="text" id="shipping_name" name="shipping_name"><br><br>
<label for="shipping_address">Adres:</label>
<input type="text" id="shipping_address" name="shipping_address"><br><br>
<label for="shipping_city">Şehir:</label>
<input type="text" id="shipping_city" name="shipping_city"><br><br>
<label for="shipping_zip">Posta/Zip Kodu:</label>
<input type="text" id="shipping_zip" name="shipping_zip"><br><br>
<label for="shipping_country">Ülke:</label>
<select id="shipping_country" name="shipping_country">
<option value="">Ülke Seçin</option>
<option value="us">Amerika Birleşik Devletleri</option>
<option value="ca">Kanada</option>
<!-- Daha fazla ülke ekleyin -->
</select>
</fieldset>
<fieldset>
<legend>Ödeme Bilgileri</legend>
<label for="card_number">Kredi Kartı Numarası:</label>
<input type="text" id="card_number" name="card_number"><br><br>
<label for="expiry_date">Son Kullanma Tarihi (AA/YY):</label>
<input type="text" id="expiry_date" name="expiry_date" placeholder="AA/YY"><br><br>
<label for="cvv">CVV:</label>
<input type="text" id="cvv" name="cvv"><br><br>
</fieldset>
<input type="submit" value="Siparişi Ver">
</form>
Fieldset ve legend kullanımı, formu mantıksal bölümlere ayırır. Yer tutucu metin ek rehberlik sağlar, ancak yer tutucu metnin etiketlerin yerine kullanılmaması gerektiğini unutmayın.
Örnek 3: ARIA Niteliklerine Sahip Kayıt Formu
Bir takma adın isteğe bağlı olduğu bir kayıt formu düşünün. ARIA niteliklerini kullanarak ek bağlam sağlayabiliriz.
<form>
<label for="username">Kullanıcı Adı:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Şifre:</label>
<input type="password" id="password" name="password" required><br><br>
<label for="nickname">Takma Ad (İsteğe Bağlı):</label>
<input type="text" id="nickname" name="nickname" aria-describedby="nickname-info">
<span id="nickname-info">Bu takma ad herkese açık olarak gösterilecektir.</span><br><br>
<input type="submit" value="Kaydol">
</form>
aria-describedby özelliği, takma ad giriş alanını, takma adın nasıl kullanılacağı hakkında ek bilgi sağlayan bir span elementine bağlar.
Form Erişilebilirliğini Test Etme Araçları
Formlarınızın erişilebilirliğini değerlendirmenize yardımcı olabilecek birkaç araç bulunmaktadır:
- Accessibility Insights: Web sayfalarındaki erişilebilirlik sorunlarını belirleyen bir tarayıcı uzantısı.
- WAVE (Web Accessibility Evaluation Tool): Web sayfalarını erişilebilirlik hataları açısından değerlendiren çevrimiçi bir araç.
- axe DevTools: Otomatik erişilebilirlik testi yapan bir tarayıcı uzantısı.
- Ekran Okuyucular (NVDA, JAWS, VoiceOver): Ekran okuyucularla test yapmak, otomatik testlerle belirgin olmayan erişilebilirlik sorunlarını tespit etmek için çok önemlidir.
Sonuç
Erişilebilir form etiketleri, kapsayıcı web deneyimleri oluşturmak için çok önemlidir. Bu kılavuzda belirtilen en iyi uygulamaları takip ederek, formlarınızın yetenekleri ne olursa olsun herkes tarafından kullanılabilir olmasını sağlayabilirsiniz. Erişilebilirliğe öncelik vermek sadece engelli kullanıcılara fayda sağlamakla kalmaz, aynı zamanda tüm kullanıcılar için web sitenizin genel kullanılabilirliğini de artırır. Değerli geri bildirimler almak ve web sitenizin erişilebilirliğini sürekli olarak iyileştirmek için formlarınızı düzenli olarak yardımcı teknolojilerle test etmeyi ve test sürecinize engelli kullanıcıları dahil etmeyi unutmayın.
Erişilebilirliği benimsemek sadece bir uyumluluk meselesi değildir; herkes için daha kapsayıcı ve adil bir web oluşturmakla ilgilidir. Erişilebilir form tasarımına yatırım yaparak, kapsayıcılığa olan bağlılığınızı gösterir ve tüm kullanıcılar için daha iyi bir kullanıcı deneyimi yaratırsınız.