WCAG 2.4.2 · A Seviyesi · EN 301 549 9.2.4.2

Sayfa Başlığı

Her web sayfasının konusunu ya da amacını anlatan bir başlığı olmasını ister.

Kısaca

Sayfa başlığı, bir sayfa yüklendiğinde ekran okuyucunun ilk duyurduğu şeydir ve tarayıcı sekmesinde, geçmişte, yer imlerinde ve arama sonuçlarında görünen etikettir. Her sayfada "Başlıksız" ya da "Ana sayfa" yazması kullanıcılara nerede olduklarını söylemez.

Bu kriter, web sayfalarının konularını ya da amaçlarını anlatan başlıkları olmasını ister. İyi bir başlık sayfaya özgüdür ve en ayırt edici kısmı başa koyar.

Neleri kapsar?

  • Neleri kapsar: Her web sayfasının title öğesi ve tek sayfalı uygulama görünümlerinin, değiştikçe başlığı.
  • Konuyu ya da amacı anlatır: Başlık, kullanıcıya sayfanın ne hakkında olduğunu söylemeli; böylece istedikleri sayfa olup olmadığına karar verebilsinler.
  • Önemli olduğunda benzersiz: Aynı sitedeki sayfaların başlıkları farklı olmalıdır. Bir sürecin adımları için başlıklar hangi adım olduğunu söylemelidir.
  • Tek sayfalı uygulamalar: Sayfa yüklenmeden bir görünüm değiştiğinde başlığı güncel görünümü yansıtacak biçimde güncelleyin.
  • Dokümanlar: PDF dosyalarının da bir doküman başlığı olmalıdır.
  • Bağlantı metni ve başlık: Bir bağlantı ile açtığı sayfanın başlığı aynı ya da çok yakın olmalıdır. Bu 2.4.4'e yardımcı olur.
  • Kapsam dışı notlar: Sayfanın ana başlığı 2.4.6'dır. Sayfanın dili 3.1.1'dir.

Kimleri etkiler?

Bir sayfa açıldığında önce başlığı duyan ekran okuyucu kullanıcıları. Birkaç sekme ya da pencere açıkken doğrusunu bulması gerekenler. Nerede olduklarını doğrulamak için net bir başlığa güvenen bilişsel ya da bellek güçlüğü olan kişiler. Sayfaları yeniden bulmak için yer imlerini, geçmişi ya da arama sonuçlarını kullananlar.

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. Net sayfa başlıkları, "işletilebilirlik" ilkesinin parçasıdır.

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

WCAG 2.4.2'in EN 301 549'daki karşılıkları
MaddeOrtamNe ister?
9.2.4.2Web sayfalarıWeb içeriğinin WCAG 2.4.2 kriterini karşılamasını ister.

EN 301 549 V3.2.1'de bu kriterin yazılım satırı geçersiz (void) olarak işaretlidir. V4.1.1'in bunu değiştirip değiştirmediğini kontrol edin. 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. 2.4.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. Özgül, açıklayıcı bir başlık

Sayfaya özgü kısmı başa, site adını sona koyun.

Hatalı
<title>Ana sayfa</title>
Doğru
<title>Sipariş onayı | Örnek Mağaza</title>

2. Eksik ya da boş başlık

Başlığı olmayan bir sayfa URL'si ya da dosya adıyla duyurulur.

Hatalı
<head>
  <meta charset="utf-8">
</head>
Doğru
<head>
  <meta charset="utf-8">
  <title>Bize ulaşın | Örnek Mağaza</title>
</head>

3. Her sayfada aynı başlık

Her sayfanın adı aynıysa kullanıcılar onları sekmelerde ya da geçmişte ayırt edemez.

Hatalı
<title>Örnek Mağaza</title> <!-- her sayfada -->
Doğru
<title>Koşu ayakkabıları, sayfa 2 | Örnek Mağaza</title>

4. Bir sürecin adımları

Kullanıcının hangi adımda olduğunu söyleyin ve sayfa bir hata gösteriyorsa bunu belirtin.

Hatalı
<title>Ödeme</title>
Doğru
<title>Ödeme, adım 3/4 | Satın alma | Örnek Mağaza</title>
<!-- Başarısız bir gönderimden sonra: -->
<title>Hata: ödeme başarısız, adım 3/4 | Örnek Mağaza</title>

5. Tek sayfalı uygulama görünümleri

Rota değiştiğinde document.title değerini güncelleyin ve değişikliği yardımcı teknolojiye bildirin.

Hatalı
router.afterEach(() => { /* başlık hiç değişmez */ });
Doğru
router.afterEach((to) => {
  document.title = `${to.meta.title} | Örnek Mağaza`;
  // Ekran okuyucular yeni görünümü duyursun diye odağı ana başlığa taşıyın
  document.querySelector("h1")?.focus();
});

6. PDF dokümanları

Bir PDF'ye gerçek bir başlık verin ve görüntüleyicilerin dosya adı yerine bunu göstermesini sağlayın.

Hatalı
Title: tarama_0042.pdf
Doğru
Title: 2026 yıllık erişilebilirlik raporu
Görüntüleyici tercihi: DisplayDocTitle = true

Mobil için kod örnekleri

Yerel uygulamalarda her ekranın aynı nedenlerle bir başlığa ihtiyacı vardır. Ekran başlığı gezinme çubuğunda görünür ve bir ekran okuyucu yeni bir ekrana geçtiğinde duyurulur. EN 301 549 V3.2.1'de bu satır yazılım için geçersizdi; bu yüzden iyi uygulama olarak ele alın.

iOS (SwiftUI)

import SwiftUI

struct SiparisOnayEkrani: View {
    var body: some View {
        NavigationStack {
            SiparisOzeti()
                // Kaçının: .navigationTitle("") ya da her ekranda aynı başlık
                .navigationTitle("Sipariş onayı")
                .navigationBarTitleDisplayMode(.inline)
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.material3.*
import androidx.compose.runtime.Composable

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SiparisOnayEkrani() {
    Scaffold(
        topBar = {
            // Kaçının: boş bir başlık ya da her ekranda aynı başlık
            TopAppBar(title = { Text("Sipariş onayı") })
        }
    ) { padding ->
        SiparisOzeti(padding)
    }
}

Nasıl test edilir?

  • Sekmeyi okuyun: Sayfayı açıp tarayıcı sekmesini okuyun. Başlık sayfayı anlatıyor mu?
  • Sayfaları karşılaştırın: Sitenin birkaç sayfasını açın. Başlıklar farklı mı ve içerikle uyuşuyor mu?
  • Bir ekran okuyucu kullanın: Bir sayfa yükleyip önce neyin duyurulduğunu dinleyin. Başlık mı ve anlamlı mı?
  • Dinamik görünümleri kontrol edin: Tek sayfalı bir uygulamada görünümleri değiştirin. Başlık her görünümle değişiyor mu?
  • Adımları ve hataları kontrol edin: Çok adımlı bir formun başlığı hangi adım olduğunu söylüyor mu ve bir hata sayfası bunu belirtiyor mu?
  • PDF'leri kontrol edin: Doküman özelliklerini açın. Başlık anlamlı mı ve görüntüleyici onu gösteriyor mu?
  • Mobili kontrol edin: Her ekranın içeriğiyle uyuşan bir başlığı var mı?
  • Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar eksik ve boş başlıkları bulur, ama bir başlığın anlamlı olup olmadığını söyleyemez.

Sık yapılan hatalar

  • Her yerde "Başlıksız", "Ana sayfa" ya da "Sayfa 1": Klasik ihlal (F25).
  • Yalnızca site adı: Her sayfada aynı başlık.
  • Dosya adı ya da URL olan başlık: PDF'lerde ve etiketsiz sayfalarda tipiktir.
  • Site adını başa koymak: Sekmeler daralır ve ayırt edici kısım kesilir.
  • Tek sayfalı uygulamada hiç değişmeyen başlık: Kullanıcılar görünümün değiştiğini anlayamaz.
  • Anahtar sözcükle doldurulmuş başlık: Ne kullanıcılar ne arama motorları için iyidir.
  • Hata durumunu unutmak: Hatalarla yeniden yüklenen bir form sayfası başlığında bunu söylemelidir.
  • Başlıkla ilgisiz bir sayfa başlığı: Sayfa başlığı ile ana başlık uyuşmalıdır.

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.