WCAG 1.3.4: Yönlendirme

Bu Kuralın Anlamı

WCAG 1.3.4 Orientation, WCAG 2.1 ile tanıtılan ve WCAG 2.2’ye taşınan Seviye AA ölçütüdür. İçeriğin, belirli bir yönlendirmeye—yalnızca dikey (portre) veya yatay (manzara)—kilitlenmemesini şart koşar; bunun tek istisnası, söz konusu yönlendirmenin içeriğin işlevi için zorunlu olmasıdır. Pratikte bu, web sayfaları ve web tabanlı uygulamaların, kullanıcının cihazı dikey ya da yatay tutmasına bakılmaksızın, ya da yönlendirmenin cihazın işletim sistemi veya kullanıcının kendi tercihleri tarafından kontrol edilmesine bakılmaksızın, doğru tepki vermesi ve tamamen kullanılabilir kalması gerektiği anlamına gelir.

Bu ölçüt, geliştiricilerin CSS media query’leri, JavaScript veya cihaz API’lerini kullanarak içeriği bilerek tek bir yönlendirmeyle sınırladığı durumları hedefler. Yaygın bir ihlal, portre modunda tüm etkileşimli içeriği aynı anda gizler veya devre dışı bırakırken “Lütfen cihazınızı yatay moda çevirin” gibi bir mesaj göstermektir. Diğer bir ihlal, bir web uygulamasının CSS transform uygulayarak veya görüntü alanını zorla döndürerek kullanıcının cihaz yönlendirme ayarını geçersiz kılmasıdır.

Geçer sayılan durumlar: İçerik hem portre hem manzara yönlendirmelerinde erişilebilirdir. Tüm metin, etkileşimli öğeler, formlar, gezinme ve medya, cihazın yönlendirmesinden bağımsız olarak görünür ve kullanılabilir kalır. Yerleşim, CSS Flexbox, CSS Grid veya media query’ler gibi duyarlı tasarım teknikleri kullanılarak uyum sağlayabilir; ancak hiçbir şey yalnızca yönlendirmeye dayanarak kaldırılmaz veya kullanılamaz hale getirilmez.

Başarısız sayılan durumlar: İçeriğin bir yönlendirmede etkileşimi gizlemesi, devre dışı bırakması veya engellemesi; kullanıcılara çalışan bir alternatif sunmadan cihazlarını döndürmelerini söyleyen mesajlar; DeviceOrientationEvent veya screen.orientation dinleyip ardından arayüzün bölümlerini kilitleyen veya devre dışı bırakan JavaScript; ya da kritik içerik üzerinde engelleyici bir katman göstermek veya display: none uygulamak için @media (orientation: portrait) kullanan CSS.

Zorunlu istisna: WCAG, bazı içeriklerin doğası gereği yönlendirmeye özgü bir amaca sahip olduğunu kabul eder. Bir piyano klavyesi uygulaması, portre yerleşimi müzikal olarak işe yarayacak kadar tuş gösteremeyeceği için meşru olarak manzara modunu gerektirebilir. Yatay bir çekin kamerayla görüntülenmesine dayanan bir banka çek yatırma özelliği manzara modunu gerektirebilir. Bir sanal gerçeklik başlığı arayüzü çalışmak için sabit bir yönlendirme gerektirebilir. Ancak “zorunlu” sayılmanın eşiği yüksektir—yalnızca geliştirici kolaylığı veya estetik tercih bu kapsama girmez. İstisna, bir tasarım tercihinden değil, bizzat içeriğin temel bir gereksiniminden kaynaklanmalıdır.

Neden Önemlidir

Yönlendirme kısıtlamaları, fiziksel ve motor engelli kişileri orantısız şekilde etkiler. Tabletini tekerlekli sandalyesinin kol dayanağına sabit portre konumunda monte etmiş bir kullanıcıyı düşünün. Cihazı fiziksel olarak eğemez; bu nedenle manzara yönlendirmesi gerektiren herhangi bir içerik onlar için tamamen erişilemez hale gelir. Bu, varsayımsal bir uç durum değildir—yardımcı teknoloji cihazlarının sabit yönlendirmelerde monte edilmesi, serebral palsi, omurilik yaralanmaları, ALS veya şiddetli artrit gibi durumları olan kişiler için yaygın bir uyum düzenlemesidir.

Monte edilmiş cihazların ötesinde, birçok kullanıcı engellilikle ilgisi olmayan nedenlerle işletim sisteminin yönlendirme kilidi özelliğine güvenir. Yatakta uzanan bir kullanıcı, ekranın sürekli dönmesini engellemek için telefonunu portreye kilitleyebilir. İç kulak ve dengeyi etkileyen bir durum olan vestibüler bozukluğu olan bir kullanıcı, yönlendirme değişikliklerinin neden olduğu ani yerleşim kaymalarını şaşırtıcı veya fiziksel olarak mide bulandırıcı bulabilir. Bu kullanıcılardan içeriğinize erişmek için cihaz yönlendirme kilidini açmalarını istemek, gereksiz ve ayrımcı bir engel yaratır.

Bilişsel erişilebilirlik de bir faktördür. Bilişsel engelli kullanıcılar, tutarlı ve öngörülebilir yerleşimlerden sıklıkla fayda görür. İçeriği aniden engelleyen veya cihazın beklenen içerik yerine uyarı benzeri bir mesaj göstermesine neden olan bir uygulama, özellikle cihazlarının neden uyarı gösterdiğini anlamayabilecek kullanıcılar için kafa karıştırıcı ve ürkütücü olabilir.

Kullanılabilirlik ve iş açısından bakıldığında, yönlendirme kısıtlamaları tüm kullanıcılara zarar verir. Mobil web trafiğinin önemli bir kısmı portre modunda gerçekleşir ve bir siteyi manzara ile sınırlamak, anında terk edilmeye yol açabilir. Arama motorları ayrıca mobil uyumluluğu ve kararlı yerleşim davranışını da içeren Core Web Vitals’ı giderek daha fazla sıralama algoritmalarına dahil etmektedir; bu da yönlendirme ile ilgili sorunların SEO performansı ve organik trafik üzerinde ölçülebilir olumsuz etkileri olabileceği anlamına gelir.

Dünya genelinde, Dünya Sağlık Örgütü’ne göre yaklaşık 1,3 milyar insan bir tür engellilikle yaşamaktadır. Bu grubun anlamlı bir bölümü, internete erişmek için birincil veya tek araç olarak mobil cihazları kullanmaktadır; bu da mobil yönlendirme erişilebilirliğini özellikle önemli kılar.

İlgili Axe-core Kuralları

WCAG 1.3.4 Orientation, manuel test gerektirir. Yönlendirme kısıtlamalarını güvenilir şekilde tespit eden otomatik bir axe-core kuralı yoktur; çünkü ihlal, çalışma zamanı davranışına, koşullu render mantığına ve bir cihazın fiziksel durumuna bağlıdır—bunların hiçbiri statik DOM analizi veya otomatik sayfa taramasıyla değerlendirilemez. Aşağıdakiler, otomasyonun neden yetersiz kaldığını ve manuel testçilerin nelere dikkat etmesi gerektiğini açıklar:

• Otomatik axe-core kuralı yok (manuel test zorunlu): axe-core, Lighthouse veya IBM Equal Access Checker gibi otomatik erişilebilirlik tarayıcıları, DOM ve CSSOM’u tek bir anda analiz eder. Bir cihazın döndürülmesini simüle edemez, screen.orientation değiştiğinde yerleşime ne olduğunu değerlendiremez veya bir CSS @media (orientation: landscape) bloğunun kritik içeriği gizleyip gizlemediğini belirleyemez. Bir tarayıcı, test ettiği yönlendirmede tüm öğelerin mevcut ve teknik olarak görünür olduğunu görebilir; ancak bunların yarısının alternatif yönlendirmede kaybolduğunu bilemez. Bu nedenle WCAG 1.3.4, manuel test gerektiren bir ölçüt olarak sınıflandırılır—hiçbir araç, gerçek bir cihazı döndürmenin veya bir tarayıcının geliştirici araçlarında döndürmeyi simüle etmenin yerini tutamaz.
• JavaScript yönlendirme kilidi tespiti: screen.orientation.lock() çağıran veya içeriği yönlendirmek ya da devre dışı bırakmak için window.addEventListener('orientationchange', ...) dinleyen betikler, statik analizle tespit edilemez. Bir linter, bu API’lerin kaynak kodda kullanımını işaretleyebilir; ancak ortaya çıkan davranışın, zorunlu istisna uygulanıp uygulanmadığına dair insan yargısı olmadan bir WCAG ihlali oluşturup oluşturmadığını belirleyemez.
• CSS tabanlı engelleyici katmanlar: Bir stil sayfası, portre modunda tam ekran engelleyici bir mesaj göstermek için @media (orientation: portrait) { .orientation-warning { display: block; } } kullanabilir. Axe-core, sayfayı manzara modunda tararken bu öğeyle görünür durumda asla karşılaşmaz ve herhangi bir sorun bildirmez. Yalnızca portre modunda test yapmak—veya CSS’yi yönlendirmeye bağlı engelleme kalıpları açısından incelemek—ihlali ortaya çıkarır.

Nasıl Test Edilir

1. Temel olarak otomatik bir tarama çalıştırın: Sayfayı Chrome, Firefox veya Edge’de açın. Temel bir durum oluşturmak için axe DevTools tarayıcı uzantısını kullanın veya bir Lighthouse erişilebilirlik denetimi çalıştırın. Bu araçlar yönlendirme ihlallerini doğrudan tespit etmese de, yönlendirme erişilebilirliği hatalarını ağırlaştıran ilgili duyarlı tasarım sorunlarını, viewport meta etiketi problemlerini veya eksik ARIA’yı işaretleyebilir. Otomatik raporun temiz olmasının 1.3.4 ile uyumu doğrulamadığını unutmayın.
2. Tarayıcı DevTools cihaz öykünmesini kullanın: Chrome veya Edge’de DevTools’u (F12) açın, cihaz araç çubuğu simgesine tıklayın (Ctrl+Shift+M / Cmd+Shift+M) ve iPhone 14 veya Galaxy S21 gibi bir mobil cihaz seçin. Cihaz araç çubuğundaki döndürme simgesini kullanarak portre ve manzara yönlendirmeleri arasında geçiş yapın. Tüm içeriğin—gezinme, başlıklar, gövde metni, formlar, düğmeler, görseller ve medya—her iki yönlendirmede de görünür ve kullanılabilir kaldığını sistematik olarak doğrulayın. Bir yönlendirmede görünüp diğerinde görünmeyen engelleyici katmanlar, gizli bölümler veya devre dışı etkileşimli öğeler olup olmadığına bakın.
3. Gerçek cihazlarda test edin: Bir Android veya iOS cihaz bağlayın ve sayfayı mobil tarayıcıda açın. Cihazı fiziksel olarak portre ve manzara arasında döndürün. İşletim sisteminin yönlendirme kilidinin (etkinleştirildiğinde) içeriğin bozulmasına veya döndürme istemi göstermesine neden olmadığını doğrulayın. Yönlendirme kilidi hem açık hem kapalıyken test edin.
4. Yönlendirme simülasyonu ile ekran okuyucu testi: iOS’ta VoiceOver etkin (yan düğmeye üç kez tıklayarak) iken, sayfada portre yönlendirmede kaydırma hareketleriyle gezinin. Ardından manzara moduna döndürün ve VoiceOver’ın okuma sırasının ve erişilebilir adların doğru kalıp kalmadığını doğrulayın. Android’de TalkBack ile aynı testi yapın. Masaüstünde Firefox ile NVDA kullanın ve geliştirici araçları üzerinden yönlendirmeyi simüle ederek erişilebilirlik ağacının yönlendirmeler arasında tutarlı olduğunu doğrulayın.
5. Yönlendirme kısıtlamaları için CSS ve JavaScript’i inceleyin: DevTools’ta Sources veya Elements panelini açın ve stil sayfasında orientation: portrait ve orientation: landscape media query’lerini arayın. Her bloğun ne yaptığını inceleyin: display: none ile içeriği gizliyor mu, engelleyici bir katman mı uyguluyor, yoksa yalnızca yerleşimi mi ayarlıyor? JavaScript dosyalarında screen.orientation, orientationchange ve screen.orientation.lock ifadelerini arayın. Bulunan kalıpların arayüzü kilitleyip kilitlemediğini veya içeriği engelleyip engellemediğini değerlendirin.
6. Zorunlu istisnayı doğrulayın: Site yönlendirmeyi kasıtlı olarak kısıtlıyorsa, belgelenmiş ve gerekçelendirilmiş bir zorunlu kullanım durumu olduğundan emin olun. İstisna, kozmetik değil, içerik odaklı olmalıdır. Bulgularınızı ekran görüntüsü ve belirli gerekçeyle birlikte belgeleyin.

Nasıl Düzeltilir

Portre modunda CSS engelleyici katman — Hatalı

<!-- Yalnızca portre modunda gösterilen ve tüm içeriği engelleyen tam ekran katman -->
<style>
  .rotate-prompt {
    display: none;
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 9999;
    text-align: center;
    padding: 2rem;
  }
  @media (orientation: portrait) {
    .rotate-prompt {
      display: flex; /* blocks all underlying content */
    }
  }
</style>
<div class='rotate-prompt'>
  <p>Please rotate your device to landscape mode.</p>
</div>
<main id='app-content'>
  <!-- All application content here -->
</main>

Portre modunda CSS engelleyici katman — Doğru

<!-- Engelleyici katmanı tamamen kaldırın. Bunun yerine yerleşimi uyarlamak için duyarlı CSS kullanın. -->
<style>
  /* Portre yerleşimi: öğeleri dikey olarak istifleyin */
  @media (orientation: portrait) {
    .dashboard-grid {
      grid-template-columns: 1fr;
    }
  }
  /* Manzara yerleşimi: yan yana sütunlar */
  @media (orientation: landscape) {
    .dashboard-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
</style>
<main id='app-content'>
  <div class='dashboard-grid'>
    <!-- İçerik yerleşimi uyarlıyor ancak her zaman erişilebilir kalıyor -->
  </div>
</main>

JavaScript yönlendirme kilidi — Hatalı

<script>
  // Ekranı manzaraya kilitler ve başarısız olursa (ör. iOS'ta) hata gösterir
  screen.orientation.lock('landscape').catch(function() {
    document.getElementById('orientation-error').style.display = 'block';
    document.getElementById('main-content').style.display = 'none';
  });
</script>
<div id='orientation-error' style='display:none'>
  This application only works in landscape mode.
</div>
<div id='main-content'>
  <!-- Application content -->
</div>

JavaScript yönlendirme kilidi — Doğru

<script>
  /*
    Yönlendirmeyi JavaScript ile kilitlemeyin.
    Bunun yerine, yönlendirme değişikliklerini dinleyin ve
    içeriği gizlemeden veya devre dışı bırakmadan arayüzü uyarlayın.
  */
  window.addEventListener('orientationchange', function() {
    var isPortrait = window.matchMedia('(orientation: portrait)').matches;
    // Yalnızca stil vermek için yerleşim sınıfını ayarlayın — asla içeriği gizlemeyin
    document.body.classList.toggle('portrait-layout', isPortrait);
    document.body.classList.toggle('landscape-layout', !isPortrait);
  });
</script>
<div id='main-content'>
  <!-- Tüm içerik her iki yönlendirmede de görünür ve kullanılabilir kalır -->
</div>

Yönlendirme değişimini engelleyen viewport meta etiketi — Hatalı

<!-- Bazı eski uygulamalar yönlendirmeyi viewport ile düzeltmeye çalıştı -->
<meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
<!--
  'user-scalable=no' doğrudan yönlendirmeyi kilitlemese de,
  bunu viewport'u döndüren CSS transform'larla birleştirmek,
  yönlendirme erişilebilirliği hataları yaratan bilinen bir anti-pattern'dir.
-->
<style>
  /* Anti-pattern: portre bir cihazda manzarayı simüle etmek için tüm body'yi döndürmek */
  @media (orientation: portrait) {
    body {
      transform: rotate(90deg);
      transform-origin: left top;
      width: 100vh;
      overflow-x: hidden;
    }
  }
</style>

Yönlendirme değişimini engelleyen viewport meta etiketi — Doğru

<!-- Standart bir duyarlı viewport etiketi kullanın. Body'yi asla CSS transform'larıyla döndürmeyin. -->
<meta name='viewport' content='width=device-width, initial-scale=1'>
<!--
  Yönlendirmeyi doğal olarak tarayıcı ve işletim sisteminin yönetmesine izin verin.
  İçeriği tüm viewport en-boy oranlarında çalışacak şekilde duyarlı tasarlayın.
  İçeriği yeniden akıtmak için CSS Grid ve Flexbox kullanın, transform'ları değil.
-->

Yaygın Hatalar

• Gezinme menülerine, kenar çubuklarına veya ana içerik alanlarına display: none uygulamak için @media (orientation: portrait) kullanmak. İçeriği yalnızca yeniden konumlandırmak yerine görünümden kaldıran herhangi bir CSS yönlendirme sorgusu potansiyel bir ihlaldir. Stil sayfanızdaki her yönlendirme media query’sini, yalnızca yerleşimi değiştirdiğinden ve içerik erişilebilirliğini etkilemediğinden emin olmak için denetleyin.
• Zorunlu olmayan uygulamalar için screen.orientation.lock() çağırmak. Bu Web API, oyunlar ve belirli medya kullanım durumları için tasarlanmıştır. Bunu standart bir web uygulamasında veya e-ticaret sitesinde manzara modunda “estetiği iyileştirmek” için kullanmak, zorunlu istisna kapsamına girmez ve doğrudan bir WCAG 1.3.4 ihlali yaratır.
• Erişilebilir bir alternatif olmadan “cihazınızı döndürün” açılış ekranı göstermek. Kısa bir yönlendirme ipucu gösterilse bile, bu asla içeriğe erişimi engellememelidir. Gösterilecekse, kapatılabilir olmalı, ana içeriği kaplamamalı ve bir gereklilik değil, öneri olarak iletilmelidir.
• Mobil kullanıcıların video içeriği için her zaman manzarayı tercih ettiğini varsaymak. Portre modunda oynatma kontrollerini veya oynat düğmesini devre dışı bırakan—kullanıcıları etkileşim kurmadan önce döndürmeye zorlayan—bir video oynatıcı yerleştirmek, video formatı gerçekten portrede gösterilemediği sürece (ki standart web videosu için neredeyse hiç böyle bir durum yoktur) 1.3.4’ü ihlal eder.
• Bir yönlendirmede <body> veya kök bir kapsayıcıya CSS transform: rotate(90deg) uygulamak. Bu, yönlendirme değişimini cihazın doğal şekilde yönetmesine izin vermek yerine CSS ile simüle eder; bozuk yerleşimler, ekran dışı içerik ve ekran okuyucular için ciddi erişilebilirlik ağacı karmaşası yaratır.
• QA sırasında yönlendirme davranışını test etmemek, çünkü ekiplerin yalnızca masaüstü tarayıcılarda test yapması. Masaüstü tarayıcı DevTools yönlendirme simülasyonu, standart QA döngüleri sırasında her zaman kullanılmaz. Yönlendirme, mobil test planlarında açık bir madde olmalı ve hem iOS hem Android gerçek cihazlarda doğrulanmalıdır.
• Üst sayfanın yönlendirme durumunu hesaba katmadan iframe’ler içinde yönlendirme davranışını geçersiz kılmak. Üçüncü taraf widget’lar, gömülü haritalar ve ödeme iframe’leri yönlendirmeyi bağımsız olarak kilitleyebilir. Sayfanız uyumlu olsa bile, kilitli bir iframe barındırmak, iframe’in zorunlu istisnası belgelenmediği sürece sayfanızı uyumsuz hale getirir.
• Mobil kullanıcılara sunucu tarafı user-agent tespiti kullanarak yalnızca manzara modunda çalışan bir sayfa sürümü sunmak. Mobil kullanıcıları, portre uyumlu bir yedek sunmadan yalnızca manzara modunda çalışan ayrı bir URL’ye yönlendirmek, aynı zamanda SEO ve URL kanonikleştirme sorunu da yaratan sistematik bir ihlaldir.
• Yönlendirme kısıtlamalarını yalnızca üretim derlemelerinde uygulamak ve bunları geliştirme testleri sırasında görünmez kılmak. Özellik bayrakları veya A/B test çerçeveleri, yönlendirme kilitleme kodunu yalnızca belirli ortamlarda veya belirli kullanıcı segmentleri için etkinleştirebilir; bu da ihlalin lansman öncesi erişilebilirlik denetimleri sırasında gözden kaçmasına neden olur.
• Tasarımcının manzara yerleşimini tercih etmesi nedeniyle zorunlu istisnanın geçerli olduğunu varsaymak. Zorunlu istisna, yüksek bir hukuki ve etik eşiğe sahiptir. İçeriğin birincil işlevinin alternatif yönlendirmede temelde imkânsız olmasını gerektirir—yalnızca daha iyi görünmesi veya ekibin duyarlı bir portre yerleşimi uygulamaya zaman bulamaması yeterli değildir.

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

Türkiye’nin 21 Haziran 2025 tarihli ve 32933 sayılı Resmî Gazete’de yayımlanan 2025/10 sayılı Cumhurbaşkanlığı Genelgesi, dijital erişilebilirlik için kapsamlı bir ulusal çerçeve oluşturur. Genelge, kapsamdaki kuruluşların WCAG 2.2 Seviye AA ile uyumlu olmasını zorunlu kılar; bu da WCAG 1.3.4 Orientation’ı açıkça içerir. Bu, kapsamdaki herhangi bir dijital hizmet veya web sitesinin, içeriği tek bir yönlendirmeyle sınırlamaması gerektiği anlamına gelir ve Genelge’nin, engelliler de dahil olmak üzere tüm vatandaşların cihazlarıyla fiziksel olarak nasıl etkileşim kurarlarsa kursunlar dijital hizmetlere erişebilmesini sağlama amacını yansıtır.

Genelge kapsamına giren ve Seviye AA uyumu sağlamakla yükümlü kuruluşlar şunlardır: kamu kurum ve kuruluşları (web siteleri ve dijital hizmetler işleten tüm devlet kurumları), bankalar ve finans kuruluşları, hastaneler ve sağlık hizmeti sağlayıcıları, 200.000 ve üzeri abonesi olan telekomünikasyon şirketleri, e-ticaret platformları, seyahat acenteleri, özel ulaşım şirketleri ve Millî Eğitim Bakanlığı (MEB) tarafından yetkilendirilmiş özel okullar. Bu kuruluşlar için, 1.3.4’ü ihlal eden yönlendirme kısıtlamaları—örneğin yalnızca manzara erişimi talep eden kamu portalları veya zorunlu olmayan nedenlerle portre moduna kilitlenen bankacılık uygulamaları—bağlayıcı ulusal mevzuata doğrudan aykırılık teşkil eder.

Erişilebilirlik Logosu, Aile ve Sosyal Hizmetler Bakanlığı tarafından verilen ve ulusal erişilebilirlik standardına uyumu gösteren bir sertifikasyon işaretidir. Bu logoyu almanın ön koşulu, Seviye AA uyumunun sağlanmasıdır. Erişilebilirlik Logosu’nu almak isteyen kuruluşlar, dijital varlıklarının 1.3.4 dahil olmak üzere tüm Seviye A ve Seviye AA ölçütlerini geçtiğini göstermek zorundadır. Yönlendirme kısıtlaması kaynaklı bir hata—sitelerin küçük bir bölümünde bile olsa—tüm sertifikasyonu riske atabilir.

WCAG 1.3.4’ün manuel test gerektirmesi ve yalnızca otomatik taramalarla doğrulanamaması nedeniyle, kapsamdaki kuruluşlar yönlendirmeye özgü test senaryolarını resmî erişilebilirlik denetim süreçlerine dahil etmelidir. Gerçek cihazlarda hem portre hem manzara yönlendirmelerinde yapılan test sonuçlarının belgelenmesi, mevzuata uyum ve logo sertifikasyonu için gerekli erişilebilirlik uyum kayıtlarının bir parçası olarak saklanmalıdır. Accsible SDK, Türkiye’nin gelişen dijital erişilebilirlik yükümlülüklerini karşılamaya yönelik bütüncül bir yaklaşımın parçası olarak kuruluşların yönlendirme ile ilgili engelleri tespit etmesine ve ele almasına yardımcı olur.