WCAG 3.3.2 · A Seviyesi · EN 301 549 9.3.3.2

Etiketler veya Yönergeler

İçerik girdi istediğinde biçim, zorunlu alan ve gruplanmış kontroller dahil etiket ya da yönerge sağlanmasını ister.

Kısaca

Etiketsiz bir kutu, ne yazılacağına dair hiçbir ipucu vermez. Hangi biçimi beklediğini söylemeyen bir tarih alanı ya da işaretlenmemiş bir zorunlu alan, net yönergelerle önlenebilecek hatalara yol açar.

Bu kriter, içerik kullanıcıdan girdi gerektirdiğinde etiketler ya da yönergeler sağlanmasını ister.

Neleri kapsar?

  • "Gerektirir" kabul eder demektir: Kriter yalnızca zorunlu alanları değil, girdi kabul eden her alanı kapsar.
  • Etiketler: Her kontrol, ne girileceğini söyleyen bir etikete sahiptir. Bir radyo düğmesi ya da onay kutusu grubundaki her seçenek, neyi seçtiğini söyleyen bir etiket taşır.
  • Yönergeler: Hangi biçimin ya da kuralın geçerli olduğunu söyleyin; örneğin tarih kalıbı, karakter sınırları ya da parola kuralı. Uzun yönergeleri gerekiyorsa yalnızca odakta gösterin.
  • Zorunlu alanlar: Bunları belirtin; örneğin "zorunlu" içeren bir etiketle (H90). Kriterin kendisi tüm alanlara uygulanır.
  • Gruplar: İlişkili alanlar ortak bir etikete ihtiyaç duyar. Üç alana bölünmüş bir telefon numarası fieldset ve legend ile gruplanabilir ve her alanın ayrıca kendi etiketi olur (H71, F82).
  • Görsel etiketler: Hedef kitle tarafından yaygın biçimde anlaşılıyorlarsa izin verilir. Araç ipuçları ya da ek metin yardımcı olabilir.
  • Kapsam dışı: Veri girişine bağlı olmayan bağlantılar ve bileşenler; aç ve kapat kontrolleri gibi.
  • Başka kriterler: Etiketi kodda ilişkilendirmek 1.3.1'dir. Erişilebilir adlar 4.1.2'dir. Etiketlerin açıklayıcı olup olmadığı 2.4.6'dır.

Kimleri etkiler?

En çok net etiket ve örneklerden yararlanan bilişsel, dil ve öğrenme engelli kişiler. Alana vardıklarında etiketi duyan ekran okuyucu kullanıcıları. Etiketi ve yönergeyi görmesi gereken az görenler. Tanıdık olmayan bir biçimde form dolduran herkes.

EAA ve EN 301 549'da

Avrupa Erişilebilirlik Yasası (Direktif (AB) 2019/882) 28 Haziran 2025'ten sonra piyasaya sunulan kapsamdaki ürün ve hizmetler için geçerlidir. Yasanın 47. gerekçesi web siteleri ve mobil uygulamalar için dört ilkeyi sayar: algılanabilirlik, işletilebilirlik, anlaşılabilirlik ve sağlamlık. Etiketler ve yönergeler, "anlaşılabilirlik" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 3.3.2'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.

WCAG 3.3.2'in EN 301 549'daki karşılıkları
MaddeOrtamNe ister?
9.3.3.2Web sayfalarıWeb içeriğinin WCAG 3.3.2 kriterini karşılamasını ister.
10.3.3.2Web dışı dokümanlar (PDF, Office dosyaları)Standardın kriteri dokümanlara uyguladığı yerlerde, dokümanlar form kontrolleri için etiket ya da yönerge sağlamalıdır.
11.3.3.2Web dışı yazılım (yerel mobil uygulamalar)Yazılım, kullanıcıdan girdi gerektirdiğinde etiket ya da yönerge sağlamalıdır.

Kriterin web dışı dokümanlara uygulanıp uygulanmadığı ve nasıl uygulandığı standardın 10. maddesinde belirtilir. Madde numaraları EN 301 549'un "9. + WCAG numarası" düzenine göredir. V3.2.1'de yazılım maddesi, açık ve kapalı işlevsellik için ayrı alt maddelere bölünmüştür. Kaynak gösterirken tam numaraları standarttan kontrol edin.

Standart sürümü: EN 301 549 V4.1.1 (Eylül 2026), WCAG 2.2'yi esas alan ve EAA için hazırlanan ilk sürümdür. Henüz AB Resmî Gazetesi'nde atıf almamıştır; bu nedenle EAA gereksinimlerini karşılamanın gönüllü teknik yolu olarak görülmelidir. Atıf yapıldığında EAA ile ilgili uygunluk karinesi sağlayacaktır. 3.3.2 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır.

EAA bağlamında dikkat: Yasanın Madde 2/4 hükmü bazı içerikleri gereksinimlerin dışında bırakır; örneğin 28 Haziran 2025'ten önce yayımlanmış ofis dosya biçimleri ve bu tarihten sonra güncellenmeyen arşivler. Bu tarihten sonra yayımladığınız ya da değiştirdiğiniz içerik bu istisnaların kapsamında değildir.

Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır

Web için kod örnekleri

1. Etiketsiz alan

Bir kontrolün etiketi olmalıdır. Bağlamak için label kullanın (H44).

Hatalı
<input type="text" name="city">
Doğru
<label for="city">Şehir</label>
<input id="city" name="city">

2. Beklenen biçimi belirtin (G89)

Kullanıcı yazmadan önce biçimi söyleyin ya da bir örnek verin.

Hatalı
<label for="dob">Doğum tarihi</label>
<input id="dob">
Doğru
<label for="dob">Doğum tarihi</label>
<input id="dob" aria-describedby="dob-hint">
<p id="dob-hint">GG/AA/YYYY biçimini kullanın; örneğin 31/03/1990.</p>

3. Zorunlu alanları işaretleyin (H90)

Bir alanın zorunlu olduğunu metinle söyleyin ve kullandığınız simgeyi açıklayın.

Hatalı
<label for="name">Ad <span style="color:red">&#9679;</span></label>
Doğru
<p>* ile işaretli alanlar zorunludur.</p>
<label for="name">Ad *</label>
<input id="name" required>

4. İlişkili kontrolleri gruplayın (H71)

Radyo düğmeleri ve onay kutuları, her seçenek için olduğu gibi ortak bir etikete de ihtiyaç duyar.

Hatalı
<p>Teslimat yöntemi</p>
<input type="radio" name="d"> Kurye
<input type="radio" name="d"> Mağazadan teslim
Doğru
<fieldset>
  <legend>Teslimat yöntemi</legend>
  <label><input type="radio" name="d"> Kurye</label>
  <label><input type="radio" name="d"> Mağazadan teslim</label>
</fieldset>

5. Üç kutuda telefon numarası

Kutuları görsel olarak telefon numarası gibi biçimlendirmek bir etiket değildir (F82). Grubu ve her kutuyu etiketleyin.

Hatalı
(<input size="3">) <input size="3"> - <input size="4">
Doğru
<fieldset>
  <legend>Telefon numarası</legend>
  <label>Alan kodu <input size="3"></label>
  <label>Ön ek <input size="3"></label>
  <label>Numara <input size="4"></label>
</fieldset>

6. Yalnızca yer tutucuya güvenmeyin

Yer tutucu, kullanıcı yazar yazmaz kaybolur; bu yüzden görünür bir etiket de tutun.

Hatalı
<input placeholder="E-posta adresi">
Doğru
<label for="email">E-posta adresi</label>
<input id="email" placeholder="[email protected]">

Mobil için kod örnekleri

Yerel formlarda her alana görünür bir etiket verin; biçim ipuçlarını ve zorunlu işaretleri metin olarak koyun. Girdide kaybolan bir etiketin yanında kalıcı bir etiket de olmalıdır.

iOS (SwiftUI)

import SwiftUI

struct SignUpForm: View {
    @State private var email = ""

    var body: some View {
        VStack(alignment: .leading) {
            // Görünür bir etiket ve beklenen biçim hakkında ipucu
            Text("E-posta adresi *")
            TextField("[email protected]", text: $email)
                .textFieldStyle(.roundedBorder)
                .accessibilityLabel("E-posta adresi")
                .accessibilityHint("Zorunlu. Örneğin [email protected]")
            Text("* ile işaretli alanlar zorunludur.").font(.footnote)
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.*

@Composable
fun SignUpField() {
    var email by remember { mutableStateOf("") }
    OutlinedTextField(
        value = email,
        onValueChange = { email = it },
        // Alanda metin olsa bile etiket görünür kalır
        label = { Text("E-posta adresi *") },
        // Beklenen biçim hakkında ipucu
        supportingText = { Text("Zorunlu. Örneğin [email protected]") }
    )
}

Nasıl test edilir?

  • Her girdiyi listeleyin: Girdi kabul eden her metin alanını, listeyi, radyo düğmesini, onay kutusunu ve özel kontrolü bulun.
  • Her birinin görünür etiketi olduğunu kontrol edin: Etiket yazarken görünür kalıyor ve ne girileceğini söylüyor mu?
  • Grupları kontrol edin: Radyo düğmelerinin, onay kutularının ve bölünmüş alanların grup etiketi ve tek tek etiketleri var mı?
  • Yönergeleri kontrol edin: Biçimler, sınırlar ve kurallar kullanıcının ihtiyaç duyacağı yerden önce belirtilmiş mi?
  • Zorunlu alanları kontrol edin: Hangi alanların zorunlu olduğu metinle belirtilmiş mi?
  • Ekran okuyucu kullanın: Her alana vardığınızda etiketi, grubu ve yönergeyi duyuruyor mu?
  • Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar etiketi olmayan kontrolleri bulur. Bir etiketin ya da yönergenin net olup olmadığını değerlendiremez; formu bir kişi okumalıdır.

Sık yapılan hatalar

  • Etiketsiz alanlar: Yalnızca yer tutucu ya da hiçbir şey.
  • Etiket yerine yer tutucu: Girdide kaybolur.
  • Biçim ipucu yok: Kullanıcı tarih ya da telefon biçimini tahmin etmek zorunda.
  • Yalnızca renkle işaretlenen zorunlu alanlar: Açıklaması olmayan kırmızı yıldız.
  • Grup etiketi olmayan bölünmüş alanlar: Üç kutuda telefon numarası ya da tarih (F82).
  • Başlığı olmayan radyo grupları: Seçenekler soru olmadan okunur.
  • Tek etiket olarak simge: Hedef kitle tarafından yaygın biçimde anlaşılmıyorsa.
  • Alandan sonra yönergeler: Kullanıcılar yazmadan önce görmesin diye yerleştirilmiş.

Kaynaklar

Standart sürümü: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz; bağlayıcı metin için Avrupa Erişilebilirlik Yasası'nın (Direktif (AB) 2019/882) ve EN 301 549 standardının resmî metinlerini esas alın.

Corpowid, Gartner tarafından tanınan bir platformdur.

Corpowid, dijital erişilebilirlik alanındaki yenilikçi yaklaşımı ve performansı nedeniyle dünyanın önde gelen araştırma ve danışmanlık şirketlerinden biri olan Gartner tarafından takdir edilmiştir. Bu rozetler, yapay zeka destekli ve kapsayıcı web deneyimleri oluşturma konusundaki kararlılığımızı yansıtmaktadır.

Corpowid hakkında sorularınız mı var?

Bizimle iletişime geçin.

Size en kısa sürede geri dönüş sağlayacağız.