Form Alanlarında Label Kullanımı ve Erişilebilirlik
Form Alanlarında Label Kullanımı ve Erişilebilirlik konusunda temel mantığı, gerçek uygulama adımlarını, hata senaryolarını ve doğrulama yöntemlerini açıklayan uygulamalı rehber. Web erişilebilirliği, farklı görme, işitme, motor veya bilişsel ihtiyaçları olan kullanıcıların içeriği algılayabilmesi ve arayüzü…
Konu, Amaç ve Beklenen Sonuç
Web erişilebilirliği, farklı görme, işitme, motor veya bilişsel ihtiyaçları olan kullanıcıların içeriği algılayabilmesi ve arayüzü kullanabilmesi için tasarım/kod kararlarının en baştan kapsayıcı kurulmasıdır. WCAG test edilebilir başarı ölçütleri sunar; otomatik testler yardımcıdır fakat yalnız otomasyonla tam erişilebilirlik doğrulanamaz.
Adım Adım Uygulama
1. Adım
1. Semantik native HTML öğelerini tercih et; custom component gerekiyorsa yerleşik klavye/rol/durum davranışını bilinçli uygula.
2. Adım
2. Tüm etkileşimli öğelere klavye ile erişilebildiğini ve görünür focus göstergesi olduğunu kontrol et.
3. Adım
3. Form control’lerini programatik label ile ilişkilendir; hata metnini yalnız renk ile anlatma.
4. Adım
4. Metin ve arka plan kontrastını WCAG ölçütlerine göre test et; büyük/küçük metin ayrımını doğru kullan.
5. Adım
5. Görsel alt metnini dosyanın ne olduğuna değil sayfadaki anlamına göre yaz; dekoratif görselleri ekran okuyucudan gereksiz bilgi üretmeyecek şekilde ele al.
6. Adım
6. Zoom, text resize ve responsive durumda içeriğin kırpılmadan ve fonksiyon kaybetmeden çalıştığını doğrula.
7. Adım
7. Otomatik tarama + klavye testi + en az bir ekran okuyucu örneklemesi yap.
Uygulamalı Örnek
Örneğin e-posta alanında görünür “E-posta” label’ı input id ile bağlanır. Hata oluştuğunda metin açıklaması gösterilir ve input ile aria-describedby üzerinden ilişkilendirilebilir. Kırmızı kenarlık tek hata sinyali olarak bırakılmaz. Bu örneği kendi projenize uyarlarken değerleri ezberlemek yerine “Form Alanlarında Label Kullanımı ve Erişilebilirlik” konusundaki aynı neden-sonuç ilişkisini koruyun.
Yaygın Hatalar ve Nedenleri
1. Placeholder’ı label yerine koymak.
2. Outline: none ile focus’u tamamen silmek.
3. Kontrastı yalnız gözle değerlendirmek.
4. Her görsele aynı SEO anahtar kelimeli alt metni yazmak.
5. ARIA ile native HTML’in yerine gereksiz custom rol üretmek.
Son Kontrol ve Doğrulama
1. Sadece klavye. Sonuç “Form Alanlarında Label Kullanımı ve Erişilebilirlik” için somut kabul ölçütü olarak kullanılmalıdır.
2. %200 zoom.
3. Kontrast ölçümü.
4. Ekran okuyucu landmark/headings.
5. Form hata durumu.
6. Mobil dokunma hedefi.
Kısa Sonuç
Form Alanlarında Label Kullanımı ve Erişilebilirlik için kaliteli sonuç, aracı veya ayarı bir kez kullanmaktan değil; doğru sorumluluğu seçip uygulamayı gerçek koşulda doğrulamaktan gelir.
Kaynaklar
Bu makaledeki teknik kavramları doğrulamak ve sürüme bağlı ayrıntıları kontrol etmek için aşağıdaki birincil/resmî kaynaklar kullanılmıştır. Yazılım arayüzleri ve platform gereksinimleri zamanla değişebileceği için özellikle yayın/build/SEO gibi güncel konularda son sürüm dokümantasyonunu kontrol edin.
1. MDN: HTML: https://developer.mozilla.org/en-US/docs/Web/HTML
2. MDN: HTML elements reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements
3. MDN: HTML semantics: https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html
4. W3C WAI: Page Structure: https://www.w3.org/WAI/tutorials/page-structure/
5. WCAG 2.2: https://www.w3.org/TR/WCAG22/
6. MDN: Accessibility: https://developer.mozilla.org/en-US/docs/Web/Accessibility
