Kamu Uygulamalarında ve Web Uygulamalarında Ekran Yönelimi

Döndürülemeyen cihazlar

Akülü tekerlekli sandalye kullanan bir sakinin kol dayanağına yatay konumda sabitlenmiş bir tableti vardır. Yalnızca dik konumda çalışan bir ulaşım kartı uygulaması kullanılamaz; ekran da elle çevrilemez.

WCAG 1.3.4 (AA seviyesi), belirli bir yönelim gerekli olmadıkça içeriğin görünümünü ve işleyişini dikey veya yatay gibi tek bir ekran yönelimiyle sınırlamamasını ister. İlke, insanların içeriği kendilerine uygun yönelimde kullanabilmesi ve kullanıcının cihaz düzeyinde ayarladığı yönelim kilidine saygı gösterilmesidir.

Neyin gerekli sayıldığı, neyin sayılmadığı

Understanding belgesi tek bir yönelimin gerekli olduğu örnekler verir: banka çeki görüntüleme, tuşlarının fiziksel genişliğe ihtiyaç duyduğu piyano uygulaması, projektör veya televizyon için hazırlanan slaytlar ve sanal gerçeklik içeriği. "Gerekli", kısıtlamayı kaldırmanın içeriği veya işlevini başka yolla sunulamayacak biçimde değiştirmesi demektir.

Ekran boyutuyla değişen bir düzen kısıtlama değildir. Sayfa dikeyde tek, yatayda iki sütuna akabilir. Ölçütün dışladığı şey, belirli bir yönelimi zorlayan kilit veya iletidir.

Kamu uygulamaları ve web uygulamaları ekranı nerede kilitler?

Yardım portalları, ulaşım biletleri, park uygulamaları ve klinik giriş araçları çoğu kez önce dikey tasarlanır ve sonra kilitlenir; çünkü tasarımcının denemiş olduğu ekran odur. Dönen bir cihazı rahatça kullanamayan kişiler için tekerlekli sandalyeye, masaya veya sehpaya sabitlenmiş cihazlar yaygındır. "Lütfen cihazınızı döndürün" kaplaması, yönelimi sabitleyen bir manifest girdisi veya uygulama ayarı, ekip için bir kolaylığı kullanıcı için engele çevirir. Mobil uygulamalar da Title II kuralının kapsamındadır; bkz. mobil uygulamalar.

Web: manifest, betikler ve kaplamalar

Bir web uygulaması manifesti yönelimi sabitleyebilir. Ayarsız bırakın veya herhangi birine izin verin.

{
  "name": "Metro Kart",
  "display": "standalone",
  "orientation": "portrait"
}

{
  "name": "Metro Kart",
  "display": "standalone",
  "orientation": "any"
}

Betikler de ekranı kilitleyebilir. Kilidi kaldırın ve mevcut alana CSS ile uyum sağlayın.

screen.orientation.lock('portrait-primary');

/* Kilit yok. Bunun yerine düzeni uyarlayın. */
@media (orientation: landscape) {
  .kart { display: grid; grid-template-columns: 1fr 1fr; }
}

"Cihazınızı döndürün" iletisi, nezaket kılığına girse bile bir kısıtlamadır.

@media (orientation: landscape) {
  body::before {
    content: "Lütfen cihazınızı döndürün";
    position: fixed; inset: 0; z-index: 99;
    background: #000; color: #fff;
  }
}

@media (orientation: landscape) {
  .kart { flex-direction: row; }
  .kart-qr { width: 40vh; }
}

Yerel uygulamalar: manifest ve Info.plist

Android'de bir etkinlik manifestte sabitlenebilir. Varsayılan, kullanıcının tercihinin ve cihaz ayarlarının belirlemesine izin verir.

<activity
    android:name=".SeyahatPlanActivity"
    android:screenOrientation="portrait" />

<activity
    android:name=".SeyahatPlanActivity"
    android:screenOrientation="unspecified" />

iOS'ta desteklenen yönelimler Info.plist'te (ve görünüm denetleyicisi başına) listelenir. Dik olması gerekmeyen içerik için yatayı da ekleyin.

<key>UISupportedInterfaceOrientations</key>
<array>
  <string>UIInterfaceOrientationPortrait</string>
</array>

<key>UISupportedInterfaceOrientations</key>
<array>
  <string>UIInterfaceOrientationPortrait</string>
  <string>UIInterfaceOrientationLandscapeLeft</string>
  <string>UIInterfaceOrientationLandscapeRight</string>
</array>

Nasıl kontrol edilir?

1. Sayfayı veya uygulamayı yönelim kilidi kapalı bir telefon ya da tablette açın. Döndürün. Her şey erişilebilir kalıyor mu?
2. Cihazın yönelim kilidi açıkken, bir kez dikey bir kez yatay olmak üzere tekrarlayın. İçerik kilide uymalı, onunla savaşmamalı.
3. Tarayıcı geliştirici araçlarında cihaz öykünmesini dikey ile yatay arasında değiştirin.
4. Manifest, betikler ve stil sayfalarında yönelim kilitlerini ve "döndürün" iletilerini arayın.

Bir ekran bilerek tek yönelimliyse neden gerekli olduğunu belgeleyin.

Kaçınılması gereken hatalar

• Geliştirme sırasında her şeyi dikeye kilitleyip yayına almak.
• Tam ekran "devam etmek için döndürün" kaplaması.
• "Dikeyken daha güzel görünüyor"u gerekli saymak.
• Formlar için yatay düzeni unutmak; klavye açılınca gönder düğmesi ekran dışına kayar.
• Yatayda kısıtlı bir özellik kümesini "destekleniyor" saymak.

Şu durumda yayına alın

• Belirli bir yönelim gerekli olmadıkça her görünüm dikeyde ve yatayda çalışıyor.
• Hiçbir kilit, kaplama veya ayar tek bir yönelimi zorlamıyor.
• Gerekli her istisna yalnızca onu gerektiren tek görünümle sınırlı.

Kaynaklar

• Understanding SC 1.3.4: Orientation (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.