Bu kural ne anlama geliyor

WCAG 2.4.2, her web sayfasının HTML <head> içinde <title> öğesiyle tanımlanmış açıklayıcı bir başlığa sahip olmasını gerektirir. Başlık, sayfanın konusunu veya amacını tanımlamalı ve kullanıcıların tüm sayfa içeriğini okumadan nerede olduklarını anlamalarına yardımcı olmalıdır.

Sayfa başlıkları, bir sayfa yüklendiğinde ekran okuyucuların duyurduğu ilk bilgidir. Tarayıcı sekmelerinde, yer imlerinde, arama motoru sonuçlarında ve geçmiş listelerinde görüntülenir. Açık ve benzersiz bir başlık, yönelim ve gezinme için önemlidir.

Neden önemlidir

Ekran okuyucu kullanıcıları herhangi bir içerikten önce sayfa başlığını duyar. Başlıklar eksik veya genel olduğunda (örneğin "Başlıksız" veya "Sayfa"), kullanıcılar birden fazla açık sekmeyi birbirinden ayırt edemez veya doğru sayfaya ulaşıp ulaşmadıklarını belirleyemez. Bu özellikle çok sayıda açık sekmesi olan veya tarayıcı geçmişinde gezinen kullanıcılar için sorunludur.

Açıklayıcı sayfa başlıkları tüm kullanıcılar için kullanılabilirliği arttırır. Yer imi oluşturma, arama sonuçlarında görüntüleme ve tarayıcı sekmelerini hızla tarama konularında yardımcı olur. Bilişsel engelli kullanıcılar için net başlıklar karışıklığı azaltır ve yol bulmaya destek olur.

İlgili axe-core kuralları

document-title — Her HTML belgesinin boş olmayan bir <title> öğesi içermesini doğrular.

Nasıl test edilir

Tarayıcı sekmesinde açıklayıcı bir başlığın görüntülenip görüntülenmediğini kontrol edin.
Sayfa kaynağını görüntüleyin ve <title> öğesinin <head> içinde mevcut olduğunu ve anlamlı metin içerdiğini doğrulayın.
axe-core çalıştırın ve document-title ihlallerini kontrol edin.
Sayfalar arasında gezinin ve her başlığın benzersiz olduğunu ve belirli sayfa içeriğini tanımladığını onaylayın.

Tek sayfa uygulamaları için rota değiştiğinde başlığın güncellendiğini doğrulayın.
Bir ekran okuyucu ile test edin — başlık, sayfa yüklemesinde duyurulan ilk şey olmalıdır.

Nasıl düzeltilir

Her sayfanın site bağlamında sayfayı tanımlayan benzersiz ve açıklayıcı bir başlığa ihtiyaçı vardır.

Temel sayfa başlığı

<!-- Yanlış: Eksik veya genel başlık -->
<head>
  <title>Sayfa</title>
</head>

<!-- Yanlış: Her sayfada aynı başlık -->
<head>
  <title>Web Sitem</title>
</head>

<!-- Doğru: Açıklayıcı, sayfaya özel başlık -->
<head>
  <title>Erişilebilirlik Denetim Raporu — Inculva Panel</title>
</head>

<!-- Doğru: Kalip — Sayfa Adı - Site Adı -->
<head>
  <title>Bize Ulaşın - Inculva</title>
</head>

SPA'larda dinamik başlık güncellemeleri

// React: Rota değisikliğinde belge başlığını güncelleme
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

function useDocumentTitle(title) {
  useEffect(() => {
    document.title = title ? `${title} — Inculva` : 'Inculva';
  }, [title]);
}

// Bir sayfa bileşeninde kullanım
function DenetimSayfası() {
  useDocumentTitle('Erişilebilirlik Denetim Raporu');
  return <main>...</main>;
}

Sunucu tarafında başlık oluşturma

<!-- Astro / Next.js kalıbı -->
---
const sayfaBasligi = `${makale.başlık} — Inculva Bilgi Bankası`;
---
<html>
  <head>
    <title>{sayfaBasligi}</title>
  </head>
  <!-- ... -->
</html>

Sık yapılan hatalar

Her sayfada aynı başlığı kullanmak — başlıklar benzersiz olmalı ve belirli sayfa içeriğini tanımlamalıdır.
Başlık olarak yalnızca site adını kullanıp sayfaya özel konuyu dahil etmemek.
<title> öğesini boş bırakmak veya "Başlıksız Belge" gibi yer tutucu metin kullanmak.
Tek sayfa uygulamalarında rota değiştiğinde belge başlığını güncellememek.
En önemli bilgiyi başlığın sonuna yerleştirmek — ekran okuyucu kullanıcıları önce başlangıcı duyar, bu nedenle sayfaya özel kısmı site adından önce koyun.
Aşırı uzun başlıklar kullanmak (60-70 karakterden fazla) — tarayıcı sekmelerinde ve arama sonuçlarında kesilir.

2.4.2 Sayfa Başlığı