Bilgi ve İlişkiler

Kısaca

Gören kullanıcı bir sayfanın yapısını görsel ipuçlarından anlar: büyük kalın yazının başlık olduğunu, maddelerin bir liste oluşturduğunu, bir etiketin hangi kutuya ait olduğunu. Ekran okuyucu ise bu görünüşü değil, koddaki yapıyı okur. Bu kriter, görsel olarak verilen yapı ve ilişkilerin kodda da tanımlanmasını ister.

Web'de bu çoğunlukla doğru HTML öğelerini seçmek demektir: başlık için h1–h6, liste için ul/ol, tablo başlığı için th, form etiketi için label. Mobilde aynı bilgi platformun erişilebilirlik özellikleriyle verilir.

Neleri kapsar?

• Başlıklar: Görsel başlıkların başlık olarak işaretlenmesi ve mantıklı bir düzey sırası izlemesi.
• Listeler: Liste görünümündeki içeriğin sıralı, sırasız veya tanım listesi olarak kodlanması.
• Veri tabloları: Tablo yapısı, açıklayıcı başlık (caption) ve satır/sütun başlıklarının ilişkilendirilmesi.
• Gezinti bölümleri: Menülerin gezinti bölgesi olarak tanımlanması.
• Form etiketleri: Her form alanının görünür etiketine programatik olarak bağlanması.
• Alan grupları: Radyo düğmeleri, onay kutuları gibi birlikte anlam kazanan alanların başlığıyla birlikte gruplanması.
• Paragraf ve vurgu: Metnin paragraflara bölünmesi ve anlam taşıyan vurgunun semantik öğelerle verilmesi.
• Kapsam dışı notlar: Okuma sırası bir sonraki kriterin (Anlamlı Sıralama), bilginin yalnızca renkle verilmesi ise Renk Kullanımı kriterinin konusudur.

Kimleri etkiler?

Ekran okuyucu kullanan kör ve az gören kullanıcılar en çok etkilenen gruptur. Bu kullanıcılar sayfada başlıklar arasında atlayarak, tabloda hücreden hücreye geçerken sütun başlığını duyarak ve form alanına geldiklerinde etiketini dinleyerek gezinir. Yapı kodda yoksa sayfa uzun ve bölünmemiş bir metne dönüşür. Ses komutuyla kullanan kişiler ve kendi stil ayarlarını uygulayan az gören kullanıcılar da doğru yapıya ihtiyaç duyar.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 26–45 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. Başlık hiyerarşisi

Görünüşü büyütülmüş bir div ekran okuyucu için başlık değildir. Başlık düzeyleri de görünüşe göre değil, içeriğin yapısına göre seçilmelidir.

<div class="buyuk-baslik">Konut Yardımı Başvurusu</div>
<h4>Kimler başvurabilir?</h4>
<h2>Gerekli belgeler</h2>

<h1>Konut Yardımı Başvurusu</h1>
<h2>Kimler başvurabilir?</h2>
<h2>Gerekli belgeler</h2>
<h3>Gelir belgesi</h3>

2. Listeler

Satır başı çizgileri veya br ile yapılan listeler, ekran okuyucuya kaç madde olduğunu söylemez.

<p>
  - Nüfus cüzdanı fotokopisi<br>
  - İkametgâh belgesi<br>
  - Gelir belgesi
</p>

<ul>
  <li>Nüfus cüzdanı fotokopisi</li>
  <li>İkametgâh belgesi</li>
  <li>Gelir belgesi</li>
</ul>

3. Veri tablosu: başlık, caption ve scope

Veri tablosunda başlık hücreleri th olmalı, yönleri scope ile belirtilmeli ve tablonun konusu caption ile verilmelidir.

<table>
  <tr><td><b>İlçe</b></td><td><b>Başvuru</b></td></tr>
  <tr><td>Kadıköy</td><td>1.240</td></tr>
</table>

<table>
  <caption>2026 ilçelere göre konut yardımı başvuruları</caption>
  <thead>
    <tr>
      <th scope="col">İlçe</th>
      <th scope="col">Başvuru sayısı</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Kadıköy</th>
      <td>1.240</td>
    </tr>
  </tbody>
</table>

4. Gezinti bölgeleri

Birden fazla gezinti bölgesi varsa her birine ayırt edici bir ad verin.

<div class="menu">
  <a href="/">Ana sayfa</a>
  <a href="/hizmetler">Hizmetler</a>
</div>

<nav aria-label="Ana menü">
  <ul>
    <li><a href="/">Ana sayfa</a></li>
    <li><a href="/hizmetler">Hizmetler</a></li>
  </ul>
</nav>
<nav aria-label="Sayfa içi bağlantılar">…</nav>

5. Form etiketi

Etiket ile alan yan yana görünse de kodda bağlı değilse ekran okuyucu alana geldiğinde ne girileceğini söylemez.

<span>T.C. Kimlik No</span>
<input type="text" name="tckn">

<label for="tckn">T.C. Kimlik No</label>
<input type="text" id="tckn" name="tckn"
       inputmode="numeric" autocomplete="off">

6. Alan grupları: fieldset ve legend

Radyo düğmeleri tek tek "Evet", "Hayır" diye okunur. Sorunun kendisi legend ile gruba bağlanmalıdır.

<p>Engelli bireye bakıyor musunuz?</p>
<input type="radio" id="evet" name="bakim">
<label for="evet">Evet</label>
<input type="radio" id="hayir" name="bakim">
<label for="hayir">Hayır</label>

<fieldset>
  <legend>Engelli bireye bakıyor musunuz?</legend>
  <input type="radio" id="evet" name="bakim">
  <label for="evet">Evet</label>
  <input type="radio" id="hayir" name="bakim">
  <label for="hayir">Hayır</label>
</fieldset>

7. Paragraf ve anlamlı vurgu

Paragraflar p ile ayrılmalı; anlam taşıyan vurgu için strong ve em kullanılmalıdır. Yalnızca görünüş amaçlı kalınlık için CSS yeterlidir.

Başvurular 30 Kasım'da sona erer.<br><br>
<span style="font-weight:bold">Eksik belgeli
başvurular değerlendirilmez.</span>

<p>Başvurular 30 Kasım'da sona erer.</p>
<p><strong>Eksik belgeli başvurular
değerlendirilmez.</strong></p>

Not: Ekran okuyucuların çoğu varsayılan ayarlarda strong ve em vurgusunu seslendirmez. Vurgu kritik bir bilgi taşıyorsa bunu metnin kendisiyle de belirtin (örneğin "Önemli:" ile başlayarak).

Mobil için kod örnekleri

iOS (SwiftUI)

import SwiftUI

struct BasvuruFormu: View {
    @State private var tckn = ""
    @State private var bakim = "Hayır"

    var body: some View {
        Form {
            // Başlık olarak işaretlenir; VoiceOver başlık rotorunda listelenir.
            Text("Konut Yardımı Başvurusu")
                .font(.title)
                .accessibilityAddTraits(.isHeader)

            // TextField başlığı erişilebilir ad olarak okunur.
            TextField("T.C. Kimlik No", text: $tckn)
                .keyboardType(.numberPad)

            // Section başlığı, içindeki seçeneklerin grup başlığı olur.
            Section(header: Text("Engelli bireye bakıyor musunuz?")) {
                Picker("Engelli bireye bakıyor musunuz?", selection: $bakim) {
                    Text("Evet").tag("Evet")
                    Text("Hayır").tag("Hayır")
                }
                .pickerStyle(.inline)
            }
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.selectable
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics

@Composable
fun BasvuruFormu() {
    var tckn by remember { mutableStateOf("") }
    var bakim by remember { mutableStateOf("Hayır") }

    Column {
        Text(
            "Konut Yardımı Başvurusu",
            style = MaterialTheme.typography.headlineSmall,
            modifier = Modifier.semantics { heading() }
        )

        // label parametresi alanın erişilebilir adı olur.
        OutlinedTextField(
            value = tckn,
            onValueChange = { tckn = it },
            label = { Text("T.C. Kimlik No") }
        )

        Text(
            "Engelli bireye bakıyor musunuz?",
            modifier = Modifier.semantics { heading() }
        )
        Column(Modifier.selectableGroup()) {
            listOf("Evet", "Hayır").forEach { secenek ->
                Row(
                    Modifier.selectable(
                        selected = bakim == secenek,
                        onClick = { bakim = secenek }
                    )
                ) {
                    RadioButton(selected = bakim == secenek, onClick = null)
                    Text(secenek)
                }
            }
        }
    }
}

Nasıl test edilir?

• Başlık listesini inceleyin: Ekran okuyucunun başlık listesini (NVDA'da Insert+F7, VoiceOver'da rotor) açın. Görsel başlıkların hepsi orada mı, düzeyler mantıklı mı?
• Tabloda gezinin: Tablo hücreleri arasında ilerlerken her hücrede ilgili satır ve sütun başlığı okunuyor mu?
• Form alanlarına odaklanın: Her alana Tab ile geldiğinizde etiketi ve varsa grup başlığı okunuyor mu?
• Stilleri kapatın: CSS devre dışıyken başlıklar, listeler ve tablolar hâlâ yapı olarak tanınabiliyor mu?
• Otomatik araçların sınırı: Otomatik araçlar etiketsiz form alanlarını, boş başlıkları, atlanan başlık düzeylerini ve th içermeyen tabloları iyi yakalar. Ancak görsel olarak başlık gibi görünen bir div'in aslında başlık olması gerektiğini, bir tablonun veri mi yerleşim mi olduğunu ya da vurgunun anlam taşıyıp taşımadığını ayırt edemez. Bu kriterin önemli bir kısmı elle kontrol gerektirir.

Sık yapılan hatalar

• Başlık düzeyini görünüşe göre seçmek: Küçük görünsün diye h4 kullanmak hiyerarşiyi bozar; görünüş CSS ile ayarlanmalıdır.
• Yer tutucuyu etiket yerine kullanmak: placeholder yazmaya başlayınca kaybolur ve güvenilir bir erişilebilir ad değildir.
• Yerleşim için tablo kullanmak: Sayfa düzeni tabloyla kurulduğunda ekran okuyucu anlamsız satır ve sütun bilgileri okur.
• Grup başlığını düz metin bırakmak: Radyo düğmelerinin üstündeki soru legend veya grup adı olarak bağlanmazsa seçenekler bağlamsız kalır.
• Gereksiz ARIA eklemek: Doğru HTML öğesi varken role eklemek çoğu zaman gereksizdir, yanlış rol ise yapıyı bozar.
• Mobilde kartları bölünmüş okutmak: Başlık, tarih ve özet ayrı ayrı okunuyorsa ilişkili öğeler tek bir erişilebilir öğede birleştirilmelidir.

Kaynaklar

• Understanding SC 1.3.1: Info and Relationships (W3C), İngilizce, yeni sekmede açılır
• Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
• Erişilebilirlik sözlüğü — Semantik HTML, bölge (landmark), erişilebilir ad 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.