M

MLOG

Türkçe

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:

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:

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 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:

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.