Skip to main content
Algılanabilir WCAG 1.3.4

1.3.4 Yönlendirme

İçerik, belirli bir görüntüleme yönelimi zorunlu olmadığı sürece, görünümünü ve işleyişini dikey veya yatay gibi tek bir ekran yönelimine kısıtlamaz.

Level AA Serious WCAG 2.1 (new) WCAG 2.2

Bu kural ne anlama geliyor

Başarı Ölçütü 1.3.4, belirli bir yönelim işlevsellik açısından zorunlu olmadığı sürece web içeriğinin hem dikey hem de yatay yönelimlerde çalışmasını gerektirir. Zorunlu istisnalar arasında yatay mod gerektiren bir piyano klavyesi uygulaması veya çek boyutlarına uyması gereken bir banka çeki tarayıcısı yer alır. Çoğu web içeriğinin böyle bir gereksinimi yoktur.

Bu ölçüt ağırlıklı olarak mobil erişilebilirliği ele almak üzere WCAG 2.1'de tanıtılmıştır. Cihazlarını tekerlekli sandalyelere veya yardımcı montaj aparatlarına sabitleyen kullanıcılar genellikle cihazlarını döndüremez. İçeriğin tek bir yönelime kilitlenmesi bu kullanıcılar için erişimi imkansız kılar.

Neden önemlidir

Fiziksel engelli kişilerin cihazları kalıcı olarak tek bir yönelimde sabitlenmiş olabilir. Tekerlekli sandalyeye monteli bir tablet yatay moddaysa dikeye döndürülemez. Bir web sitesi yalnızca dikey görüntülemeye zorlarsa kullanıcı siteyi kullanamaz. Bu, erişime karşı kesin bir engel oluşturur.

Engel durumunun ötesinde, yönelim zorlamak kullanıcı deneyimini kötüleştirir. Yatakta okuyan, bölünmüş ekran kullanan veya katlanabilir cihaz kullanan kullanıcılar da her yönelime uyum sağlayan içerikten faydalanır.

İlgili axe-core kuralları

Yönelim tespiti için otomatik axe-core kuralı bulunmaz. Test, cihazın elle döndürülmesini veya tarayıcı geliştirici araçlarının yönelim değişikliklerini simüle etmesini gerektirir. CSS medya sorguları ve JavaScript yönelim kilitleri manuel olarak incelenmelidir.

Nasıl test edilir

  1. Sayfayı bir mobil cihazda açın ve dikey ile yatay arasında döndürün. İçerik ve işlevselliğin her iki yönelimde de tam erişilebilir olduğunu doğrulayın.
  2. Tarayıcı geliştirici araçlarının cihaz emülatöründe dikey ve yatay arasında geçiş yapın.
  3. Kod tabanında screen.orientation.lock(), orientation: portrait veya orientation: landscape kullanan CSS medya sorgularını ve yönelimi kısıtlayan meta viewport etiketlerini arayın.
  4. Web uygulama manifest dosyasında tek bir moda kilitleyen bir "orientation" alanı olup olmadığını kontrol edin.

Nasıl düzeltilir

CSS'inizin duyarlı tasarım teknikleri kullanarak her iki yönelimde de çalıştığından emin olun:

/* Her yönelime uyum sağlayan esnek düzenler kullanın */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
}

/* Yönelime değil, mevcut alana göre düzeni ayarlayın */
@media (min-width: 768px) {
  .sidebar { grid-column: span 1; }
  .main    { grid-column: span 2; }
}

Zorunlu olmadıkça yönelimi kilitlemek için Screen Orientation API kullanmayın:

// Kötü: zorunlu neden olmadan yönelimi kilitlemek
screen.orientation.lock("portrait");

// İyi: doğal yönelime izin verin
// screen.orientation.lock() çağırmayın

Web uygulama manifest dosyanızda yönelimi kısıtlamaktan kaçının:

// Kötü: dikey moda kilitler
{
  "orientation": "portrait"
}

// İyi: herhangi bir yönelime izin verir
{
  "orientation": "any"
}

Sık yapılan hatalar

  • Zorunlu yönelim gereksinimi olmayan normal bir web uygulaması için screen.orientation.lock("portrait") kullanmak.
  • Bir içerik sitesi için web uygulama manifest dosyasında "orientation": "portrait" ayarlamak.
  • CSS'in yalnızca tek bir yönelimi hesaba katması ve diğerinde içerik taşması veya gizli öğelere neden olması.
  • "Çoğu kullanıcı dikey moddadır" diyerek yatay mod testini atlamak — cihazlarını döndüremeyen kullanıcılar dışlanır.
  • Modal diyalogların veya formların yatay modda görüntü alanı yüksekliğini aşması nedeniyle kullanılamaz hale gelmesi.

Kaynaklar