Yönelim

Kısaca

Bazı kişiler telefonlarını ya da tabletlerini sabit bir konuma, örneğin bir tekerlekli sandalyeye, bir standa ya da bir masaya takar ve döndüremez. Bir uygulama ya da site yalnızca tek bir yönelimde çalışıyorsa bu kişiler onu hiç kullanamaz.

Bu kriter, belirli bir yönelim zorunlu olmadıkça, içeriğin görünümünü ve kullanımını dikey ya da yatay tek bir ekran yönelimiyle kısıtlamamasını ister. Kullanıcılar cihazları hangi yöne çevrilmiş olursa olsun içeriği kullanabilmelidir.

Neleri kapsar?

• Her iki yönelim: İçerik dikey ve yatay yönelimde çalışır. Yerleşim kilitlenmek yerine uyum sağlar.
• Neler kısıtlama sayılır: Yönelimi kodda, manifestte ya da uygulama ayarlarında kilitlemek ya da kullanıcıdan cihazını döndürmesini isteyen bir ileti göstermek.
• Zorunlu istisnalar: Bazı içerikler belirli bir yönelim ister; örneğin banka çeki yatırma, bir piyano uygulaması, sanal gerçeklik deneyimi ya da geniş görünüm gerektiren slaytlar.
• Web ve mobil: Kriter web sitelerine, kurulu web uygulamalarına ve yerel uygulamalara uygulanır. Daha çok dokunmatik cihazları ilgilendirir.
• Kapsam dışı notlar: Küçük ekran boyutlarında yeniden akış ve yakınlaştırma 1.4.10 (Yeniden Akış) kapsamındadır. Bir hareket gerektiren kontroller 2.5.1 kriterinin konusudur.

Kimleri etkiler?

Cihazlarını döndüremeyen kişiler onu sabitlendiği konumda kullanır. Bunların arasında cihazını bir sandalyeye ya da masaya takan birçok tekerlekli sandalye kullanıcısı ve motor engeli olan kişi vardır. Kendine en uygun yönelimi seçen az gören kullanıcılara ve kılıf ya da standda tablet kullanan herkese de yardımcı olur.

EAA ve EN 301 549'da

Avrupa Erişilebilirlik Yasası (Direktif (AB) 2019/882) 28 Haziran 2025'ten sonra piyasaya sunulan kapsamdaki ürün ve hizmetler için geçerlidir. Yasanın 47. gerekçesi web siteleri ve mobil uygulamalar için dört ilkeyi sayar: algılanabilirlik, işletilebilirlik, anlaşılabilirlik ve sağlamlık. Yönelime uyum sağlayan içerik, "algılanabilirlik" ve "işletilebilirlik" ilkelerinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 1.3.4'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.

Kriterin web dışı dokümanlara uygulanıp uygulanmadığı ve nasıl uygulandığı standardın 10. maddesinde belirtilir. Madde numaraları EN 301 549'un "9. + WCAG numarası" düzenine göredir. V3.2.1'de yazılım maddesi, açık ve kapalı işlevsellik için ayrı alt maddelere bölünmüştür. Kaynak gösterirken tam numaraları standarttan kontrol edin.

Standart sürümü: EN 301 549 V4.1.1 (Eylül 2026), WCAG 2.2'yi esas alan ve EAA için hazırlanan ilk sürümdür. Henüz AB Resmî Gazetesi'nde atıf almamıştır; bu nedenle EAA gereksinimlerini karşılamanın gönüllü teknik yolu olarak görülmelidir. Atıf yapıldığında EAA ile ilgili uygunluk karinesi sağlayacaktır. 1.3.4 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır. AA düzeyinde bir kriterdir.

EAA bağlamında dikkat: Yasanın Madde 2/4 hükmü bazı içerikleri gereksinimlerin dışında bırakır; örneğin 28 Haziran 2025'ten önce yayımlanmış ofis dosya biçimleri ve bu tarihten sonra güncellenmeyen arşivler. Bu tarihten sonra yayımladığınız ya da değiştirdiğiniz içerik bu istisnaların kapsamında değildir.

Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır

Web için kod örnekleri

1. Yönelimi CSS ile kilitlemeyin

Sabit bir yönelimi taklit etmek için sayfayı CSS ile döndürmeyin. Yerleşimin uyum sağlamasına izin verin.

@media (orientation: portrait) {
  body {
    transform: rotate(90deg);
    width: 100vh;
    height: 100vw;
  }
}

.yerlesim { display: flex; flex-wrap: wrap; gap: 16px; }

@media (orientation: landscape) {
  .kenar { flex: 0 0 240px; }
}

2. Yönelimi JavaScript ile kilitlemeyin

Screen Orientation API yönelimi kilitleyebilir. Yönelim zorunlu olmadıkça bundan kaçının.

screen.orientation.lock("portrait");

// Kilit yok. Yönelim gerçekten zorunluysa nedenini
// belgelerinizde açıklayın.

3. Web uygulaması manifesti

Manifestin orientation üyesi kurulu bir web uygulamasını kilitler. Onu çıkarın ya da any kullanın.

{
  "name": "Corpowid uygulaması",
  "orientation": "portrait"
}

{
  "name": "Corpowid uygulaması",
  "orientation": "any"
}

4. Kullanıcıdan cihazını döndürmesini istemeyin

"Lütfen cihazınızı döndürün" ekranı, onu döndüremeyenleri engeller.

<div id="dondur-uyarisi">
  Lütfen cihazınızı dikey konuma getirin.
</div>

<!-- Aynı içeriği her iki yönelimde de gösterin -->
<main>…</main>

5. Uyum sağlayan bir yerleşim

İçerik her iki yönelime de sığsın diye esnek birimler ve satır kaydırma kullanın.

.form { width: 360px; height: 640px; }

.form { max-width: 100%; min-height: 100vh; }
.alanlar { display: grid; gap: 12px; }

@media (orientation: landscape) and (min-width: 600px) {
  .alanlar { grid-template-columns: 1fr 1fr; }
}

Mobil için kod örnekleri

Yerel mobil uygulamalarda aynı kural geçerlidir. Uygulamanın makul biçimde destekleyebildiği tüm yönelimlere izin verin ve yerleşimi uyarlayın.

iOS (SwiftUI)

<!-- Info.plist: dikey ve yatay yönelime izin verin -->
<key>UISupportedInterfaceOrientations</key>
<array>
    <string>UIInterfaceOrientationPortrait</string>
    <string>UIInterfaceOrientationLandscapeLeft</string>
    <string>UIInterfaceOrientationLandscapeRight</string>
</array>

// SwiftUI: yerleşim mevcut alana uyum sağlar
import SwiftUI

struct ProfilGorunumu: View {
    var body: some View {
        ViewThatFits {
            HStack(alignment: .top, spacing: 24) { foto; ayrintilar }    // geniş
            VStack(alignment: .leading, spacing: 16) { foto; ayrintilar } // dar
        }
        .padding()
    }

    private var foto: some View { Image("profil").resizable().scaledToFit() }
    private var ayrintilar: some View { Text("Ada Lovelace") }
}

Android (Jetpack Compose)

<!-- AndroidManifest.xml: yönelimi kilitlemeyin -->
<activity
    android:name=".ProfilActivity"
    android:screenOrientation="unspecified" />

// Compose: yerleşim mevcut genişliğe uyum sağlar
import androidx.compose.foundation.layout.BoxWithConstraints
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.unit.dp

@Composable
fun ProfilEkrani() {
    BoxWithConstraints {
        if (maxWidth > 600.dp) {
            Row { Foto(); Ayrintilar() }      // geniş
        } else {
            Column { Foto(); Ayrintilar() }   // dar
        }
    }
}

Nasıl test edilir?

• Cihazı döndürün: Her sayfayı ve ekranı dikey ve yatay yönelimde açın. Her şey hâlâ çalışıyor mu?
• Kilit arayın: Kodda CSS döndürme hilesini, screen.orientation.lock çağrısını, manifestteki orientation değerini, AndroidManifest.xml içindeki screenOrientation değerini ve Info.plist'teki desteklenen yönelimleri arayın.
• "Döndürün" iletilerini arayın: Sayfa ya da uygulama kullanıcıdan cihazını döndürmesini istiyor mu?
• Yerleşimi kontrol edin: Diğer yönelimde kesilen, gizlenen ya da kullanılamaz hâle gelen bir şey var mı?
• Gerçek bir cihazda deneyin: Tarayıcı emülasyonu kilidi her zaman dikkate almaz. Bir telefonda ve bir tablette test edin.
• İstisnayı kontrol edin: Yönelimi kısıtlıyorsanız bu gerçekten zorunlu mu? Gerekçeyi yazın.
• Denetleyiciyi başlangıç olarak kullanın: Bazı araçlar manifest ya da CSS kilidini saptar, ama bir yönelimin zorunlu olup olmadığına ancak bir kişi karar verebilir.

Sık yapılan hatalar

• Uygulamayı varsayılan olarak dikeye kilitlemek: Bu kriterin karşılanmamasının en yaygın nedenidir.
• Bir yönelimi taklit etmek için CSS transform kullanmak: Beklenmedik biçimlerde bozulur ve döndüremeyenleri engeller.
• "Lütfen cihazınızı döndürün" ekranları: Cihazı sabit olan kullanıcıları engeller.
• Manifesti dikeye ayarlamak: Kurulu bir web uygulamasını kilitler.
• Sabit piksel boyutları kullanmak: Yerleşim diğer yönelime sığmaz.
• Gerekçe göstermeden "zorunlu" demek: Kolaylık, zorunlulukla aynı şey değildir.
• Yalnızca dikeyde test etmek: Yatay yönelim çoğu zaman küçük şeylerde bozuktur.
• Tabletleri unutmak: Tabletler çoğu zaman bir kılıfa ya da standa sabitlenir.

Kaynaklar

• Understanding SC 1.3.4: Orientation (W3C), İngilizce, yeni sekmede açılır
• How to Meet WCAG: Orientation (W3C), İngilizce, yeni sekmede açılır
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), İngilizce, yeni sekmede açılır
• EN 301 549 V4.1.1 (ETSI), İngilizce, yeni sekmede açılır
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), İngilizce, yeni sekmede açılır

Standart sürümü: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz; bağlayıcı metin için Avrupa Erişilebilirlik Yasası'nın (Direktif (AB) 2019/882) ve EN 301 549 standardının resmî metinlerini esas alın.