Bu Kural Ne Anlama Gelir

WCAG 1.4.10, görüntü alanı 320 CSS piksel genişliğe daraltıldığında (400% yakınlaştırmada 1280px masaüstü görüntü alanına eşdeğer) içeriğin tek boyutlu kaydırmayla sığacak şekilde yeniden akmasını gerektirir. Dikey kaydırmalı içerik için yatay kaydırma gerekli olmamalıdır. Yatay kaydırmalı içerik için (veri tabloları veya belirli uygulamalar gibi) 256 CSS piksel yükseklikte dikey kaydırma gerekli olmamalıdır.

Bu ölçüt, yakınlaştırma erişilebilirliğini doğrudan duyarlı tasarıma bağlar. Bir kullanıcı masaüstü tarayıcıyı %400 yakınlaştırdığında, etkin görüntü alanı genişliği 320 CSS piksel olur — dar bir mobil görüntü alanıyla aynı. Site mobil genişliklerde yatay kaydırma olmadan iyi çalışıyorsa, muhtemelen bu ölçütü karşılar.

İki boyutlu düzenin kullanım veya anlam için zorunlu olduğu içerikler için istisnalar mevcuttur: veri tabloları, araç çubukları, haritalar, diyagramlar ve bazı medya oynatıcılar. Bu öğeler iki boyutlu kaydırma gerektirebilir, ancak çevreleyen içerik yine de yeniden akmalıdır.

Neden Önemlidir

Bu ölçüt, tarayıcılarını önemli ölçüde yakınlaştıran düşük görüşlü kullanıcılar için hayati önem taşır. Yeniden akış olmadan %400 yakınlaştırma, devasa bir sayfaya küçük bir görüntüleme penceresi oluşturur ve her satırı okumak için sürekli yatay kaydırma gerektirir. Kullanıcı her satırı bitirmek için sağa, sonraki satıra başlamak için sola ve aşağı kaydırmalıdır. Yeniden akış, içeriği dikey olarak istifleyerek bunu ortadan kaldırır.

Yeniden akış ayrıca mobil kullanıcılara, iki yönlü kaydırmayı zor bulan motor bozukluğu olan kullanıcılara ve dar tarayıcı pencereleri kullanan herkese yarar sağlar. Duyarlı tasarım en iyi uygulamalarının ve erişilebilirlik gereksinimlerinin birleşimini temsil eder.

Erişilebilirlik denetimlerinde, 1.4.10 başarısızlıkları 1.4.3 kontrast ile birlikte en sık bulunan AA düzeyindeki sorunlar arasındadır. Mobil dostu görünen birçok site, yaygın cihaz genişliklerini (375px, 390px) hedeflediklerinden WCAG gerektiren 320px'de bozulur.

İlgili axe-core Kuralları

1.4.10 Yeniden Akış için özel olarak otomatik axe-core kuralı yoktur. Otomatik araçlar içerik kaybı veya yatay kaydırma sorunlarının mevcut olup olmadığını güvenilir biçimde belirleyemediğinden, bu ölçüt belirli görüntü alanı boyutlarında manuel test gerektirir.

Nasıl Test Edilir

Chrome DevTools'ta Cihaz araç çubuğunu açın (Ctrl+Shift+M / Cmd+Shift+M) ve yükseklik kısıtlaması olmadan 320px genişliğinde özel bir görüntü alanı ayarlayın.
Alternatif olarak masaüstü tarayıcıyı %400 yakınlaştırın (1280px / 4 = 320px etkin genişlik).
Sayfanın tamamını dikey olarak kaydırın. Yatay kaydırma çubuğu görünmemeli ve hiçbir içerik ekranın sağ tarafında gizli olmamalıdır.
Tüm etkileşimli öğelerin kullanılabilir olduğunu doğrulayın: düğmeler dokunulabilir, form alanları erişilebilir, gezinme çalışıyor.
Hiçbir metnin kırpılmadığını, kesilmediğini veya diğer içerikle örtüşmediğini kontrol edin.
İçeriğin yatay düzen varyantı varsa her iki yönü de test edin.
Veri tabloları için, istiflenmiş düzene dönüştüklerini, yatay kaydırılabilir bir kapsayıcı kullandıklarını veya duyarlı bir alternatif görünüm sağladıklarını doğrulayın.
Temel kullanıcı akışlarını test edin: gezinme, arama, formlar, ödeme — her adımın 320px genişlikte çalıştığından emin olun.

Nasıl Düzeltilir

Mobil öncelikli duyarlı bir yaklaşımla oluşturun. Baştan 320px minimum genişlik için tasarlayın:

/* Mobil öncelikli temel stiller (320px minimum) */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Dar görüntü alanlarında ızgara öğelerini istifleyin */
.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

Gezinmeyi duyarlı biçimde ele alın — dar genişliklerde mobil menüye daraltın:

<nav aria-label="Ana gezinme">
  <button
    class="menü-toggle"
    aria-expanded="false"
    aria-controls="nav-menü"
  >
    <span class="sr-only">Menü</span>
    <svg aria-hidden="true"><!-- hamburger simgesi --></svg>
  </button>
  <ul id="nav-menü" class="nav-list" role="list">
    <li><a href="/hakkımızda">Hakkımızda</a></li>
    <li><a href="/hizmetler">Hizmetler</a></li>
    <li><a href="/iletişim">İletişim</a></li>
  </ul>
</nav>

/* Gezinme yeniden akışı */
.nav-list {
  display: none;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
}

.menü-toggle[aria-expanded="true"] + .nav-list {
  display: flex;
}

.menü-toggle {
  display: block;
}

@media (min-width: 768px) {
  .nav-list {
    display: flex;
    flex-direction: row;
    position: static;
  }
  .menü-toggle {
    display: none;
  }
}

Veri tablolarını duyarlı kalıplarla ele alın:

/* Duyarlı tablo: kapsayıcı içinde yatay kaydırma */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* Alternatif: basit tablolar için istiflenmiş düzen */
@media (max-width: 640px) {
  .responsive-table thead {
    display: none;
  }
  .responsive-table tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0.5rem;
  }
  .responsive-table td {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0;
  }
  .responsive-table td::before {
    content: attr(data-label);
    font-weight: 700;
    margin-right: 1rem;
  }
}

Yeniden akışı engelleyen sabit genişlikli öğelerden kaçının:

/* Sabit genişliklerden kaçının */
.sidebar {
  /* Kötü: width: 300px; — yeniden akışı engeller */
  /* İyi: duyarlı yaklaşım */
  width: 100%;
}

@media (min-width: 768px) {
  .layout {
    display: grid;
    grid-template-columns: 1fr 300px;
  }
}

/* Görseller için width yerine max-width kullanın */
img {
  max-width: 100%;
  height: auto;
}

/* Kod bloklarından yatay taşmayı önleyin */
pre, code {
  overflow-x: auto;
  max-width: 100%;
  word-wrap: break-word;
}

Sık Yapılan Hatalar

375px altına uyum sağlamayan sabit genişlikli düzenler veya kapsayıcılar, 320px'de yatay kaydırmaya neden olur.
Hamburger menüye daralmayan gezinme çubukları, dar görüntü alanlarında yatay taşma yapar.
Sabit piksel boyutlarına sahip ve dar genişliklerde örtüşen mutlak konumlandırılmış metin içeren kahraman bölümleri.
max-width: 100% olmayan ve görüntü alanının ötesine uzanan görseller.
Minimum sınır olmadan yazı tipi boyutları veya genişlikler için vw birimleri kullanan ve içeriği okunamaz hâle getiren CSS.
%400 yakınlaştırmada aşırı görüntü alanı alanı tüketen sabit yükseklikli yapışkan üst bilgiler veya alt bilgiler.
Dar genişliklerde tek sütuna istiflenmeyen iki sütunlu formlar.
İçeriğe erişmenin tek yolu olan yatay döngüler veya kaydırıcılar (içerik dar genişliklerde döngü kalıbı olmadan erişilebilir olmalıdır).