Ana içeriğe geç

1.3.6 Amacı Tanımlama

Kullanıcı arayüzü bileşenlerinin, simgelerin ve bölgelerin amacı programatik olarak belirlenebilir olmalıdır.

SC Kodu: 1.3.6 Seviye: AAA
URL: https://www.w3.org/TR/WCAG22/#identify-purpose

Genel Tanım​

WCAG 1.3.6, kullanıcı arayüzü bileşenlerinin, amacının programatik olarak belirlenebilir olmasını gerektirir. Bu sayede yardımcı teknolojiler, form alanlarının ve bileşenlerin hangi amaçla kullanıldığını doğru şekilde algılayabilir.

Faydalar​

  • Bilişsel Engelli Kullanıcılar: Form alanlarını daha kolay tanır ve doldurur.
  • Ekran Okuyucu Kullanıcıları: Alanların amacını doğru ve tutarlı şekilde öğrenir.
  • Otomatik Doldurma: Tarayıcıların ve yardımcı araçların doğru veriyle alanları doldurmasını sağlar.

Kapsam

  • Form alanları (ad, soyad, e-posta, adres vb.)
  • Giriş (login) ve kayıt formları
  • Ödeme ve başvuru formları

Not: Bu kriter, özellikle kişisel bilgi toplayan alanlar için önemlidir.

Ana Amaç​

Bu kriterin amacı, özellikle bilişsel engelleri olan kullanıcılar ve yardımcı teknolojiler kullanan kişiler için, form alanlarının ve arayüz bileşenlerinin ne işe yaradığının açık ve net biçimde anlaşılmasını sağlamaktır.

En İyi Uygulamalar​

  • HTML autocomplete özniteliğini uygun şekilde kullanın.
  • Standartlaştırılmış amaç tanımlarına bağlı kalın.
  • Görsel etiketlerle programatik tanımların tutarlı olmasını sağlayın.
  • laceholder metnini tek başına etiket yerine kullanmayın.

Örnekler ve Açıklamalar​

Örnek: Kayıt Formu​

Bir kullanıcı kayıt formunda, ad, soyad ve e-posta alanları autocomplete özniteliği ile tanımlanır. Ekran okuyucu kullanan bir kullanıcı, alanların amacını net biçimde algılar.

Nelerden Kaçınılmalı?

Form alanlarının amacını yalnızca görsel metinle belirtmek ve programatik tanım yapmamak.

HTML/CSS

<input type="text" placeholder="E-posta">

Açıklama: Bu örnekte alanın amacı yalnızca görsel olarak belirtilmiştir. Yardımcı teknolojiler için yeterli değildir ve WCAG 1.3.6 kriterini karşılamaz.

Ne Yapılmalı?

Form alanlarının amacı programatik olarak tanımlanmalıdır.

HTML/CSS

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

Açıklama: Bu örnekte alanın amacı hem görsel hem de programatik olarak tanımlanmıştır. Yardımcı teknolojiler ve otomatik doldurma araçları alanı doğru şekilde yorumlayabilir.