Yeniden Akış

Kısaca

Az gören kişiler sayfayı çoğu zaman %400'e kadar yakınlaştırır. Masaüstü tarayıcıda bu, sayfayı 320 CSS pikseli genişliğinde görmekle aynıdır. Yerleşim uyum sağlamazsa her satırı okumak için yana kaydırmak zorunda kalırlar; bu okumayı çok yavaş ve yorucu kılar.

Bu kriter, içeriğin 320 CSS pikseli genişlikte (dikey kaydırılan içerik) ya da 256 CSS pikseli yükseklikte (yatay kaydırılan içerik) bilgi ya da işlev kaybı olmadan ve iki yönlü kaydırma gerektirmeden sunulabilmesini ister. Kullanılabilmesi için iki boyutlu yerleşim gereken içerik istisnadır.

Neleri kapsar?

• Test: 1280 px genişliğindeki bir pencerede %400 yakınlaştırmada ya da 320 px genişlikte sayfa tek sütuna akar. Hiçbir şey kesilmez, gizlenmez ya da üst üste binmez ve okumak için yatay kaydırma gerekmez.
• Duyarlı tasarım: Akışkan yerleşimler, esnek ızgaralar ve medya sorguları kriteri karşılamanın olağan yoludur.
• Yatay yazı ve dikey kaydırma: 320 px genişlik geçerlidir. Yatay kaydırılan içerik için, örneğin dikey yazı sistemlerinde, 256 px yükseklik geçerlidir.
• İstisnalar: Anlamı ya da kullanımı için iki boyutlu yerleşim gereken içerik parçaları: görseller, haritalar, diyagramlar, videolar, oyunlar, sunumlar, veri tabloları ve çalışırken araç çubuklarının görünür kalması gereken arayüzler.
• Uzun diziler: URL'ler ve uzun sözcükler yatay kaydırma çubuğu oluşturmak yerine satıra sarılmalıdır.
• Kapsam dışı notlar: Metnin yardımcı teknoloji olmadan yeniden boyutlandırılması 1.4.4, metin aralığı 1.4.12 kapsamındadır. Yönelim 1.3.4 kriterinin konusudur.

Kimleri etkiler?

%400'e yakınlaştıran az gören kişiler. Küçük ekran ya da dar pencere kullananlar. Tek sütunu daha kolay bulan bilişsel ya da okuma farklılıkları olan kişiler. Telefonda büyüteç ya da büyük metin ayarı kullananlar.

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. Görünüm alanına uyum sağlayan içerik, "algılanabilirlik" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 1.4.10'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.4.10 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. Sayfanın ölçeklenmesine izin verin

Sabit bir viewport genişliği ya da engellenmiş yakınlaştırma yeniden akışı olanaksız kılar.

<meta name="viewport" content="width=1024">

<meta name="viewport" content="width=device-width, initial-scale=1">

2. Sabit değil, akışkan genişlikler

Sabit piksel genişlikleri dar bir görünüm alanında yatay kaydırmaya yol açar. max-width ve göreli birimler kullanın.

.kapsayici { width: 960px; }

.kapsayici { width: 100%; max-width: 60rem; margin-inline: auto; }

3. Üst üste dizilen ızgaralar

Yer olmadığında sütunların sarmasına izin verin; sabit sütun sayısı kullanmayın.

.izgara { display: grid; grid-template-columns: repeat(3, 300px); }

.izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 1rem;
}

4. Uzun metni sarın

Uzun URL'ler ve sözcükler sayfayı genişletmek yerine satıra sarılmalıdır.

.yorum { white-space: nowrap; }

.yorum { overflow-wrap: anywhere; }

5. Görseller ve medya

Medya kapsayıcısından hiçbir zaman daha geniş olmamalıdır.

img { width: 800px; }

img, video { max-width: 100%; height: auto; }

6. Veri tabloları: izin verilen istisna

Bir veri tablosu yana kayabilir, ama kaydırmayı tablonun içinde tutun ki sayfanın geri kalanı yeniden aksın; alanı klavyeyle erişilebilir yapın.

<table>…</table> <!-- tüm sayfa yana kayar -->

<div class="tablo-kaydir" role="region"
     aria-labelledby="t-baslik" tabindex="0">
  <table>
    <caption id="t-baslik">Çeyreklik sonuçlar</caption>
    …
  </table>
</div>

.tablo-kaydir { overflow-x: auto; }

Mobil için kod örnekleri

Yerel uygulamalarda kullanıcı metni büyüttüğünde ya da küçük bir pencere ya da bölünmüş ekran kullandığında aynı fikir geçerlidir. Sabit çerçeveler yerine sarılan ve dikey kayan esnek yerleşimler kullanın.

iOS (SwiftUI)

import SwiftUI

struct ProfilKarti: View {
    var body: some View {
        // Kaçının: sabit genişlikler ve tek bir yatay sıra
        // HStack { Avatar().frame(width: 120); Detay().frame(width: 400) }

        // ViewThatFits, yer yoksa dikey yerleşime geçer
        ViewThatFits(in: .horizontal) {
            HStack(alignment: .top, spacing: 16) {
                Avatar()
                Detay()
            }
            VStack(alignment: .leading, spacing: 12) {
                Avatar()
                Detay()
            }
        }
        .padding()
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun ProfilKarti() {
    // Kaçının: sarılamayan sabit genişlikli Row
    // Row { Avatar(Modifier.width(120.dp)); Detay(Modifier.width(400.dp)) }

    // FlowRow, yer yoksa çocuklarını sonraki satıra sarar
    FlowRow(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
        Avatar()
        Detay()
    }
}

Nasıl test edilir?

• %400'e yakınlaştırın: Tarayıcı penceresini 1280 px genişliğe ayarlayıp %400 yakınlaştırın ya da 320 px'e küçültün. Okumak için yana kaydırmanız gerekiyor mu? Kesilen ya da üst üste binen bir şey var mı?
• Cihaz modunu kullanın: Tarayıcı geliştirici araçlarında 320 px genişlik ayarlayın. Ana şablonların hepsini kontrol edin: ana sayfa, formlar, makaleler, tablolar ve ödeme.
• Tüm işlevleri kontrol edin: Menüler, iletişim kutuları, formlar ve düğmeler bu genişlikte de çalışmalıdır.
• İstisnaları arayın: Kalan yatay kaydırma yalnızca veri tablosu ya da harita gibi iki boyutlu yerleşim gerektiren içerikten mi geliyor?
• Kodu inceleyin: Sabit piksel genişliklerini, min-width değerlerini, white-space: nowrap ifadesini ve kısıtlayıcı bir viewport etiketini arayın.
• Mobili kontrol edin: En büyük metin boyutunu ve bölünmüş ekranı ya da küçük bir cihazı kullanın. Yerleşim sarılıyor ve yalnızca dikey kayıyor mu?
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar engellenmiş bir viewport'u işaretleyebilir ama içeriğin kaybolup kaybolmadığını yargılayamaz. Bir kişi bakmalıdır.

Sık yapılan hatalar

• Sabit genişlikli yerleşimler: 960 px'lik bir kapsayıcı 320 px'te bozulur.
• Yakınlaştırmayı viewport ile engellemek: %400 testini baştan olanaksız kılar.
• Küçük ekranlarda içeriği gizlemek: Dar genişlikte bir özelliği kaldırmak işlev kaybıdır.
• Tek geniş öğe yüzünden tüm sayfanın yatay kayması: Bir görsel, uzun bir URL ya da tablo her şeyi iter. Onu kapsayın.
• Ekranı dolduran sabit çubuklar: Sabit bir üst bilgi 256 px yüksekliğindeki bir görünüm alanının çoğunu kaplayabilir.
• Kesilen metin: Sabit yükseklik ve gizlenen taşma metni kaybettirir.
• Yalnızca ana sayfayı test etmek: Formlar ve tablolar genellikle ilk bozulanlardır.
• Her geniş öğeye istisna demek: İstisna gerçekten iki boyut gerektiren içeriği kapsar, sıradan metin bloklarını değil.

Kaynaklar

• Understanding SC 1.4.10: Reflow (W3C), İngilizce, yeni sekmede açılır
• C32: Using media queries and grid CSS to reflow columns (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.