Bilgi ve İlişkiler

Kısaca

Gören bir kullanıcı, büyük ve kalın bir satırın başlık, hizalı öğelerin liste, bir etiketin bir alana ait olduğunu, sayılardan oluşan bir ızgaranın da tablo olduğunu bir bakışta anlar. Ekran okuyucu kullanıcısı bunların hiçbirini, sayfa kodda söylemedikçe göremez.

Bu kriter, sunum yoluyla aktarılan bilgi, yapı ve ilişkilerin programatik olarak belirlenebilmesini ya da metin olarak sunulmasını ister. Uygulamada bu, sıradan öğeleri yalnızca öyle görünecek şekilde biçimlendirmek yerine gerçek başlıklar, listeler, tablolar, etiketler ve gruplar kullanmak demektir.

Neleri kapsar?

• Başlıklar ve bölümler: Görsel başlıklar doğru düzeyde başlık olarak işaretlenir. Gezinme, ana içerik ve altbilgi gibi bölgeler landmark olarak işaretlenir.
• Listeler: Liste gibi görünen öğeler liste olarak kodlanır; böylece öğe sayısı ve konumu duyurulur.
• Veri tabloları: Başlık hücreleri başlık olarak işaretlenir ve tanımladıkları veri hücreleriyle ilişkilendirilir. Bir başlık (caption) tabloyu adlandırır.
• Form etiketleri ve gruplar: Her alanın programatik bir etiketi vardır. Bir radyo düğmesi kümesi gibi ilişkili kontroller, grubu adlandıran bir etiketle gruplanır.
• Diğer görsel ipuçları: Zorunlu alanlar, menüdeki geçerli sayfa, seçili sekme ve anlam taşıyan vurgu, yalnızca renk ya da şekil olarak değil, yardımcı teknolojiye de sunulur.
• Kapsam dışı notlar: İçeriğin sırası 1.3.2, kontrollerin ad, rol ve değeri 4.1.2, formlardaki etiket ve yönergeler 3.3.2, amacı anlatan başlık ve etiketler ise 2.4.6 kriterinin konusudur.

Kimleri etkiler?

Ekran okuyucu kullanıcıları başlıklar, landmark'lar, listeler ve tablolar arasında gezinir ve her şeyin ne olduğunu bilmek için koda güvenir. Kendi stillerini ya da okuyucu modunu kullanan az gören kullanıcılar ile sesle kontrol kullananlar da gerçek etiketlere ve yapıya dayanır. Net yapı, bilişsel farklılıkları olan kişilere ve arama motorlarına da yardımcı olur.

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. Yardımcı teknolojinin okuyabildiği yapı, "algılanabilirlik" ve "sağlamlık" ilkelerinin parçasıdır.

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

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. 1.3.1 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. Başlıklar

Başlıklar için başlık öğelerini mantıklı bir sırada kullanın. Onları büyük ve kalın metinle taklit etmeyin.

<div class="buyuk-baslik">Fiyatlar</div>
<p class="kalin-satir">Aylık planlar</p>

<h1>Fiyatlar</h1>
<h2>Aylık planlar</h2>

2. Listeler

İlişkili öğeler kümesi bir listedir. Ekran okuyucu böylece "liste, 3 öğe" diye duyurur.

<p>• Hızlı kurulum<br>
• Sözleşme yok<br>
• Ücretsiz destek</p>

<ul>
  <li>Hızlı kurulum</li>
  <li>Sözleşme yok</li>
  <li>Ücretsiz destek</li>
</ul>

3. Veri tabloları

Başlık hücrelerini th ve bir scope ile işaretleyin, tabloyu da bir caption ile adlandırın.

<table>
  <tr><td><b>Plan</b></td><td><b>Fiyat</b></td></tr>
  <tr><td>Temel</td><td>₺99</td></tr>
</table>

<table>
  <caption>Planlar ve fiyatlar</caption>
  <thead>
    <tr><th scope="col">Plan</th><th scope="col">Fiyat</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Temel</th><td>₺99</td></tr>
  </tbody>
</table>

4. Form etiketleri

Yalnızca alanın yanına konan bir etiket, alana bağlı değildir. Bunları label for ile bağlayın.

<span>E-posta</span>
<input type="email" id="eposta">

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

5. Gruplanmış kontroller

İlişkili kontroller kümesine, örneğin radyo düğmelerine, fieldset ve legend ile bir ad verin.

<p>Teslimat yöntemi</p>
<input type="radio" name="t" id="t1"> <label for="t1">Kurye</label>
<input type="radio" name="t" id="t2"> <label for="t2">Mağazadan teslim</label>

<fieldset>
  <legend>Teslimat yöntemi</legend>
  <input type="radio" name="t" id="t1">
  <label for="t1">Kurye</label>
  <input type="radio" name="t" id="t2">
  <label for="t2">Mağazadan teslim</label>
</fieldset>

6. Landmark'lar

Ekran okuyucu kullanıcıları arasında atlayabilsin diye ana bölgeleri işaretleyin. Birden fazla gezinme bölgesi varsa her birini adlandırın.

<div class="nav">…</div>
<div class="icerik">…</div>
<div class="altbilgi">…</div>

<header>…</header>
<nav aria-label="Ana menü">…</nav>
<main>…</main>
<footer>…</footer>

Mobil için kod örnekleri

Yerel mobil uygulamalarda aynı kural geçerlidir. Başlıkları başlık olarak işaretleyin, bir etiketi ve değerini tek öğede birleştirin ve her alana bir etiket verin.

iOS (SwiftUI)

import SwiftUI

struct HesapGorunumu: View {
    @State private var eposta = ""

    var body: some View {
        VStack(alignment: .leading, spacing: 16) {
            // Başlık olarak duyurulan bir başlık
            Text("Hesap bilgileri")
                .font(.title2)
                .accessibilityAddTraits(.isHeader)

            // Etiket ve değeri tek öğe olarak okunur
            HStack {
                Text("Plan")
                Spacer()
                Text("Kurumsal")
            }
            .accessibilityElement(children: .combine)

            // Alanın bir etiketi var ("E-posta")
            TextField("E-posta", text: $eposta)
                .textFieldStyle(.roundedBorder)
        }
        .padding()
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.semantics

@Composable
fun HesapEkrani() {
    var eposta by remember { mutableStateOf("") }

    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
        // Başlık olarak duyurulan bir başlık
        Text(
            text = "Hesap bilgileri",
            style = MaterialTheme.typography.titleLarge,
            modifier = Modifier.semantics { heading() }
        )

        // Etiket ve değeri tek öğe olarak okunur
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .semantics(mergeDescendants = true) {},
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text("Plan")
            Text("Kurumsal")
        }

        // Alanın bir etiketi var
        OutlinedTextField(
            value = eposta,
            onValueChange = { eposta = it },
            label = { Text("E-posta") }
        )
    }
}

Nasıl test edilir?

• Stilleri kapatın: CSS'i devre dışı bırakın ya da sayfayı bir okuyucu modunda açın. Başlıklar, listeler ve tablolar hâlâ başlık, liste ve tablo gibi görünüyor mu? Sıra ve gruplama hâlâ anlaşılıyor mu?
• Yapıya göre gezinin: NVDA, VoiceOver ya da TalkBack ile başlıklar, landmark'lar, listeler ve tablolar arasında atlayın. Sayfaya bakmadan anahat anlamlı mı?
• Kodu inceleyin: Görsel başlıklar gerçek h1 ile h6 öğeleri mi? Listeler ul, ol ya da dl mi? Tablolar th, scope ve caption kullanıyor mu? Her alan bir label'a bağlı mı?
• Bir formu dinleyin: Odak bir alana geçtiğinde ekran okuyucu etiketini söylüyor mu? Bir gruba girince grubun adını söylüyor mu?
• Yalnızca görsel ipuçlarını kontrol edin: Zorunlu alanlar, geçerli sayfa ve seçili sekme: her biri yalnızca renk olarak değil, metin ya da durum olarak da sunuluyor mu?
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar eksik etiketleri, boş başlıkları ve tablo işaretleme sorunlarını bulur. Bir başlık düzeyinin ya da gruplamanın doğru olup olmadığını söyleyemez. Buna ancak bir kişi karar verebilir.

Sık yapılan hatalar

• Başlıkları stille taklit etmek: Kalın ve büyük bir div başlık değildir. Başlık anahatında görünmez.
• Başlık düzeylerini atlamak ya da görünüşe göre seçmek: Düzeyi yapıya göre seçin, boyut için CSS kullanın.
• Sayfa yerleşimi için tablo kullanmak: Yerleşim tabloları ekran okuyucuları şaşırtır. Yerleşim için CSS kullanın, tabloları veriye ayırın.
• th öğesini yalnızca görünüş için kullanmak: Veri hücrelerini tanımlamayan başlık hücreleri kullanıcıyı yanıltır.
• Etiket yerine yer tutucu metin kullanmak: Yer tutucu yazmaya başlayınca kaybolur ve güvenilir bir etiket değildir.
• Radyo düğmelerini ve onay kutularını gruplamamak: Kullanıcı seçenekleri duyar, ama yanıtladıkları soruyu duymaz.
• Bir durumu yalnızca renkle ya da simgeyle göstermek: Zorunlu, hata ya da geçerli durum ayrıca metin ya da programatik durum olarak da bulunmalıdır.
• Listeleri satır sonları ve simgelerle yazmak: Ekran okuyucu bunun bir liste olduğunu bilmez.

Kaynaklar

• Understanding SC 1.3.1: Info and Relationships (W3C), İngilizce, yeni sekmede açılır
• Page Structure Tutorial (W3C WAI), İngilizce, yeni sekmede açılır
• Tables Tutorial (W3C WAI), İngilizce, yeni sekmede açılır
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), İngilizce, yeni sekmede açılır
• EN 301 549 V4.1.1 (ETSI), İngilizce, yeni sekmede açılır
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), İngilizce, yeni sekmede açılır

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.