Ana içeriğe geç

3.3.2 Etiketler veya Talimatlar

Kullanıcıların form alanlarını doğru şekilde doldurabilmesi için açık etiketler veya talimatlar sağlanmalıdır.

SC Kodu: 3.3.2 Seviye: A
URL: https://www.w3.org/TR/WCAG22/#labels-or-instructions

Genel Tanım​

Başarı Kriteri 3.3.2, kullanıcı girdisi sunulduğunda etiketlerin veya talimatların sağlanmasını gerektirir. Bu, kullanıcıların her form alanının amacını ve nasıl doğru şekilde doldurulacağını anlamalarını sağlar. Başarı kriteri, veri girişiyle ilgili olmayan bağlantılar veya kontroller için geçerli değildir. Etiketler ve talimatlar, özellikle bilişsel engelliler olmak üzere tüm kullanıcıların web formlarında etkili bir şekilde gezinmesi ve etkileşimde bulunması için çok önemlidir.

Faydalar​

  • Bilişsel, Öğrenme ve Dil Engelli Kullanıcılar: Bu özellik, form kontrolleri için net tanımlama ve talimatlar sağlayarak kullanıcıların hangi girdinin beklendiğini anlamalarını sağlar.
  • Tüm Kullanıcılara Yardımcı Olmak: Etiketler, kullanıcıların veri girişlerini boş bırakmasını veya yanlış doldurmasını önleyerek, başarısız gönderimleri ve kullanıcılar için hayal kırıklığını engeller.

Ana Amaç​

Tüm form alanları ve kullanıcı kontrolleri için netlik ve kullanım kolaylığı sağlamak amacıyla, amaçlarını ve doğru doldurulmalarını açıklayan net etiketler veya talimatlar verin. Talimatlar, veri girişlerini ve girdilerini, ayrıca tarih seçiciler (örneğin, YYYY/MM/DD formatı) gibi özel gereksinimleri olanları netleştirmelidir. Talimatlar teşvik edilse de, belgeyi aşırı etiketlerle karmaşıklaştırmaktan kaçının. Kısa etiketler kullanın ve ek açıklamalar için başlık öznitelikleri veya "aria-describedby" gibi alternatif yöntemler ekleyin.

Bu kriter, doğru işaretleme veya programlama gereksinimlerini belirtmez; bunun için Başarı Kriteri 1.3.1'e (Bilgi ve İlişkiler) bakın. Ayrıca, Başarı Kriteri 2.4.6'da (Başlıklar ve Etiketler) ele alınan etiket netliğini de ele almaz. Ek olarak, alternatif etiket yöntemleri veya erişilebilir adlar burada değil, Başarı Kriteri 4.1.2: Ad, Rol ve Değer'de tartışılmaktadır.

Bu kriter, formlardaki tüm veri girişlerinin ve girdilerin, kontrolleri açıkça tanımlayan talimatlar veya etiketler içermesini zorunlu kılar ve kullanıcıların kendilerinden ne beklendiğini anlamalarını sağlar.

En İyi Uygulamalar​

  • Görünür Etiketler: Her form alanı ve denetimi için mutlaka görünür etiketler sağlayın ve bunların doğru konumlandırıldığından emin olun (örneğin, metin girişlerinden önce ve radyo düğmelerinden veya onay kutularından sonra).
  • Özel Talimatlar: Belirli gereksinimler için talimatlar verin; örneğin, belirli karakter gereksinimlerine sahip parola kriterleri veya yıl/ay/gün formatına uyması gereken tarih biçimleri gibi.
  • Grup Düzeyi Etiketleri: Birden fazla giriş gerektiren alanlar için, her giriş alanına özel bir etiket verin. Örneğin, bir telefon numarası alan kodu ve numara gibi iki giriş alanına bölünmüşse, her giriş alanı için bir etiket verin. Kullanıcıların yalnızca bağlamdan yola çıkarak anlayacaklarını varsaymaktan kaçının.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

Formdaki telefon numarası girişleri

Nelerden Kaçınılmalı?

Telefon numarası girilmesi için veri giriş alanları içeren bir form sağlanmıştır. Giriş alanları <legend> etiketiyle çevrelenmiştir, ancak her bir giriş alanı ayrı ayrı etiket içermemektedir.

HTML/CSS

<style>​​
  /* Gösterim amaçlı satır içi stil */

  input[type="text"] {
    display : inline-block ;
    width : 150px ; /* Genişliği gerektiği gibi ayarlayın */
    margin-right : 10px ; /* Giriş alanları arasına boşluk ekleyin */ 
  }
  #alan_kodu {
    width : 50px ; /* Alan kodu giriş alanını küçült */ 
  }
</style>​​
<form action = "/submit-form" method = "post" >
  <fieldset>
    <legend> Telefon Numarası </legend>​
    <input type = "text" name = "area_code" id = "area_code" >
    <input type = "text" name = "phone_number" id = "phone_number" >
  </fieldset>​​
  <input type = "submit" value = "Gönder" >
</form>​​

Açıklama: Açık etiketler olmadan, kullanıcılar her bir giriş alanının gereksinimlerini anlayamayabilir. Bu belirsizlik, form gönderim hatalarına veya yanlış veri girişlerine yol açabilir.

Ne Yapılmalı?

Telefon numarası girilmesi için veri giriş alanları içeren bir form sağlanmıştır. Giriş alanları <fieldset> etiketiyle çevrelenmiş olup, her giriş alanının üzerinde <label> etiketi bulunmaktadır.

HTML/CSS

<style>​​
/* Gösterim amaçlı satır içi stil */
form {
  display : flex ;
  flex-direction : column ;
  align-items : flex-start ;
}

fieldset {
  border : none ; /* Fieldset'ten kenarlığı kaldır */
  padding : 0 ; /* Varsayılan dolguyu kaldır */
  margin : 0 ; /* Varsayılan kenar boşluğunu kaldır */
}

label {
  margin-bottom : 5px ; /* Etiketler arasına boşluk ekle */ 
}

input[type="text"] {
  width : 150px ; /* Genişliği gerektiği gibi ayarlayın */
  padding : 8px ;
  margin-bottom : 10px ; /* Giriş alanları arasına boşluk ekleyin */
}

legend {
  width:50px ; /* Alan kodu giriş alanını küçült */
  margin-right: 10px ; /* Alan kodu ile telefon numarası arasına boşluk ekle */
}

input[type="submit"] {
  margin-top : 10px ; /* Gönder düğmesinin üstüne kenar boşluğu ekle */
}

div {
  display : inline-flex ;
  flex-direction : column ;
  margin-top : 2rem ;
}

</style>​​

<form action = "/submit-form" method = "post" >
  <fieldset>
    <legend> Telefon Numarası </legend>​
    <div >
      <label for = " area_code" >Alan Kodu </label>
      <input type = "text" name = "area_code" id = "area_code" >
    </div>
    <div >
      <label for = " phone_number" >Numara </label>
      <input type = "text" name = "phone_number" id = "phone_number" >
    </div>
  </fieldset>​​
  <input type = "submit" value = "Gönder" >
</form>​​

Açıklama: Doğru uygulamada, her giriş alanına bir <legend> ve iki <label> öğesi eşlik eder. Etiketlerden biri 'Alan Kodu'nu, diğeri ise 'Numara'yı belirtir. Bu kurulum, kullanıcıların her alanın amacını anlamalarına yardımcı olarak görevi beklendiği gibi tamamlamalarını sağlar. Etiketler, tasarım tutarlılığı için CSS kullanılarak giriş alanlarının üstüne yerleştirilir.