320 pikselde yeniden akış ve ADA

Yüzde 400'de tek sütun

İçerik, dikey kayan sayfalar için 320 CSS pikseline eşdeğer genişlikte, bilgi ya da işlevsellik kaybı olmadan ve iki yönde kaydırma gerektirmeden sunulabilmelidir. Yatay kayan içerik için eşdeğer yükseklik 256 CSS pikselidir.

320 CSS pikselini göz önüne getirmenin en kolay yolu, 1280 piksel genişliğinde bir masaüstü tarayıcı penceresini yüzde 400'e yakınlaştırmaktır. Sayfa yalnızca aşağı doğru kaydırdığınız tek bir sütuna dönüşmelidir. Bir satırı okumak hiçbir zaman yana kaydırmayı gerektirmemelidir.

Bazı içerik gerçekten iki boyut ister: haritalar, grafikler, veri tabloları, video, oyunlar ve görünür tutulması gereken araç çubukları. Bu kısımlar iki yönde kayabilir. Başlıklar, arama kutuları, sayfalama ve sıradan paragraflar bu mazereti kullanamaz.

Yakınlaştıran vatandaşlar için neden önemli

Yüzde 400'e yakınlaştıran az gören kişiler, her satırda sola ve sağa kaydırmak istemez. Yeniden akış, yakınlaştırmayı pratik kılan şeydir. Dar bir telefondaki, bölünmüş ekran penceresindeki ya da uzun ve dar bir tablet bölmesindeki herkese de yardım eder.

Mahkeme dosyalama sistemleri, ilçe harita sorgulamaları ve izin panoları çoğunlukla sabit sütunlu, önce masaüstü düzenlerle yapılır. Bunlar tam olarak vatandaşın bir son tarihi, doldurulacak bir formu ve içeriğe ulaşmanın başka yolu olmadığı sayfalardır. Veri gerçekten bir tablo ya da harita ise yalnızca o bileşeni kaydırın ve çevresindeki tüm denetimleri ekran genişliği içinde tutun.

Sabit genişlikli iki sütunlu yerleşimler

Sabit genişlikli bir kenar çubuğu ile sabit genişlikli bir ana sütun, genişliklerinin toplamının altına küçülemez.

.kenar { float: left; width: 280px; }
.icerik { float: left; width: 680px; }

.yerlesim {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.kenar { flex: 1 1 14rem; }
.icerik { flex: 3 1 24rem; min-width: 0; }

Sabit konumlu yan gezinme

Sabit bir yan gezinme dar bir görünüm alanının büyük kısmını çalar. Yer kısıtlı olduğunda içeriğin üstüne yığılmasına izin verin.

.dosya-gezinme { position: fixed; top: 0; left: 0; width: 260px; }
main { margin-left: 260px; }

.dosya-gezinme { position: static; }
@media (min-width: 60em) {
  .dosya-gezinme { position: sticky; top: 0; align-self: start; width: 16rem; }
}

Form satırları ve diyaloglar

Sabit genişliklerle girişin yanına yüzdürülmüş bir etiket çabuk taşar. Bunları üst üste dizin ve alanın kullanılabilir genişliği kullanmasına izin verin. Aynısı, seçmen sorgulama paneli gibi diyaloglar için de geçerlidir.

label { float: left; width: 200px; }
input { width: 400px; }
.diyalog { width: 600px; }

.alan { display: grid; gap: 0.25rem; }
input { width: 100%; max-width: 25rem; }
.diyalog { width: min(37.5rem, calc(100% - 2rem)); max-height: 90vh; overflow: auto; }

Yerel uygulamalarda ızgaralar

Yerel uygulamalar için bu tam biçimiyle yazılmış bir 320 piksel kuralı yoktur, ama fikir geçerlidir: yerleşimler geniş ve sabit bir tuval varsaymak yerine dar pencerelere, büyük metne ve bölünmüş ekran kullanımına uyum sağlamalıdır.

// SwiftUI
LazyVGrid(columns: Array(repeating: GridItem(.fixed(160)), count: 3)) {
    ForEach(parklar) { ParkKarti(park: $0) }
}

// SwiftUI
LazyVGrid(columns: [GridItem(.adaptive(minimum: 160))]) {
    ForEach(parklar) { ParkKarti(park: $0) }
}

// Jetpack Compose
Row { repeat(3) { ParkKarti(Modifier.width(160.dp)) } }

// Jetpack Compose
LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 160.dp)) {
    items(parklar) { ParkKarti(it) }
}

Nasıl test edilir

1. Sayfayı 1280 piksel genişliğinde bir tarayıcı penceresinde açıp yüzde 400'e yakınlaştırın. Alternatif olarak tarayıcının cihaz araç çubuğunu 320 piksel genişlikte kullanın.
2. Sayfanın tamamını kaydırın. Gerçekten iki boyut gerektiren bileşenler dışında sayfada yatay kaydırma çubuğu olmamalıdır.
3. Sayfanın ana görevini yapın: arama, form doldurma, fatura ödeme. Hiçbir şey kesilmemeli ya da gizlenmemelidir.
4. Yapışkan çubukların ve çerez bannerlarının ekranın büyük kısmını kaplamadığını kontrol edin.
5. Dikey yazılan metin ya da yatay kayan yerleşimler için 256 CSS piksel yükseklikte test edin.

Sık yapılan hatalar ve yayın öncesi liste

• Gövdede ya da bir sarmalayıcıda 320 pikseli aşan bir min-width.
• Veri tablosu istisnasını bütün bir sayfayı mazur göstermek için kullanmak.
• İçeriği yeniden akıtmak yerine dar genişliklerde gizlemek.
• Bir ödeme bileşeni gibi, kapsayıcıyı aşan sabit genişlikli gömülü öğeler.
• Dosya numaraları ya da URL'ler gibi satır atlayamayan uzun dizgiler.

Yayına almadan önce:

• Gerçek istisnalar dışında 320 CSS pikselinde iki boyutlu kaydırma yok.
• Tüm içerik ve işlevler tek sütunlu görünümde de yerinde.
• Görseller, video ve gömülü öğeler kapsayıcıyla ölçekleniyor.
• Sabit çubuklar içeriğe yer bırakıyor.

Yeniden akış, metin boyutunu değiştirme ile birlikte çalışır; yakınlaştırma ölçütünde eşleşen kontroller vardır. Yeniden akmayan tedarikçi bileşenleri için tedarikçiler ve üçüncü taraf içerik sayfasına bakın.

Kaynaklar

• Understanding SC 1.4.10: Reflow (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.