WCAG Başarı Kriterleri · Level A
WCAG 2.4.2: Sayfa Başlığı
WCAG 2.4.2, her web sayfasının konusunu veya amacını belirleyen, açıklayıcı ve anlamlı bir başlığa sahip olmasını gerektirir. Bu, özellikle ekran okuyuculara güvenen veya birden fazla sekmeyi yöneten kullanıcıların, kendilerini hızlıca konumlandırabilmelerini ve verimli bir şekilde gezinebilmelerini sağlar.
Bu Kuralın Anlamı
WCAG 2.4.2 Sayfa Başlığı, Kullanılabilirlik ilkesinin altında Seviye A başarı ölçütüdür. Şöyle der: "Web sayfalarının konu veya amacı tanımlayan başlıkları vardır." Pratikte bu, kullanıcıya sunulan her HTML belgesinin <head> bölümünün içinde bir <title> öğesi içermesi ve bu öğenin sayfanın içeriğini, işlevini veya sitedeki bağlamını anlamlı biçimde tanımlayan metin barındırması gerektiği anlamına gelir.
Ölçüt, her bir ayrı web sayfası için geçerlidir — bu sayfa statik bir HTML dosyası, dinamik olarak oluşturulan tek sayfalı uygulama (SPA) görünümü, bir modal sayfa veya çok adımlı bir sihirbazın bir adımı olabilir. Kullanıcının doğrudan gidebildiği ya da mevcut görünümün yerini alan her ayrı "ekran" kendi benzersiz ve açıklayıcı başlığını taşımalıdır.
Bir sayfa, <title> öğesi mevcut, boş olmayan ve sayfanın konusunu veya amacını yeterince tanımlayan metin içerdiğinde bu ölçütü geçer. Başlığın tüm internet genelinde benzersiz olması gerekmez, ancak yalnızca başlığı duyan veya okuyan bir kullanıcının ek bağlama ihtiyaç duymadan sayfanın ne hakkında olduğunu anlayabileceği kadar spesifik olmalıdır.
Bir sayfa, aşağıdaki durumlardan herhangi biri geçerliyse bu ölçütü geçemez: <title> öğesi <head> bölümünden tamamen yoksa; <title> öğesi mevcut ancak boşsa (hiç metin içermiyorsa); başlık yalnızca "Untitled Document", "New Page" gibi genel yer tutucu metinler veya açıklayıcı içerik olmaksızın yalnızca alan adının kendisini içeriyorsa; ya da tek sayfalı bir uygulama yeni bir mantıksal görünüme geçerken belge başlığını dinamik olarak güncellemiyorsa.
WCAG, bu ölçüt için Seviye A’da açık bir istisna tanımlamaz. Boyutu, hedef kitlesi veya amacı ne olursa olsun her web sayfasının açıklayıcı bir başlığı olmalıdır. Ancak Understanding belgesi, başlığın tek tanımlama aracı olmak zorunda olmadığını; yalnızca var olması ve temel bir yönlendirme ipucu sağlayacak kadar açıklayıcı olması gerektiğini netleştirir.
Neden Önemlidir
Sayfa başlığı, bir kullanıcı web sayfalarına geldiğinde veya sayfalar arasında gezinirken karşılaştığı ilk bilgi parçalarından biridir. Başlığın yokluğu veya yetersizliği, birkaç farklı kullanıcı grubu için engeller yaratır.
Ekran okuyucu kullanıcıları — çoğu kör veya ciddi derecede az gören kişilerden oluşur — sayfa yüklendiğinde veya odak yeni bir belgeye geçtiğinde sayfa başlığını anında duyurulur. Dünya Sağlık Örgütü’ne göre dünya genelinde yaklaşık 2,2 milyar kişinin bir tür görme bozukluğu olduğu düşünüldüğünde, bu duyuru doğru sayfanın yüklendiğini doğrulamanın ve içeriğini daha ileriye gitmeden önce anlamanın birincil yoludur. Anlamlı bir başlık olmadan, sekmeler arasında gezinirken veya bir aradan sonra bir sayfaya dönerken kör bir kullanıcı, yalnızca yeniden yönünü bulmak için tüm sayfa içeriğini baştan sona okumak zorunda kalır — karmaşık bir yerleşimde bu işlem dakikalar sürebilir.
Bilişsel ve öğrenme güçlüğü olan kullanıcılar net ve tutarlı sayfa başlıklarından büyük ölçüde fayda sağlar. Hafıza güçlüğü yaşayan bir kullanıcı bir araştırma oturumu sırasında birden fazla sekme açtığında, sekme başlığı çoğu zaman her sekme için görülebilen tek etikettir. "Hesap Ayarları — Accsible Panel" gibi bir başlık, doğru sekmeyi anında tanımlamalarını sağlar; "Sayfa" gibi bir başlık veya boş bir başlık ise içeriğini keşfetmek için her sekmeye tek tek tıklamalarını zorunlu kılar, bu da bilişsel yük ve potansiyel kafa karışıklığı yaratır.
Motor engelli kullanıcılar Dragon NaturallySpeaking gibi sesle kontrol yazılımlarına güvendiklerinde, sayfa başlıklarını, verdikleri gezinme komutlarından sonra hedefledikleri yere ulaştıklarını doğrulamak için kullanabilirler. Net başlıklar, tekrar tekrar düzeltme ve yeniden gezinme ihtiyacını azaltarak hem zaman hem de fiziksel çaba tasarrufu sağlar.
Somut bir senaryo düşünün: Türkiye’deki bir hastane hastası, birkaç adımda ilerleyen çevrimiçi randevu formunu doldurmak için yardımcı bir ekran okuyucu kullanıyor. Her adım, sayfa başlığını mevcut adımı yansıtacak şekilde güncellemezse — örneğin, "Adım 2 / 4: Kişisel Bilgiler — Randevu Alma — Hastane Adı" — hasta, bir sayfa yeniden yüklendikten sonra veya başka bir tarayıcı penceresine geçip geri döndüğünde ilerlemesini hızlıca doğrulamanın bir yoluna sahip olmaz. Nerede olduğunu anlamak için formun tamamını yeniden okuması gerekir; bu da zaten hasta veya stresli olabilecek biri için özellikle zahmetlidir.
Erişilebilirliğin ötesinde, sayfa başlıkları önemli bir SEO değeri taşır. Arama motorları, arama sonuçlarındaki listelemeler için birincil etiket olarak <title> öğesini kullanır. Açıklayıcı ve anahtar kelime açısından zengin bir başlık, tıklanma oranlarını ve bulunabilirliği artırır. WCAG 2.4.2’yi doğru uygulayan web siteleri, yalnızca engelli kullanıcılarına değil, aynı zamanda genel organik arama görünürlüklerine de fayda sağlar — erişilebilirliği aynı anda hem iş hem de teknik açıdan bir kazanım haline getirir.
İlgili Axe-core Kuralları
- document-title: Bu, WCAG 2.4.2 ile ilişkili birincil axe-core kuralıdır. Mevcut HTML belgesinin
<head>içinde bir<title>öğesi içerip içermediğini ve bu öğenin en azından boşluk olmayan bir miktar metin içerip içermediğini kontrol eder.<title>öğesi tamamen eksik olduğunda, mevcut olup da boş olduğunda veya yalnızca boşluk karakterleri içerdiğinde kural bir ihlal işaretler. Axe-core bunu WCAG 2.4.2 Seviye A’ya eşlenen kritik bir ihlal olarak raporlar. Kural sayfa yüklenirken otomatik olarak çalışır ve yapısal eksiklikleri güvenilir biçimde yakalar. - Neden manuel test de gereklidir: axe-core gibi otomatik araçlar bir
<title>öğesinin var olduğunu ve boş olmadığını doğrulayabilir, ancak başlığın anlamlı veya açıklayıcı olup olmadığını değerlendiremez.<title>aaa</title>veya<title>Untitled Document</title>içeren bir sayfa, öğe mevcut ve boş olmadığı için otomatik kuralı geçer, ancak WCAG 2.4.2’nin ruhunu açıkça ihlal eder. Başlığın sayfanın konusunu ve amacını doğru yansıtıp yansıtmadığını değerlendirmek için insan incelemesi gereklidir. Benzer şekilde, tek sayfalı uygulamalarda otomatik taramalar genellikle yalnızca ilk sayfa yükleme başlığını yakalar ve başlığın istemci tarafı rota değişikliklerinde güncellenmediği durumları kaçırabilir — bu geçişler manuel gezinme testi gerektirir.
Nasıl Test Edilir
- axe DevTools veya Lighthouse ile otomatik tarama: Hedef web sayfasını Chrome veya Firefox’ta açın. DevTools’u (F12) açın, axe DevTools paneline (yüklüyse) veya Lighthouse sekmesine gidin. Bir erişilebilirlik denetimi çalıştırın. axe sonuçlarında, "Critical" veya "Serious" kategorisi altında
document-titlekuralı ihlali olup olmadığına özellikle bakın. Lighthouse da Erişilebilirlik denetiminde eksik veya boş bir başlığı benzer şekilde işaretler. Raporunuz için sayfanın tam URL’sini ve başlık metnini (veya yokluğunu) not edin. Bu testi, hata sayfaları (404, 500) ve onay sayfaları dahil olmak üzere uygulamadaki her benzersiz rota veya görünüm için tekrarlayın. - Manuel tarayıcı incelemesi: Herhangi bir tarayıcıda, tarayıcı sekmesi etiketini inceleyin — sayfayı tanımlayan anlamlı ve açıklayıcı bir başlık göstermelidir. Sayfaya sağ tıklayın ve "Sayfa Kaynağını Görüntüle"yi seçin veya DevTools’u açıp Elements paneline gidin.
<head>bölümünü bulun ve uygun, genel olmayan metin içeriğine sahip bir<title>öğesinin mevcut olduğunu doğrulayın. Başlığın, görünen sayfa içeriğiyle ilgili olduğundan ve — çok sayfalı sitelerde — sayfanın benzersiz amacını yansıtacak şekilde diğer sayfaların başlıklarından farklı olduğundan emin olun. - NVDA + Firefox ile ekran okuyucu testi: Sayfayı Firefox ile açın ve NVDA’yı etkinleştirin. Sayfa yüklendiğinde NVDA sayfa başlığını hemen duyurmalıdır. Sayfadan ayrılıp geri dönün (Alt+Sol Ok ardından Alt+Sağ Ok kullanarak) ve doğru başlığın tekrar duyurulduğunu doğrulayın. Tek sayfalı bir uygulamada, istemci tarafı rota değişikliğini tetikleyin ve güncellenmiş başlık duyurusunu dinleyin. NVDA hiçbir şey okumazsa veya sayfa yüklenirken genel/yararsız bir ifade okursa, bu bir başarısızlıktır.
- VoiceOver + Safari (macOS/iOS) ile ekran okuyucu testi: VoiceOver’ı etkinleştirin (Mac’te Command+F5). Sayfayı yükleyin. VoiceOver, yükleme sırasında sayfa başlığını duyurur. Rotor’u (Control+Option+U) kullanın ve Web Spots veya Başlıklar listesine gidin — sayfanın üst kısmında gösterilen pencere başlığı,
<title>öğesi içeriğiyle eşleşmelidir. iOS’ta başlık Safari sekme değiştiricide görünür; açıklayıcı olduğunu doğrulayın. - JAWS + Chrome ile ekran okuyucu testi: Sayfayı JAWS çalışırken Chrome’da açın. JAWS, yükleme sırasında sayfa başlığını duyurur. JAWS Yardım penceresini açmak ve bildirilen sayfa başlığını doğrulamak için Insert+F1’e basın. Oturumunuz sırasında herhangi bir anda başlığı okumak ve SPA gezinme olaylarından sonra doğru şekilde güncellendiğini doğrulamak için Insert+T kullanın.
- Tek sayfalı uygulamada (SPA) rota değişikliği testi: SPA’nin farklı görünümleri arasında gezin (örneğin, ana sayfadan ürün sayfasına, oradan ödeme sayfasına). Her gezinmeden sonra tarayıcı sekmesi etiketini kontrol edin ve başlığın güncellendiğini doğrulamak için bir ekran okuyucu kullanın. Sekme etiketi, mevcut görünüm ne olursa olsun tüm oturum boyunca aynı kalıyorsa, bu, kendine özgü bir başlığı olmayan her görünüm için 2.4.2 başarısızlığıdır.
Nasıl Düzeltilir
Eksik title öğesi — Hatalı
<!DOCTYPE html>
<html lang='tr'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- No <title> element present -->
</head>
<body>
<h1>Ürünlerimiz</h1>
</body>
</html>Eksik title öğesi — Doğru
<!DOCTYPE html>
<html lang='tr'>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<!-- Title added: describes the page topic and includes the site name for context -->
<title>Ürünlerimiz — Accsible Mağaza</title>
</head>
<body>
<h1>Ürünlerimiz</h1>
</body>
</html>Genel yer tutucu başlık — Hatalı
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<!-- Generic title provides no useful context to the user -->
<title>Untitled Document</title>
</head>
<body>
<h1>Contact Us</h1>
</body>
</html>Genel yer tutucu başlık — Doğru
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8'>
<!-- Descriptive title: page function first, then site name -->
<title>Contact Us — Accsible Support</title>
</head>
<body>
<h1>Contact Us</h1>
</body>
</html>Rota değişiminde başlığı güncellemeyen tek sayfalı uygulama — Hatalı
<!-- React Router example: title is set only once at app root and never updated -->
<!DOCTYPE html>
<html lang='en'>
<head>
<title>My App</title>
</head>
<body>
<div id='root'></div>
<!-- JavaScript bundle loads React SPA; title never changes during navigation -->
</body>
</html>Rota değişiminde başlığı güncellemeyen tek sayfalı uygulama — Doğru
<!-- Use document.title in each route component or a head-management library -->
<!-- Example using React with react-helmet-async -->
<!-- In your ProductPage component: -->
<!-- import { Helmet } from 'react-helmet-async'; -->
<!-- <Helmet><title>{product.name} — Accsible Store</title></Helmet> -->
<!-- Or using plain JavaScript on each route render: -->
<script>
// Called whenever the SPA navigates to a new view
function updatePageTitle(pageTitle, siteName) {
document.title = pageTitle + ' — ' + siteName;
}
// Example: updatePageTitle('Shopping Cart', 'Accsible Store');
// Results in: <title>Shopping Cart — Accsible Store</title>
</script>Her adımda aynı başlığa sahip çok adımlı form — Hatalı
<!-- Step 1 -->
<title>Checkout — Accsible Store</title>
<!-- Step 2 (same title — user cannot distinguish steps) -->
<title>Checkout — Accsible Store</title>
<!-- Step 3 (same title again) -->
<title>Checkout — Accsible Store</title>Her adımda aynı başlığa sahip çok adımlı form — Doğru
<!-- Step 1: title reflects the current step's purpose -->
<title>Step 1 of 3: Shipping Address — Checkout — Accsible Store</title>
<!-- Step 2: clearly distinct and descriptive -->
<title>Step 2 of 3: Payment Details — Checkout — Accsible Store</title>
<!-- Step 3: confirmation step identified clearly -->
<title>Step 3 of 3: Order Review — Checkout — Accsible Store</title>Yaygın Hatalar
- Üretimde CMS veya framework varsayılan başlığını bırakmak: Birçok içerik yönetim sistemi (WordPress, Drupal, özel framework’ler) "Just another WordPress site" veya ham site URL’si gibi yer tutucu başlıklarla gelir. Geliştiriciler, başlık şablonunu yayına almadan önce yapılandırmayı unutur ve her sayfa yararsız veya birbirinin aynı bir başlıkla kalır. CMS ayarlarınızda başlık yapılandırmasını her zaman doğrulayın ve yayına almadan önce canlı bir URL’yi test edin.
- Her sayfa için başlık olarak yalnızca site adını kullanmak: Sitedeki her sayfada
<title>Accsible</title>ayarlamak,document-titleotomatik kontrolünü (öğe boş değil) geçer, ancak WCAG 2.4.2’nin açıklayıcı olma gerekliliğini karşılamaz. Her sayfanın, aynı sitedeki diğer sayfalardan ayırt edilmesini sağlayan bir başlığı olmalıdır. - Site adını, sayfaya özgü içerikten önce koymak:
<title>Accsible — Contact</title>deseni, ekran okuyucu kullanıcılarını, sayfanın ne hakkında olduğunu öğrenmeden önce marka adını dinlemeye zorlar. Önerilen desen<title>Contact — Accsible</title>şeklindedir — önce sayfa konusu, sonra site adı — böylece kullanıcılar en ilgili bilgiyi hemen alır. - Tek sayfalı uygulamalarda istemci tarafı gezinmeden sonra
document.titlegüncellemeyi unutmak: React, Vue ve Angular gibi framework’ler, rota değiştiğinde belge başlığını otomatik olarak güncellemez. Geliştiriciler her rota bileşenindedocument.title’ı açıkça ayarlamalı veya bir head yönetim kütüphanesi (react-helmet-async veya Vue Meta gibi) kullanmalıdır. Bunu yapmamak, ilk yüklemeden sonraki her SPA görünümünün aynı başlığı paylaşması anlamına gelir. - Boş veya yalnızca boşluk içeren title öğeleri kullanmak: Yalnızca boşluk veya satır sonu içeren bir
<title> </title>öğesi, yardımcı teknoloji kullanıcıları için işlevsel olarak eksik bir başlıkla aynıdır, ancak tarayıcı sekmesi bir hata vermek yerine yalnızca boş göründüğü için görsel QA’da gözden kaçabilir. Axe-core bunu işaretler, ancak manuel inceleyicilerin gözünden kaçabilir. - Hata sayfalarında (404, 500, doğrulama hataları) başlığı güncellememek: Hata sayfaları sıklıkla önceki sayfanın başlığını devralır veya genel bir site başlığına döner. 404 hatası tetikleyen bir ekran okuyucu kullanıcısının, önceki sayfanın başlığını değil, "Page Not Found — Accsible" ifadesini duyması gerekir ki, gezinmesinin başarısız olduğunu anlasın.
- Farklı içeriğe sahip sayfalarda yinelenen başlıklar kullanmak: Bir ürün listeleme sayfası ve bir ürün detay sayfası her ikisi de "Products — Accsible Store" başlığını taşıdığında, bilişsel engeli olan kullanıcılar veya birden fazla sekmeyi yöneten kullanıcılar bunları birbirinden ayırt edemez. Mantıksal olarak farklı her sayfanın, özgül içeriğini yansıtan benzersiz bir başlığı olmalıdır.
- Ham şablon değişken adlarını içeren dinamik olarak oluşturulan başlıklar: Sunucu tarafı oluşturma hataları, şablon değişkenleri işlenemediğinde
<title>{{page.title}} — MySite</title>gibi başlıklara yol açabilir. Bunlar boş olmayan kontrolünü geçer, ancak anlamlı hiçbir bilgi sağlamaz. Şablon oluşturma hatalarını yayına almadan önce yakalamak için CI/CD hattınıza otomatik başlık içeriği kontrolleri ekleyin. - Çok uzun veya anahtar kelimeyle doldurulmuş başlıklar: WCAG bir karakter sınırı belirlemez, ancak aşırı uzun başlıklar (60–70 karakterin üzerinde) tarayıcı sekmelerinde ve arama sonuçlarında kesilir ve ekran okuyucular en ilgili kısmı duyurmadan önce tüm ifadeyi okumak zorunda kalır. Başlıkları kısa, spesifik ve en önemli bilgiyi başa alacak şekilde tasarlayın.
- iframe belgelerinden başlıkları eksik bırakmak: Tam bir HTML belgesi yükleyen satır içi çerçeveler (
<iframe>) de anlamlı bir<title>öğesine sahip olmalıdır.iframeöğesinin kendisi çerçevenin amacını tanımlayan birtitleözniteliğine sahip olmalı iken, içine yüklenen belge de kendi<head>bölümünde bir<title>barındırdığında, çerçeve içeriğine giren yardımcı teknolojiler için ek fayda sağlar.
Türkiye’nin Erişilebilirlik Mevzuatıyla İlişkisi
21 Haziran 2025’te 32933 sayılı Resmî Gazete’de yayımlanan Türkiye Cumhurbaşkanlığı Genelgesi 2025/10, çok geniş bir kamu ve özel sektör dijital hizmet yelpazesi için bağlayıcı erişilebilirlik gereklilikleri getirir. WCAG 2.4.2 Sayfa Başlığı, Seviye A başarı ölçütüdür ve Seviye A uyumu bu genelge kapsamında zorunlu asgari düzeydir. Kapsamdaki kurumların, kamu kurumları ise bir yıl içinde, özel sektör kuruluşları ise iki yıl içinde Seviye A uyumunu sağlamaları gerekmektedir.
Genelge, WCAG 2.4.2’yi Türkiye’nin dijital ekonomisinin önemli bir kısmı için geçerli kılan geniş bir kurum yelpazesini kapsar. Kapsamdaki kurumlar arasında tüm kamu kurum ve kuruluşları, e-ticaret platformları, bankalar ve finans kuruluşları, hastaneler ve sağlık hizmeti sağlayıcıları, 200.000 veya daha fazla abonesi olan telekomünikasyon şirketleri, lisanslı seyahat acenteleri, özel ulaşım şirketleri ve Millî Eğitim Bakanlığı (MoNE) tarafından yetkilendirilmiş özel okullar yer alır.
Bu kuruluşlar için anlamlı bir sayfa başlığı sağlamamak, yalnızca iyi uygulamaların gözden kaçması değil — aynı zamanda düzenleyici uyumsuzluk riski anlamına gelir. Pratik sonuçları düşünün: ürün kategori sayfalarının hepsinin aynı genel başlığı paylaştığı bir Türk e-ticaret platformu veya randevu akışının her adımının aynı ayırt edilemeyen başlığı taşıdığı bir kamu hastanesinin randevu sistemi, genelgenin erişilebilirlik gerekliliklerini doğrudan ihlal ediyor olur. Düzenleyiciler veya şikâyetçiler, bu eksiklikleri zorunlu Seviye A standardının ihlali olarak gösterebilir.
WCAG 2.4.2’yi doğru uygulamak, genellikle yalnızca her sayfanın düzgün biçimlendirilmiş, açıklayıcı bir <title> öğesine sahip olmasını sağlayacak bir şablon düzeyi değişiklik gerektirdiğinden, mevcut en düşük çaba, en yüksek etki erişilebilirlik düzeltmelerinden biridir. 2025/10 sayılı genelgeye tabi kuruluşlar için sayfa başlıklarını ele almak, herhangi bir erişilebilirlik iyileştirme yol haritasında çözülmesi gereken ilk maddeler arasında olmalıdır — uygulaması basittir, doğrulanması kolaydır ve axe-core document-title kuralı tarafından doğrudan test edilebilir, bu da denetçilere veya düzenleyici otoritelere uyumu göstermeyi kolaylaştırır.
Türkçe konuşan kitlelere hizmet veren kuruluşlar ayrıca sayfa başlıklarının, sayfa içeriğiyle eşleşen doğru dilde sağlandığından emin olmalıdır; bu, Türkçe konuşan kullanıcıların ortamlarındaki ekran okuyucuların sayfa yüklenirken duyurulan başlığı doğru şekilde yorumlayıp telaffuz etmesini sağlamak için lang özniteliği gerekliliğini (WCAG 3.1.1) tamamlar.