Sayfa Başlıkları ve ADA

Ekran okuyucunun ilk söylediği şey

Bir sayfa yüklendiğinde ekran okuyucu her şeyden önce başlığı duyurur. Çok sayıda sekmesi açık olanlar doğru sekmeyi bulmak için başlıklara bakar. Büyüteç kullananlar başlangıçta sayfa başlığını hiç görmeyebilir. "Ana sayfa" ya da "Adsız" gibi bir başlık bunların hiçbirine nerede olduklarını söylemez.

2.4.2 başarı ölçütü, web sayfalarının konuyu ya da amacı tanımlayan başlıklara sahip olmasını ister. Başlık, web sayfası için HTML <title> öğesidir; PDF gibi diğer biçimlerde ise eşdeğer belge başlığıdır. Tek sayfalık bir uygulamada başlık görünümle birlikte değişmelidir.

Bir belge ya da uygulama adı başlık olarak kullanılabilir; sayfanın daha büyük bir kümedeki yerini göstermek de iyi bir fikirdir, ancak bu zorunlu değil önerilen bir uygulamadır.

Kamu sitelerinde yanlış giden başlıklar

• Her sayfada aynı müdürlük adı.
• İçerik sisteminin ürettiği "Sayfa 4412" ya da "index" gibi başlıklar.
• Hangi aramanın ya da sonuçların hangi sayfasının olduğunu hiç söylemeyen dava ya da izin arama sonuçları.
• Tek sayfalık bir portalda başlığı ilk ekrandan kalan rotalar.

Her adımında benzersiz başlığı olan bir izin portalı, sayfaları yer imine ekleyen ya da bir görevliyle paylaşan çok sayıda insana da yardımcı olur.

Sonuçlar ve çok adımlı akışlar

Benzersiz bilgiyi öne, site adını sona koyun. Sayfalanmış sonuçlarda hangi sayfa olduğunu söyleyin.

<title>Mahkeme Kayıtları</title>

<title>"Yılmaz" için dava arama sonuçları, sayfa 2 / 7 | İlçe Mahkemesi</title>

Başlıkları şablondan üretin

Benzersiz kısmı öne, site adını sona koyun: başa konan uzun bir karşılama mesajı, başlığın yalnızca başını duyan kişiden yararlı sözcükleri saklar. Bu sıralama iyi uygulamadır, zorunluluk değildir. Başlıkları yerleşimden üretmek, hiçbir sayfanın başlıksız yayına çıkmamasını da sağlar:

<title>Riverton Belediyesi</title>   <!-- yerleşim dosyasında sabit -->

<!-- layout.html -->
<title>{% block title %}{% endblock %} | Riverton Belediyesi</title>

<!-- permit.html -->
{% block title %}Yapı ruhsatı başvurusu{% endblock %}

Tek sayfalık uygulamalar

Görünüm sayfa yüklenmeden değiştiğinde başlığın da değişmesi gerekir.

function CampsiteReservation() {
  return <h1>Kamp yeri ayırtın</h1>;   // başlık hâlâ "Devlet Parkları"
}

function CampsiteReservation() {
  useEffect(() => {
    document.title = "Kamp yeri ayırtın | Devlet Parkları";
  }, []);
  return <h1>Kamp yeri ayırtın</h1>;
}

Mobil uygulamalarda ekran başlıkları

Uygulamalarda her ekranın başlığı aynı rolü oynar. SwiftUI:

NavigationStack {
    PayWaterBillForm()
}

NavigationStack {
    PayWaterBillForm()
        .navigationTitle("Su faturası öde")
}

Jetpack Compose:

Scaffold { padding ->
    PayWaterBillForm(Modifier.padding(padding))
}

Scaffold(
    topBar = { TopAppBar(title = { Text("Su faturası öde") }) }
) { padding ->
    PayWaterBillForm(Modifier.padding(padding))
}

Nasıl test edilir ve kaçınılacak hatalar

1. Farklı şablonlardan on sayfa açın ve her biri için tarayıcı sekmesi ya da pencere başlığını okuyun. Her biri farklı ve bağlam dışında anlamlı mı?
2. Bir form hatası, bir adım değişikliği ve bir sonuç sayfası değişikliği tetikleyin. Başlık değişiyor mu?
3. İndirilebilir belgeleri kontrol edin: yalnızca dosya adına değil, PDF başlık özelliğine bakın.
4. Bir tarama çalıştırıp başlıkları dışa aktarın. Yinelenenleri ve "Adsız" gibi varsayılan değerleri arayın.

Bir tarayıcı başlıkları listeleyebilir, ama sayfayı tanımlayıp tanımlamadıklarını yalnızca bir insan söyleyebilir; bu yüzden ikisini birlikte kullanın.

Sık yapılan hatalar: tüm site için tek başlık, dosya adından üretilen başlıklar, bir uygulamada hiç değişmeyen başlıklar ve anahtar kelime doldurma.

ADA açısı ve yayın öncesi liste

PDF formlarının da bir belge başlığı olmalıdır ve yanlış olanı kolayca gözden kaçar. Başlıkları her içerik güncellemesinde formlar ve bildirimlerle birlikte gözden geçirin.

Şunlar tamamsa yayına alın:

• Her sayfa ve belgenin benzersiz, açıklayıcı bir başlığı var.
• Başlık görünümle, adımla ve sonuç sayfasıyla birlikte değişiyor.
• Başlıklar şablondan geliyor ve boş bırakılamıyor.

Dosyalardaki başlıklar için belgeler ve PDF sayfasına bakın.

Kaynaklar

• Understanding SC 2.4.2: Page Titled (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.