Etiketler ve Talimatlar

Kısaca

Formdaki bir kutunun ne için olduğunu, tarihin hangi biçimde yazılacağını veya hangi alanların zorunlu olduğunu kullanıcı ancak bilgilendirilirse bilebilir. Bu bilgiler eksikse kullanıcı deneme-yanılmayla ilerler ve hata mesajlarıyla karşılaşır.

Bu kriter, kullanıcıdan veri girişi veya seçim istenen her bileşen için anlamlı bir etiket, gerektiğinde de talimat sunulmasını ister. Kontrol listesi ayrıca biçim kurallarının veri girişinden önce verilmesini ve zorunlu alanların yalnızca yıldız ya da renkle değil, açıkça belirtilmesini değerlendirir.

Neleri kapsar?

• Etiketler: Her form alanının, seçim kutusunun ve onay kutusunun amacını anlatan görünür bir etiketi olması.
• Yer tutucu metin: placeholder metninin etiketin yerine kullanılmaması.
• Biçim talimatları: Tarih, telefon, kimlik numarası ve parola gibi alanlarda kuralların önceden belirtilmesi.
• Zorunlu alanlar: Zorunlu alanların metinle belirtilmesi; yıldız kullanılıyorsa anlamının açıklanması.
• Gruplar: Radyo düğmesi ve onay kutusu gruplarında sorunun kendisinin görünür olması.
• Kapsam dışı notlar: Etiketin kodda alana bağlanması Bilgi ve İlişkiler, hataların bildirilmesi ise bir önceki kriterin (Hata Tanımlaması) konusudur.

Kimleri etkiler?

Bilişsel engeli, öğrenme güçlüğü veya bellek sorunu olan kullanıcılar yer tutucu metin kaybolduğunda alanın ne için olduğunu unutabilir. Ekran okuyucu kullanan kör kişiler etiketsiz alanlarda yalnızca "düzenleme alanı" duyar. Az gören kullanıcılar, soluk renkli yer tutucu metinleri okuyamayabilir. Motor engelli kişiler için önceden bilinmeyen biçim kuralları, tekrar tekrar yazmak zorunda kalmak demektir.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 115–120 numaralı soruları kapsar. Yönlendirme soruları sayfada ilgili içerik olup olmadığını belirler; yoksa liste sizi sonraki soruya geçirir. Aşağıdaki açıklamalar sorulardan alıntı değil, özetidir. Soruların tam metni için resmî listeye bakın.

Resmî kontrol listesini indirin (PDF), yeni sekmede açılır

Web için kod örnekleri

1. Yer tutucuyu etiket olarak kullanmak

Yer tutucu metin, kullanıcı yazmaya başlayınca kaybolur ve çoğu zaman düşük kontrastlıdır. Görünür bir etiket her zaman bulunmalıdır.

<input type="text" placeholder="Ad Soyad">
<input type="tel" placeholder="Telefon">

<label for="ad">Ad Soyad</label>
<input type="text" id="ad" autocomplete="name">

<label for="tel">Cep telefonu</label>
<input type="tel" id="tel" autocomplete="tel">

2. Biçim talimatı

Biçim bilgisi alandan önce veya etiketin hemen altında görünür olmalı ve aria-describedby ile alana bağlanmalıdır.

<label for="dogum">Doğum tarihi</label>
<input id="dogum" placeholder="GG.AA.YYYY">

<label for="dogum">Doğum tarihi</label>
<p id="dogum-ipucu">Gün, ay ve yılı noktayla ayırın.
  Örnek: 23.04.1985</p>
<input id="dogum" inputmode="numeric"
       autocomplete="bday" aria-describedby="dogum-ipucu">

3. Parola kuralları

Parola kuralları kullanıcı yazmaya başlamadan görünmeli; yalnızca hata sonrası gösterilmemelidir.

<label for="parola">Yeni parola</label>
<div id="parola-kurallari">
  <p>Parolanız şunları içermelidir:</p>
  <ul>
    <li>En az 8 karakter</li>
    <li>En az bir rakam</li>
    <li>En az bir büyük harf</li>
  </ul>
</div>
<input type="password" id="parola"
       autocomplete="new-password"
       aria-describedby="parola-kurallari">

4. Zorunlu alanlar

Yıldız kullanılacaksa anlamı formun başında metinle açıklanmalıdır. Daha açık bir yol, "(zorunlu)" ifadesini etiketin içine yazmaktır. required özniteliği bu bilgiyi yardımcı teknolojilere de iletir.

<label for="adres" style="color:red">Adres *</label>
<input id="adres">

<p>Yıldız (*) ile işaretli alanların doldurulması zorunludur.</p>

<label for="adres">Adres <span aria-hidden="true">*</span></label>
<input id="adres" required autocomplete="street-address">

<!-- veya -->
<label for="ilce">İlçe (zorunlu)</label>
<input id="ilce" required>

5. Grup sorusu ve seçenek etiketleri

Onay kutusu ve radyo düğmesi gruplarında hem sorunun hem de her seçeneğin görünür bir etiketi olmalıdır.

<fieldset>
  <legend>Hangi kanallardan bilgilendirilmek istersiniz? (birden fazla seçebilirsiniz)</legend>
  <input type="checkbox" id="k-sms" name="kanal" value="sms">
  <label for="k-sms">SMS</label>
  <input type="checkbox" id="k-eposta" name="kanal" value="eposta">
  <label for="k-eposta">E-posta</label>
</fieldset>

6. Yalnızca simgeyle etiketlenmiş arama kutusu

Görsel tasarım etiket göstermeye izin vermiyorsa bile alanın erişilebilir bir adı olmalı ve düğmenin metni amacı anlatmalıdır.

<form role="search">
  <label for="site-arama" class="sr-only">Sitede ara</label>
  <input type="search" id="site-arama" placeholder="Hizmet, duyuru veya belge">
  <button type="submit">Ara</button>
</form>

Mobil için kod örnekleri

iOS (SwiftUI)

SwiftUI'de TextField başlığı yer tutucu olarak gösterilir ve yazmaya başlayınca kaybolur. Bu nedenle ayrı ve görünür bir etiket metni eklemek daha güvenlidir.

import SwiftUI

struct DogumTarihiAlani: View {
    @State private var tarih = ""

    var body: some View {
        VStack(alignment: .leading, spacing: 4) {
            Text("Doğum tarihi (zorunlu)")
                .font(.subheadline.weight(.semibold))
                .accessibilityHidden(true) // Ad, alanın kendi etiketinden okunur

            TextField("Doğum tarihi (zorunlu)", text: $tarih, prompt: Text("23.04.1985"))
                .keyboardType(.numbersAndPunctuation)
                .accessibilityHint("Gün, ay ve yılı noktayla ayırın.")

            Text("Gün, ay ve yılı noktayla ayırın. Örnek: 23.04.1985")
                .font(.footnote)
                .foregroundStyle(.secondary)
                .accessibilityHidden(true) // Aynı bilgi ipucu olarak okunur
        }
    }
}

Android (Jetpack Compose)

Material 3 metin alanında label yazarken de görünür kalır (alanın üstüne küçülür). Biçim bilgisi ve zorunluluk supportingText ile verilebilir.

import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.text.input.KeyboardType

@Composable
fun DogumTarihiAlani() {
    var tarih by remember { mutableStateOf("") }

    OutlinedTextField(
        value = tarih,
        onValueChange = { tarih = it },
        label = { Text("Doğum tarihi (zorunlu)") },
        supportingText = { Text("Gün, ay ve yılı noktayla ayırın. Örnek: 23.04.1985") },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
    )
}

Nasıl test edilir?

• Alanları gözden geçirin: Her form alanının, yazmaya başladıktan sonra da görünür kalan bir etiketi var mı?
• Biçim kurallarını arayın: Tarih, telefon, kimlik numarası ve parola alanlarında kurallar veri girişinden önce görünüyor mu?
• Zorunlu alanları kontrol edin: Zorunluluk metinle belirtilmiş mi? Yıldız kullanılıyorsa anlamı açıklanmış mı?
• Ekran okuyucuyla dinleyin: Her alana geldiğinizde etiket, zorunluluk ve varsa talimat okunuyor mu?
• Otomatik araçların sınırı: Otomatik araçlar etiketsiz alanları ve yalnızca yer tutucuyla etiketlenmiş alanları büyük ölçüde bulur. Etiketin ve talimatın yeterince açık olup olmadığını ise elle değerlendirmek gerekir.

Sık yapılan hatalar

• Yalnızca yer tutucu: Modern tasarımlarda sık görülen, etiketsiz ve yalnızca soluk yer tutucu metinli alanlar.
• Açıklamasız yıldız: Yıldızın ne anlama geldiğinin hiçbir yerde yazılmaması.
• Yalnızca renkle zorunluluk: Zorunlu alanların kırmızı etiketle belirtilmesi.
• Kuralları hata sonrası göstermek: Parola kurallarının ancak hatalı giriş yapıldıktan sonra görünmesi.
• Belirsiz etiketler: "Numara", "Bilgi", "Değer" gibi neyin istendiğini söylemeyen etiketler.

Kaynaklar

• Understanding SC 3.3.2: Labels or Instructions (W3C), İngilizce, yeni sekmede açılır
• Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
• Erişilebilirlik kütüphanesi — Etiket, yer tutucu metin, zorunlu alan ve diğer terimler.

Kontrol listesi sürümü: V2.2.30.01 (2026). Bu sayfa bilgilendirme amaçlıdır; bağlayıcı metin için Aile ve Sosyal Hizmetler Bakanlığı'nın resmî kontrol listesini esas alın.