Ana içeriğe geç

1.3.4 Ekran Yönü

Belirli bir ekran yönü zorunlu olmadıkça, içerik tek bir ekran yönüyle (dikey/yatay) sınırlandırılmamalıdır.

SC Kodu: 1.3.4 Seviye: AA
URL: https://www.w3.org/TR/WCAG22/#orientation

Genel Tanım​

WCAG SC 1.3.4 Yönlendirme, içeriğin, belirli bir görüntüleme yönü zorunlu olmadığı sürece, dikey veya yatay gibi tek bir görüntüleme yönüyle görüntülenmesini ve çalışmasını kısıtlamamasını gerektirir. Bu, kullanıcıların içeriğe tercih ettikleri yönde erişebilmelerini sağlayarak kullanılabilirliği ve erişilebilirliği artırır.

Faydalar​

  • Motor Engelli Kullanıcılar İçin Erişilebilirlik: Cihazlarını tekerlekli sandalyeye sabitleyen veya erişim kolaylığı için özel yönlendirmeler kullanan motor engelli kullanıcılar, içerikle kısıtlama olmaksızın etkileşim kurabilirler.

1.3.4.c Ana Amaç​

İçeriğin, belirli bir yönlendirme şart olmadığı sürece, hem dikey hem de yatay yönlendirmelerde erişilebilir ve işlevsel olmasını sağlamak.

En İyi Uygulamalar​

  • Yönlendirmeyi kısıtlamaktan kaçının: Uygulamanızı veya web sitenizi yalnızca yatay veya dikey modla sınırlamaktan kaçının.
  • Honor cihaz yönlendirme ayarları: İçeriğin kullanıcının tercih ettiği yönde görüntülenmesi için Honor cihaz ayarları.
  • Sayfa yönünü ayarlamak için kontrol düğmesi sunun: Kilitli bir sayfanın yönünü ayarlamayı sağlayan bir kontrol düğmesi sunun.
  • Temel yönlendirme durumlarına örnekler: Temel durumlara örnek olarak, dikey olarak sunulması gereken bir banka çeki ve gerçek bir piyanoya benzemesi için dikey olması gereken bir piyano uygulama belgesi verilebilir.

Örnekler ve Açıklamalar​

Örnek: Örnek Uygulama​

Bir web sayfası için talimatlar, yalnızca renk ve şekle dayalı olarak gezinme yönlendirmesi sağlar.

Nelerden Kaçınılmalı?

HTML/CSS

<body style = "transform: rotate(90deg);" >
  <h1> Tarif </h1>​​
  <p> Malzemeler ve talimatlar ... </p>
</body>​​

Açıklama: Uygulama belirli bir yönlendirmeyi zorunlu kılıyor; bu da motor bozuklukları veya kişisel tercihleri ​​nedeniyle cihazlarını belirli bir yönde kilitlemesi gereken kullanıcılar için zorluk yaratıyor.

Ne Yapılmalı?

HTML/CSS

<style> 
body {
  transform : unset ; 
}
</style>​​

<body>​​
<h1> Tarif </h1>​​
<p> Malzemeler ve talimatlar ... </p>
</body>​​

Açıklama: Uygulama, cihazın yönüne göre düzenini otomatik olarak ayarlar ve gövdeye "ayarlanmamış" bir değer atanır; bu sayede kullanıcılar tarifi dikey veya yatay modda rahatça okuyabilir ve etkileşimde bulunabilirler. Bu, kullanıcıların yemek pişirirken ihtiyaçlarına en uygun yönü seçmelerine olanak tanır.