WCAG 2.4.1: Blokları Atla

Bu Kuralın Anlamı

WCAG 2.4.1 Bypass Blocks şöyle der: "Birden fazla web sayfasında tekrar eden içerik bloklarının atlanmasını sağlayan bir mekanizma bulunur." Pratikte bu, birden fazla sayfada tutarlı biçimde görünen her türlü bağlantı grubu, gezinme menüsü, banner veya diğer içerik blokları için, kullanıcıların bunları atlayıp doğrudan o sayfaya özgü içeriğe geçmesini sağlayan bir yol olması gerektiği anlamına gelir.

En yaygın bilinen uygulama, sayfadaki ilk odaklanabilir öğe olarak yerleştirilen ve #main-content gibi bir parça tanımlayıcısı aracılığıyla ana içerik alanına bağlanan bir gezinmeyi atla bağlantısıdır. Ancak WCAG, HTML5 <main>, <nav> ve <header> öğeleri veya bunların ARIA karşılıkları gibi doğru yapılandırılmış landmark bölgeleri ve ekran okuyucu kullanıcılarının bölümler arasında atlamasına izin veren başlık yapıları da dahil olmak üzere diğer atlama mekanizmalarını da kabul eder.

Bir sayfa, aşağıdakilerden en az biri doğru olduğunda bu ölçütü geçer: bir atlama bağlantısı vardır ve çalışır durumdadır; sayfa, yardımcı teknolojilerin hızlı gezinme için ortaya çıkardığı anlamlı HTML5 landmark öğeleri kullanır; veya eşdeğer bir klavye kısayolu ya da sayfa içi gezinme mekanizması, kullanıcıların tekrar eden blokları atlamasına izin verir. Atlama bağlantısı varsayılan olarak görsel olarak gizlenmiş olabilir, ancak klavye odağı aldığında görünür hale gelmelidir ve etkinleştirildiğinde yalnızca görünüm alanını kaydırmakla kalmayıp klavye odağını gerçekten hedefe taşımalıdır.

Bir sayfa, şu durumlarda bu ölçütü geçemez: hiçbir atlama bağlantısı, hiçbir landmark yapısı ve başka hiçbir mekanizma yoksa; bir atlama bağlantısı vardır ancak display:none veya visibility:hidden ile kalıcı olarak gizlenmiştir (odaklanamaz hale gelir); atlama bağlantısının hedef çapasının DOM'da bir karşılığı yoksa; veya bağlantı vardır ama odağı taşımıyorsa ve klavye kullanıcıları her bir gezinme öğesini tek tek sekmeyle geçmek zorunda kalıyorsa. WCAG, tekrar eden blok olmayan sayfalar için — örneğin, gezinme başlığı bulunmayan tek sayfalık bir belge — bir istisna tanır, ancak bu istisna dardır ve gerçek dünyadaki web siteleri için nadiren geçerlidir.

Neden Önemlidir

Bu ölçüt doğrudan birkaç kullanıcı grubunu etkiler. Yalnızca klavye kullanan kullanıcılar — tekrarlayan zorlanma yaralanması, felç veya titreme gibi motor bozuklukları olan kişiler dahil — etkileşimli öğeler arasında gezinmek için tamamen Tab tuşuna basarak hareket eder. Bir atlama mekanizması olmadan, ziyaret ettikleri her sayfada ilk benzersiz içeriğe ulaşmak için Tab tuşuna onlarca kez basmak zorundadırlar. 10 ila 20 bağlantı içeren tipik bir web sitesi gezinme çubuğu, yüzlerce sayfa ziyaretiyle çarpıldığında önemli bir fiziksel ve zamansal yük haline gelir.

Ekran okuyucu kullanıcıları (kör veya az gören kişiler) kendilerini konumlandırmak ve bir sayfanın bölümleri arasında atlamak için landmark bölgelerine ve başlıklara güvenir. Modern ekran okuyucular (JAWS, NVDA, VoiceOver) landmark ve başlıklar arasında gezinmek için kendi kısayol tuşlarını sunsa da, bu kısayollar yalnızca sayfa doğru yapılandırıldığında çalışır. Landmark'ı ve atlama bağlantısı olmayan bir sayfa, her seferinde sayfa yüklendiğinde, tekrar eden gezinme dahil olmak üzere, her öğenin en baştan doğrusal olarak okunmasını zorunlu kılar.

Gerçek bir senaryoyu düşünün: Türkiye'de görme engelli bir vatandaş, vergi beyannamesi vermek için bir e-devlet portalını ziyaret ediyor. Portalda 18 bağlantılı bir üst gezinme çubuğu, 4 bağlantılı bir kırıntı yolu ve 12 bağlantılı ikincil bir kenar çubuğu var — form alanlarına ulaşmadan önce toplam 34 Tab basışı. Bir atlama mekanizması olmadan, bu kullanıcı çok adımlı sürecin her sayfasında bu 34 öğenin tamamında gezinmek zorunda kalır. Doğru uygulanmış bir atlama bağlantısı bunu tek bir tuş vuruşuna indirir.

Bilişsel erişilebilirlik de bir faktördür: dikkatle ilgili durumları olan kullanıcılar, tekrar eden, dikkat dağıtıcı gezinme öğelerini işlemeye gerek kalmadan doğrudan ilgili içeriğe geçebilmekten fayda sağlar. Engellilik erişiminin ötesinde, iyi yapılandırılmış landmark bölgeleri SEO'yu da iyileştirir; çünkü arama motoru tarayıcıları, içerik hiyerarşisini ve alaka düzeyini anlamak için belge yapısını kullanır. Erişilebilir gezinme mimarisi ve net landmark yapısı, daha iyi indekslemeye ve potansiyel olarak daha yüksek arama sıralamalarına katkıda bulunur.

İlgili Axe-core Kuralları

• bypass: Bu kural, sayfanın tekrar eden gezinme bloklarını atlamak için herhangi bir mekanizma sağlayıp sağlamadığını kontrol eder. Axe, mevcut bir sayfa içi çapayı hedefleyen bir atlama bağlantısının varlığını, ARIA landmark rolleri (role='main', role='navigation' vb.) veya HTML5 landmark öğeleri (<main>, <nav>, <header>, <footer>, <aside>) ile birden fazla landmark'ı ayırt edilebilir kılan ARIA aria-label veya aria-labelledby özniteliklerinin varlığını inceler. Bu mekanizmaların hiçbirinin bulunmadığı durumlarda kural bir ihlal işaretler. Bu kuralın bazı durumlarda manuel doğrulama gerektirdiğini unutmayın — örneğin, axe bir atlama bağlantısının var olduğunu tespit edebilir ancak etkinleştirildiğinde klavye odağını doğru konuma taşıdığını otomatik olarak doğrulayamaz.
• skip-link: Bu kural özellikle atlama bağlantılarını hedef alır ve bir atlama bağlantısının href özniteliğiyle (örneğin, #main-content) referans verilen hedef öğenin DOM'da gerçekten var olup olmadığını ve klavye odağıyla erişilebilir olup olmadığını kontrol eder. Bir atlama bağlantısı var olmayan bir ID'ye işaret ediyorsa veya hedef öğe odaklanabilir değilse (etkileşimli olmayan bir öğe olduğunda tabindex özniteliğinden yoksunsa), kural bir ihlal işaretler. Bu, HTML'ye bir atlama bağlantısı ekleyip ana içerik öğesine karşılık gelen id özniteliğini eklemeyi unutma gibi yaygın hataları yakalar.
• tabindex: Bu kural, doğal DOM sırasından saparak özel bir sekme sırası oluşturan 0'dan büyük tabindex değerine sahip öğeleri işaretler. tabindex='0', etkileşimli olmayan öğeleri odaklanabilir hale getirmek için (örneğin, bir atlama bağlantısı hedefi olan <div>) meşru ve gereklidir; ancak tabindex='1', tabindex='2' vb. kullanımı, tüm sayfa boyunca beklenen Tab sırasını bozar ve atlama mekanizmalarını öngörülemez veya etkisiz hale getirebilir. Otomatik araçlar pozitif tabindex değerlerinin varlığını tespit edebilir, ancak bir insan testçinin, ortaya çıkan sekme sırasının mantıklı olup olmadığını ve atlama bağlantısının odaklanabilir öğeler dizisinde ilk sırada kalıp kalmadığını doğrulaması gerekir.

Nasıl Test Edilir

1. Otomatik tarama: Sayfada axe DevTools (tarayıcı uzantısı) veya Lighthouse'u (Chrome DevTools > Lighthouse > Accessibility) çalıştırın. Özellikle bypass, skip-link ve tabindex kuralları altındaki ihlallere bakın. Axe DevTools'ta sonuçları bu kural kimliklerine göre filtreleyin. Lighthouse'ta erişilebilirlik denetiminin "Navigation" bölümünü kontrol edin. "Needs Review" olarak işaretlenen öğeleri not edin — axe bazı atlama kontrollerini manuel onay gerektirir olarak işaretler.
2. Klavye testi (tüm tarayıcılar): Sayfayı, ekran okuyucu etkin değilken bir tarayıcıda açın. Bir kez Tab tuşuna basın. Odaklanan ilk öğenin bir atlama bağlantısı olduğunu doğrulayın (daha önce ekran dışında ise bu noktada görsel olarak görünebilir). Atlama bağlantısını etkinleştirmek için Enter'a basın. Klavye odağının ana içerik alanına taşındığını doğrulayın — bir sonraki Tab basışı, ilk gezinme bağlantısına değil, ana içerik içindeki ilk etkileşimli öğeye ulaşmalıdır. Odağınız taşınmıyorsa, atlama bağlantısı bozuk demektir.
3. NVDA + Firefox: NVDA'yı başlatın ve sayfayı Firefox'ta açın. Landmark'ları kontrol etmek için Insert+F7 kısayoluna basarak Öğe Listesi'ni açın. Alternatif olarak, landmark bölgeleri arasında atlamak için D tuşuna basın ve bir main landmark'ının mevcut ve açıkça etiketlenmiş olduğunu doğrulayın. Başlıklar arasında gezinmek için H tuşuna basın ve başlık yapısının sayfa bölümlerini tanımlanabilir kıldığını doğrulayın. Atlama bağlantısına Tab ile gidin ve Enter ile etkinleştirin, ardından NVDA'nın ana bölge içindeki içerikleri duyurduğunu doğrulayın.
4. VoiceOver + Safari (macOS/iOS): VoiceOver'ı etkinleştirin (Mac'te Command+F5). Rotor'u (Control+Option+U) kullanarak Landmark menüsünü açın ve adlandırılmış landmark bölgelerinin göründüğünü doğrulayın. Atlama bağlantısına Tab ile gidin ve Enter'a basın; VoiceOver'ın, etkinleştirmeden hemen sonra ana içerik alanındaki içeriği okuduğunu doğrulayın. iOS'ta, Rotor hareketini kullanarak Landmark'lara geçin ve aralarında kaydırma hareketiyle gezin.
5. JAWS + Chrome: JAWS etkin durumdayken, ana içerik landmark'ına doğrudan atlamak için Q tuşuna basın. JAWS'ın ana bölgeye girildiğini duyurduğunu doğrulayın. Landmark'ları listelemek için Insert+F3 tuşlarına basın ve uygun etiketleri doğrulayın. Sayfanın başından Tab ile ilerleyin ve atlama bağlantısının "Ana içeriğe atla" gibi erişilebilir bir adla ilk duyurulan öğe olduğunu doğrulayın.
6. Odak hedefinin doğrulanması: Atlama bağlantısının href değerini (örneğin, #main-content) inceleyin. Tarayıcınızın geliştirici araçlarını kullanarak DOM'da id='main-content' olan bir öğenin var olduğunu doğrulayın. Bu öğe bir <div> veya başka bir etkileşimli olmayan kapsayıcı ise, sekme sırasına eklenmeden programatik olarak odaklanabilir olması için tabindex='-1' özniteliğine sahip olduğunu doğrulayın.

Nasıl Düzeltilir

Eksik atlama bağlantısı — Yanlış

<!-- Navigation appears first with no bypass mechanism -->
<div class='nav-wrapper'>
  <a href='/home'>Home</a>
  <a href='/about'>About</a>
  <a href='/services'>Services</a>
  <a href='/contact'>Contact</a>
</div>
<div class='content'>
  <h1>Welcome</h1>
  <p>Page content here.</p>
</div>

Eksik atlama bağlantısı — Doğru

<!-- Skip link is the first focusable element; visually hidden until focused -->
<a href='#main-content' class='skip-link'>Skip to main content</a>

<nav aria-label='Primary navigation'>
  <a href='/home'>Home</a>
  <a href='/about'>About</a>
  <a href='/services'>Services</a>
  <a href='/contact'>Contact</a>
</nav>

<!-- tabindex='-1' allows the div to receive programmatic focus without
     entering the natural tab order -->
<main id='main-content' tabindex='-1'>
  <h1>Welcome</h1>
  <p>Page content here.</p>
</main>

Var olmayan hedefe sahip atlama bağlantısı — Yanlış

<!-- The skip link exists but points to an ID that is not in the DOM -->
<a href='#content' class='skip-link'>Skip to main content</a>

<nav>...navigation links...</nav>

<!-- The id here is 'main', not 'content' — the skip link target is broken -->
<div id='main'>
  <h1>Page Title</h1>
</div>

Var olmayan hedefe sahip atlama bağlantısı — Doğru

<!-- href value exactly matches the id of the target element -->
<a href='#main-content' class='skip-link'>Skip to main content</a>

<nav>...navigation links...</nav>

<!-- id matches the href fragment; tabindex='-1' ensures focus is received -->
<main id='main-content' tabindex='-1'>
  <h1>Page Title</h1>
</main>

Kalıcı olarak gizlenmiş atlama bağlantısı — Yanlış

<!-- display:none removes the element from the accessibility tree entirely -->
<a href='#main-content' style='display:none'>Skip to main content</a>

<!-- visibility:hidden also hides from screen readers and keyboard -->
<a href='#main-content' style='visibility:hidden'>Skip to main content</a>

Kalıcı olarak gizlenmiş atlama bağlantısı — Doğru

<!-- CSS moves the link off-screen visually but keeps it in the tab order.
     On :focus, it becomes visible so sighted keyboard users can see it. -->
<style>
  .skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
  }
  .skip-link:focus {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
  }
</style>

<a href='#main-content' class='skip-link'>Skip to main content</a>

Landmark yapısı yok — Yanlış

<!-- Generic divs with no semantic role — screen readers cannot identify regions -->
<div class='header'>...logo and nav...</div>
<div class='sidebar'>...secondary links...</div>
<div class='page-body'>...main content...</div>
<div class='footer'>...footer links...</div>

Landmark yapısı yok — Doğru

<!-- HTML5 semantic elements expose landmark roles to assistive technologies.
     Multiple nav elements are distinguished with aria-label. -->
<header>
  <nav aria-label='Primary navigation'>...main nav links...</nav>
</header>
<aside aria-label='Related resources'>...secondary links...</aside>
<main id='main-content' tabindex='-1'>...main content...</main>
<footer>
  <nav aria-label='Footer navigation'>...footer links...</nav>
</footer>

Yaygın Hatalar

• Atlama bağlantısını, hem görsel görünümden hem de erişilebilirlik ağacından tamamen kaldırarak tüm kullanıcılar için tamamen işlevsiz hale getiren display:none veya visibility:hidden ile gizlemek yerine ekran dışına taşıyan bir CSS tekniği kullanmamak.
• href='#main-content' ile bir atlama bağlantısı ekleyip, hedef öğede buna karşılık gelen id='main-content' özniteliğini atlayarak, bağlantının etkinleştirildiğinde hiçbir şey yapmamasına neden olmak.
• Atlama bağlantısını, tabindex='-1' eklemeden (örneğin bir <div> veya <section> gibi) etkileşimli olmayan bir kapsayıcı öğeye yönlendirmek; bu durumda tarayıcılar görünüm alanını kaydırır ancak klavye odağını hedefe taşımaz.
• Atlama bağlantısını DOM'daki ilk odaklanabilir öğe yerine, örneğin logodan sonra veya ilk gezinme bağlantısından sonra yerleştirmek; bu, kullanıcıların bağlantıya ulaşmak için yine de içerikte sekme yapmasını gerektirdiğinden amacını boşa çıkarır.
• Sayfanın herhangi bir yerinde pozitif tabindex değerleri (örneğin, tabindex='1') kullanmak; bu, sekme sırasını öngörülemez biçimde yeniden düzenler ve atlama bağlantısını beklenen ilk konumundan uzaklaştırabilir.
• Sayfada birden fazla gezinme bölgesi (birincil gezinme, kırıntı yolu, altbilgi gezinmesi) varken yalnızca isimsiz bir <nav> landmark'ı dahil etmek; bu, ekran okuyucu kullanıcılarının landmark gezinme kısayollarını kullanarak bunları birbirinden ayırt etmesini imkansız hale getirir.
• Tüm ekran okuyucu kullanıcılarının landmark kısayollarını bildiği ve kullandığı varsayımıyla yalnızca landmark yapısına güvenmek ve bir atlama bağlantısı sağlamamak — ekran okuyucu kullanmayan gören klavye kullanıcıları, yalnızca landmark'lardan fayda sağlayamaz ve görünür bir atlama bağlantısına ihtiyaç duyar.
• Sayfanın tamamını, gezinme, başlıklar ve altbilgiler dahil, tek bir <main> öğesi içine sarmak yerine, <main>'i yalnızca sayfanın benzersiz içeriğiyle sınırlamamak.
• Birden fazla gezinme landmark'ı varken, gezinme içeren bir <div> üzerinde role='navigation' kullanıp aria-label sağlamamak; bu, ekran okuyucuların yalnızca "navigation" duyurmasına ve bölgeleri ayırt etmenin mümkün olmamasına neden olur.
• Atlama bağlantısını statik bir HTML prototipinde doğru şekilde uygulayıp, JavaScript framework'ü ile render sırasında (örneğin, React, Angular, Vue) kaybetmek; çünkü atlama bağlantısı bileşeni kök yerleşime dahil edilmemiştir veya istemci tarafı hydration sırasında koşullu olarak kaldırılmaktadır.

Türkiye'nin Erişilebilirlik Mevzuatıyla İlişkisi

Türkiye'nin 2025/10 sayılı Cumhurbaşkanlığı Genelgesi, 21 Haziran 2025 tarihli ve 32933 sayılı Resmî Gazete'de yayımlanarak, WCAG 2.1 Seviye AA ve WCAG 2.2 Seviye A uyum standartlarına dayalı zorunlu web ve mobil erişilebilirlik gerekliliklerini belirlemiştir. WCAG 2.4.1 Bypass Blocks, Seviye A ölçütü olup, Genelge kapsamındaki en temel gereklilikler arasında yer alır — yani, kapsamdaki hiçbir kurumun dijital hizmetlerinin bu taban seviyesinin altına düşmemesi gerekir.

Genelge, kamu ve özel sektörde geniş bir kurum yelpazesini kapsar. Kamu kurumları — bakanlıklar, belediyeler, devlet kurumları ve kamuya bağlı kuruluşlar dahil — Genelge'nin yürürlük tarihinden itibaren bir yıl içinde tam uyum sağlamakla yükümlüdür. Düzenlemeye tabi özel sektör kuruluşları için ise iki yıllık bir uyum süresi öngörülmüştür. Kapsamdaki özel sektör kategorileri arasında e-ticaret platformları, bankalar ve finans kuruluşları, hastaneler ve sağlık hizmeti sağlayıcıları, 200.000 ve üzeri abonesi olan telekomünikasyon işletmecileri, 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 WCAG 2.4.1'in uygulanmaması, web sitelerinin standardın en temel seviyesinde dahi uyumsuz olduğu anlamına gelir. İşlevsel bir gezinmeyi atla mekanizmasından yoksun bir kamu portalı, çevrimiçi bankacılık platformu, hastane randevu sistemi veya e-ticaret ödeme akışı, Genelge'nin gerekliliklerini doğrudan ihlal eder. Klavye ile gezinmenin motor engelli kullanıcılar için temel olduğu ve ekran okuyucu kullanılabilirliğinin büyük ölçüde landmark yapısına bağlı olduğu düşünüldüğünde, bu ölçüt erişilebilirlik denetimlerinde ve düzenleyici değerlendirmelerde önemli bir ağırlık taşır.

Uyum hazırlıkları kapsamında iç erişilebilirlik denetimleri yapan veya üçüncü taraf değerlendirmeleri talep eden kuruluşlar, WCAG 2.4.1'i ilk aşama maddesi olarak ele almalıdır — uygulanması en kolay kazanımlardan biri ve klavye ile yardımcı teknoloji erişimine güvenen kullanıcılar için en etkili olanlardan biridir. Bu ölçütü ele almamak, düzenleyici incelemelerde özellikle temel bir uyumsuzluk olarak belirtilerek, kuruluşun Genelge kapsamındaki genel uyum durumunu olumsuz etkileyebilir.