Ana içeriğe geç

1.3.5 Girdi Amacını Tanımlama

Kullanıcıdan bilgi toplayan giriş alanlarının amacı, programatik olarak tanımlanabilir olmalıdır.

SC Kodu: 1.3.5 Seviye: AA
URL: https://www.w3.org/TR/WCAG22/#identify-input-purpose

Genel Tanım​

WCAG SC 1.3.5 Giriş Amacının Belirlenmesi, kullanıcı hakkında bilgi toplayan her giriş alanının amacının programatik olarak belirlenebilmesini gerektirir. Bu, bilişsel ve motor engelli kullanıcıların otomatik tamamlama özelliklerini ve kişiselleştirilmiş değerleri kullanarak formları kolayca doldurabilmelerini sağlar.

Eğer bir form yalnızca 'yer tutucu' özelliğine dayanıyorsa ve alan doldurulur doldurulmaz kayboluyorsa, kısa süreli hafıza sorunları yaşayan kullanıcılar alanın amacını unutabilir. Otomatik tamamlama özelliği eklemek, kullanıcıların tarayıcılarında depolanan bilgileri kullanarak formu otomatik olarak doldurmalarına yardımcı olabilir.

Faydalar​

  • Bilişsel Engelliler İçin Kullanım Kolaylığı: Kişisel veri alanlarını otomatik olarak doldurarak form doldurma sürecini basitleştirir ve bilişsel yükü azaltır.
  • Motor Engellilere Destek: Veri girişi için gereken fiziksel çabayı en aza indirerek, formları motor engeli olan kullanıcılar için daha erişilebilir hale getirir.

Ana Amaç​

Kullanıcı bilgilerini toplayan giriş alanlarının programatik olarak belirlenebilir bir amaca sahip olmasını sağlamak ve böylece bilişsel ve motor engelli kullanıcılar için erişilebilirliği artırmak.

En İyi Uygulamalar​

  • Uygun otomatik tamamlama belirteç değerlerini kullanın: HTML otomatik tamamlama özniteliğiyle uygun belirteç değerlerini kullanın.
  • Kullanıcı verisi toplamayan alanlarda otomatik tamamlama özelliğini kullanmaktan kaçının: Arama çubukları veya yalnızca gezinme amacıyla kullanılan alanlar gibi kullanıcı verisi toplamayan alanlarda otomatik tamamlama özelliğini kullanmaktan kaçının.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

Bir iletişim formu, kullanıcının tarayıcısında saklanan değerleri kullanarak ad, sokak, posta kodu, şehir, telefon numarası ve e-posta adresi alanlarını otomatik olarak doldurur.

Nelerden Kaçınılmalı?

HTML/CSS

<form>​
  <label for = "fname" > Adı Soyadı: </label>
  <input type = "text" id = "fname" name = "fname" >
  
  <label for = "lname" > Soyadı: </label>
  <input type = "text" id = "lname" name = "lname" >
  
  <label for = "email" >E - posta: </label>
  <input type = "email" id = "email" name = "email" >
  
  <label for = "address" > Adres : </label>
  <input type = "text" id = "address" name = "address" >
  
  <label for = "city" > Şehir : </label>
  <input type = "text" id = "city" name = "city" >
  
  <label for = "postal" > Posta Kodu: </label>
  <input type = "text" id = "postal" name = "postal" >
  
  <label for = " phone" >Telefon Numarası: </label>
  <input type = "tel" id = "phone" name = "phone" >
</form>​​

Açıklama: Otomatik tamamlama özelliği olmadan, tarayıcı formu doldurmada yardımcı olamaz; bu da bilişsel veya motor engeli olan kullanıcıların formu tamamlamasını zorlaştırır.

Ne Yapılmalı?

HTML/CSS

<form>​
  <label for = "fname" > Adı Soyadı: </label>
  <input type = "text" id = "fname" name = "fname" autocomplete = "given-name" >
  
  <label for = "lname" > Soyadı: </label>
  <input type = "text" id = "lname" name = "lname" autocomplete = "family-name" >
  
  <label for = "email" >E - posta: </label>
  <input type = "email" id = "email" name = "email" autocomplete = "email" >
  
  <label for = "address" > Adres : </label>
  <input type = "text" id = "address" name = "address" autocomplete = "street-address" >

  <label for = "city" > Şehir : </label>
  <input type = "text" id = "city" name = "city" autocomplete = "address-level2" >
  
  <label for = "postal" > Posta Kodu: </label>
  <input type = "text" id = "postal" name = "postal" autocomplete = "postal-code" >
  
  <label for = " phone" >Telefon Numarası: </label>
  <input type = "tel" id = "phone" name = "phone" autocomplete = "tel" >
</form>​​

Açıklama: Otomatik tamamlama özelliği, tarayıcıların kişisel verileri saklamasına ve otomatik olarak doldurmasına yardımcı olarak, bilişsel ve motor engelli kullanıcıların formu doldurmasını kolaylaştırır.