Sayfa / Ekran Başlığı

Kısaca

Bir sayfa açıldığında ekran okuyucunun ilk seslendirdiği şey sayfa başlığıdır. Tarayıcı sekmesinde, yer imlerinde, geçmişte ve arama sonuçlarında görünen de yine bu başlıktır. Başlık yoksa ya da her sayfada aynıysa, kullanıcı nerede olduğunu anlamak için sayfayı baştan dinlemek zorunda kalır.

Bu kriter, her sayfanın veya ekranın bir başlığı olmasını ve bu başlığın içeriği açık, doğru ve diğer sayfalardan ayırt edici biçimde anlatmasını ister.

Neleri kapsar?

• Web sayfası başlığı: head içindeki title öğesi.
• Ayırt edicilik: Aynı sitedeki sayfaların başlıklarının birbirinden farklı olması.
• Doğruluk: Başlığın sayfanın gerçek içeriğini yansıtması; tek sayfa uygulamalarda içerik değişince başlığın da güncellenmesi.
• Mobil ekran başlığı: Gezinti çubuğu başlığı veya bölme başlığı olarak yardımcı teknolojilere iletilen ekran adı.
• Kapsam dışı notlar: Sayfa içindeki h1–h6 başlıklarının yapısı Bilgi ve İlişkiler kriterinin konusudur.

Kimleri etkiler?

Ekran okuyucu kullanan kör kullanıcılar sayfaya geldiklerinde nerede olduklarını ilk olarak başlıktan öğrenir; birden çok sekme arasında geçiş yaparken de sekmeleri başlıklarıyla ayırt eder. Bilişsel engeli olan veya kısa süreli bellek güçlüğü yaşayan kullanıcılar açık başlıklar sayesinde yönlerini kaybetmez. Ekranı büyüten az gören kullanıcılar da sekme adlarına bakarak doğru sayfayı bulur.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 84–85 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. Eksik veya genel başlık

Her sayfada aynı başlığı kullanmak, başlık hiç olmamasından pek farklı değildir.

<head>
  <title>Ana Sayfa</title>
</head>
<!-- Yapı ruhsatı başvuru sayfasında da aynı başlık -->

<head>
  <title>Yapı Ruhsatı Başvurusu – İmar İşlemleri – Örnek Belediyesi</title>
</head>

2. Başlığın sırası

En özgül bilgiyi başa yazın. Ekran okuyucu ve sekme adı başlığın başını gösterdiği için site adıyla başlayan başlıklar sekmeler arasında ayırt edilemez.

<title>Örnek Belediyesi | Hizmetler | Su Abonelik Başvurusu</title>

<title>Su Abonelik Başvurusu – Hizmetler – Örnek Belediyesi</title>

3. Çok adımlı formlar

Adım değiştikçe başlık da güncellenmelidir; böylece kullanıcı hangi adımda olduğunu bilir.

<title>Adım 2 / 4: Belge Yükleme – Konut Yardımı Başvurusu – Örnek Belediyesi</title>

4. Hata durumunu başlıkta belirtmek

Form gönderildikten sonra hata varsa başlığın başına bunu eklemek, sayfa yeniden yüklendiğinde ekran okuyucu kullanıcısını hemen bilgilendirir.

<title>Hata: 2 alan düzeltilmeli – Konut Yardımı Başvurusu – Örnek Belediyesi</title>

5. Tek sayfa uygulamalarda başlığı güncellemek

Sayfa yenilenmeden içerik değiştiğinde document.title da güncellenmelidir.

// Rota değişti, başlık hep "e-Hizmetler" kalıyor
function rotaDegisti(rota) {
  icerigiGoster(rota);
}

const SITE = "Örnek Belediyesi e-Hizmetler";

function rotaDegisti(rota) {
  icerigiGoster(rota);
  document.title = `${rota.baslik} – ${SITE}`;
}

Mobil için kod örnekleri

iOS (SwiftUI)

Gezinti başlığı, VoiceOver tarafından ekran açıldığında okunur ve ekranın adı olarak kullanılır.

import SwiftUI

struct BasvurularimEkrani: View {
    var body: some View {
        NavigationStack {
            List {
                Text("Su abonelik başvurusu – İnceleniyor")
                Text("Konut yardımı – Onaylandı")
            }
            .navigationTitle("Başvurularım")
        }
    }
}

Android (Jetpack Compose)

Üst çubuktaki başlık görsel olarak yeterlidir; ekran değiştiğinde TalkBack'in yeni ekranı duyurması için bölme başlığı (paneTitle) da tanımlanabilir.

import androidx.compose.foundation.layout.padding
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.paneTitle
import androidx.compose.ui.semantics.semantics

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun BasvurularimEkrani() {
    Scaffold(
        modifier = Modifier.semantics { paneTitle = "Başvurularım" },
        topBar = { TopAppBar(title = { Text("Başvurularım") }) }
    ) { ic ->
        BasvuruListesi(Modifier.padding(ic)) // Kendi bileşeniniz
    }
}

Etkinlik (Activity) tabanlı uygulamalarda her ekran için android:label değerini veya setTitle() çağrısını da anlamlı bir başlıkla ayarlayın.

Nasıl test edilir?

• Sekme adlarını inceleyin: Sitenin farklı sayfalarını sekmelerde açın. Her sekmenin adı sayfayı tanıtıyor ve diğerlerinden ayırt ediliyor mu?
• Ekran okuyucuyla açın: Sayfayı yüklediğinizde ilk okunan başlık içeriğe uygun mu? Tek sayfa uygulamalarda gezinme sonrası başlık değişiyor mu?
• Mobilde ekran geçişlerini dinleyin: Her ekran açıldığında VoiceOver veya TalkBack ekranın adını duyuruyor mu?
• Otomatik araçların sınırı: Otomatik araçlar title öğesinin olmadığı veya boş olduğu sayfaları kolayca bulur; bazı tarayıcı tabanlı araçlar aynı başlığın birçok sayfada tekrarlandığını da raporlayabilir. Başlığın içeriği doğru ve yeterli biçimde tanıtıp tanıtmadığı ise elle değerlendirilmelidir.

Sık yapılan hatalar

• Tüm sayfalarda aynı başlık: İçerik yönetim sistemi şablonlarında sayfa başlığının doldurulmaması.
• Dosya adı veya teknik başlık: "index.html", "Sayfa1" ya da "Untitled" gibi başlıklar.
• Site adını başa koymak: Sekmeler arasında yalnızca site adının görünmesi.
• Tek sayfa uygulamada başlığı güncellememek: Kullanıcı gezindikçe başlığın hep ilk sayfanın başlığı olarak kalması.
• Mobilde başlıksız ekranlar: Özel tasarlanmış üst çubuklarda başlığın yalnızca görsel bir metin olarak kalması.

Kaynaklar

• Understanding SC 2.4.2: Page Titled (W3C), İngilizce, yeni sekmede açılır
• Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
• Erişilebilirlik kütüphanesi — Sayfa başlığı, tek sayfa uygulama, ekran okuyucu 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.