Bu kural ne anlama geliyor

Başarı Ölçütü 1.3.5, kullanıcı hakkında kişisel bilgi toplayan giriş alanlarının amaçlarının HTML autocomplete niteliği kullanılarak programatik olarak tanımlanmasını gerektirir. WCAG 2.1, HTML spesifikasyonunun otomatik doldurma alan adlarından türetilmiş 53 giriş amacından oluşan belirli bir liste tanımlar (name, email, tel, street-address vb.). Bir form alanı bu veri türlerinden birini topladığında, uygun değerle birlikte autocomplete niteliği bulunmalıdır.

Bu ölçüt yalnızca kullanıcının kendisi hakkında bilgi toplayan girdiler için geçerlidir — başka kişiler veya kuruluşlar hakkında değil. Başka birinin adresini toplayan "farklı bir adrese gönder" formu muaftır, ancak kullanıcının kendi fatura adresi alanları autocomplete değerlerini içermelidir.

Neden önemlidir

autocomplete niteliği birden fazla erişilebilirlik amacına hizmet eder. Bilişsel engelli veya hafıza bozukluğu olan kullanıcılar, kişisel bilgileri hatırlama ve yazma bilişsel yükünü azaltan tarayıcı otomatik doldurmasından büyük fayda sağlar. Yazma güçlüğü çeken motor engelli kullanıcılar formların otomatik olarak doldurulmasını sağlayabilir. Sıklıkla yanlış yazan disleksili kullanıcılar önceden doldurulmuş değerlerden faydalanır.

Otomatik doldurmanın ötesinde, autocomplete niteliği yardımcı teknolojilerin alanların yanında tanıdık simgeler veya resimler göstermesine olanak tanır. Bilişsel engelli bir kullanıcı, autocomplete="tel" olarak tanımlanan bir alanın yanındaki telefon simgesini etiketi okumaktan daha kolay tanıyabilir. Tarayıcı eklentileri de bilinen giriş amaçlarına göre deneyimi geliştirebilir.

İlgili axe-core kuralları

autocomplete-valid — autocomplete nitelik değerlerinin geçerli olduğunu ve izin verilen WHATWG belirteçleriyle eşleştiğini doğrular. Bu kural, autocomplete değerinin tanınan listeden olduğunu ve giriş türü için uygun olduğunu kontrol eder.

Nasıl test edilir

Kullanıcı hakkında kişisel bilgi toplayan tüm form alanlarını (ad, e-posta, telefon, adres, ödeme bilgileri, doğum tarihi vb.) belirleyin.
Her alanın WHATWG otomatik doldurma spesifikasyonundaki doğru belirteçle bir autocomplete niteliğine sahip olduğunu doğrulayın.
Geçersiz veya eksik autocomplete değerlerini yakalamak için axe DevTools çalıştırın.
Tarayıcınızın kayıtlı bilgilerini kullanarak formu doldurarak otomatik doldurmanın doğru çalıştığını test edin.
autocomplete değerinin toplanan gerçek veriyle eşleştiğini doğrulayın (örneğin telefon numarası alanında autocomplete="email" kullanmayın).

Nasıl düzeltilir

Kullanıcı bilgisi toplayan her girdiye doğru autocomplete niteliğini ekleyin:

<form>
  <label for="name">Ad soyad</label>
  <input type="text" id="name" name="name"
         autocomplete="name">

  <label for="email">E-posta</label>
  <input type="email" id="email" name="email"
         autocomplete="email">

  <label for="tel">Telefon numarası</label>
  <input type="tel" id="tel" name="tel"
         autocomplete="tel">

  <label for="street">Sokak adresi</label>
  <input type="text" id="street" name="street"
         autocomplete="street-address">

  <label for="postal">Posta kodu</label>
  <input type="text" id="postal" name="postal"
         autocomplete="postal-code">
</form>

Ödeme formları için özel ödeme autocomplete belirteçlerini kullanın:

<label for="cc-name">Kart üzerindeki ad</label>
<input type="text" id="cc-name" name="cc-name"
       autocomplete="cc-name">

<label for="cc-number">Kart numarası</label>
<input type="text" id="cc-number" name="cc-number"
       autocomplete="cc-number">

<label for="cc-exp">Son kullanma tarihi</label>
<input type="text" id="cc-exp" name="cc-exp"
       autocomplete="cc-exp">

<label for="cc-csc">Güvenlik kodu</label>
<input type="text" id="cc-csc" name="cc-csc"
       autocomplete="cc-csc">

Bileşik autocomplete değerleri bölüm ve faturalama/kargo bağlamını belirtebilir:

<input type="text" name="billing-street"
       autocomplete="billing street-address">
<input type="text" name="shipping-street"
       autocomplete="shipping street-address">

Sık yapılan hatalar

Kişisel bilgi alanlarından autocomplete niteliğini tamamen çıkarmak.
Otomatik doldurmayı engellemek için autocomplete="off" kullanmak — bu erişilebilirliğe zarar verir ve tarayıcılar genellikle yine de görmezden gelir.
Yanlış autocomplete belirteçleri kullanmak (örneğin autocomplete="tel" yerine autocomplete="phone").
Kullanıcı bilgisi toplamayan alanlara (arama alanları, ürün filtreleri) gerekli olmadığı halde autocomplete uygulamak.
Bileşik alanları kaçırmak — form ayrı ad ve soyad alanlarına sahipken autocomplete="name" kullanmak.

1.3.5 Giriş Amacını Tanımlama