Ana içeriğe geç

1.4.10 Yeniden Akış

İçerik; yakınlaştırıldığında veya küçük ekranlarda görüntülendiğinde düzgün şekilde yeniden akmalı ve kullanıcıların aynı anda hem yatay hem dikey kaydırma yapmasına gerek kalmadan okunup kullanılabilmelidir.

SC Kodu: 1.4.10 Seviye: AA
URL: https://www.w3.org/TR/WCAG22/#reflow

Genel Tanım​

WCAG 1.4.10 Yeniden Düzenleme (Reflow), içeriğin bilgi veya işlevsellik kaybı olmadan farklı ekran boyutlarına uyum sağlayabilmesini sağlar. Dikey kaydırma içeriği için bu, 320 CSS pikseline eşdeğer bir genişlikte, yatay kaydırma içeriği için ise 256 CSS pikseline eşdeğer bir yükseklikte okunabilir kalmasını sağlamak anlamına gelir. Esasen, web sitesi duyarlıysa ve çeşitli ekran boyutlarına iyi uyum sağlıyorsa, Yeniden Düzenleme gereksinimini otomatik olarak karşılar. Bu, içeriği okumak için yakınlaştırma yapması gerekebilecek kullanıcılar için çok önemlidir, çünkü sayfanın herhangi bir bölümüne erişimi kaybetmeden bunu yapabilmelerini sağlar.

Faydalar​

  • Görme Engelli Kullanıcılar İçin Geliştirilmiş Erişilebilirlik: Görme engelli kullanıcılar, içerik veya işlevsellik kaybı olmadan %400'e kadar yakınlaştırma yapabilirler.
  • Geliştirilmiş Kullanıcı Deneyimi: İçerik, daha küçük ekranlara ve yakınlaştırılmış görünümlere uyacak şekilde yeniden düzenlenerek okumayı ve gezinmeyi kolaylaştırır.

Ana Amaç​

İçeriğin, yatay kaydırma gerektirmeden veya işlevselliği kaybetmeden, daha küçük ekranlara ve yakınlaştırılmış görünümlere uyacak şekilde yeniden boyutlandırılabilmesini ve yeniden düzenlenebilmesini sağlamak.

En İyi Uygulamalar​

  • Tasarımın başlangıcından itibaren Duyarlı Web Tasarımı (RWD) kullanın: Tasarımın başlangıcından itibaren Duyarlı Web Tasarımı (RWD) kullanın.
  • Erişilebilir bağlantılar ve öğeler uygulayın: İçeriği göstermek veya gizlemek için erişilebilir bağlantılar, modal pencereler ve geçiş öğeleri kullanın. Örneğin, bir gezinme çubuğunda ekran görüntü alanı küçülürse veya yakınlaştırılırsa, içeriğe farklı bir görüntü alanında erişmek için bir hamburger düğmesi sağlayın.
  • Yatay kaydırma çubuklarından kaçının: İçerik %400 oranında yakınlaştırıldığında yatay kaydırma çubuklarından kaçının.
  • İçerik çakışmalarını ve kırpılmalarını önleyin: İçerik çakışmalarını, kırpılmaları ve işlev kaybını önleyin.

Örnekler ve Açıklamalar​

Örnek: Uygulama Örnek​

Bir web sitesi, %400'e kadar yakınlaştırma yapıldığında içeriği görüntüleme alanına sığacak şekilde yeniden düzenleyen bir ızgara düzeni kullanıyor.

Nelerden Kaçınılmalı?

HTML/CSS

<html lang = "en" >
<head>
    <meta charset = "UTF-8" >
    <title> Duyarlı Olmayan Izgara Düzeni </title>
    <!-- Yanlış meta viewport bilgisi eksik -->
</head>​​

<body>​​
<header>
  <h1> Web Sitemize Hoş Geldiniz </h1>
</header>​​
<main>
  <div style = "width: 1000px;" >
    <h2> Ana İçerik </h2>​
    <p> Bu , daha küçük bir görüntüleme alanına sığmayacak kadar geniş bir metin paragrafıdır. Yakınlaştırıldığında, kullanıcının tüm içeriği okuyabilmesi için yatay olarak kaydırması gerekir. </p>
  </div>
</main>​​

<aside>
  <p> Buraya ek içerik eklenebilir. </p>
</aside>
<footer>
  <p> Altbilgi bilgileri buraya yazılır. </p>
</footer>​​
</body>​​
</html>​​

Açıklama:

Bu hatalı uygulamada, gerekli viewport meta etiketi eksik olduğundan, doğru ölçeklendirme ve duyarlılık sağlanamıyor. Sonuç olarak, kullanıcılar yakınlaştırdığında içerik viewport için çok geniş hale geliyor ve yatay kaydırma sorununa yol açıyor. Bu da kullanıcıların içeriği okumasını ve etkileşimde bulunmasını zorlaştırarak kötü bir kullanıcı deneyimine neden oluyor. Ayrıca, duyarlı düzen ayarlamaları için medya sorguları ve CSS olmadan, içerik sabit kalıyor ve farklı viewport boyutlarına uyum sağlamıyor, bu da sorunu daha da kötüleştiriyor.

Ne Yapılmalı?

HTML/CSS

<html lang = "en" >
<head>
  <meta charset = "UTF-8" >
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
  <title> Duyarlı Izgara Düzeni </title>
  <style> 
    body {
      display : grid ;
      grid-template-columns : 1fr ;
      gap : 1rem ;
      padding : 1rem ;
    }
    
    @media ( min-width : 576px ) {
        body {
            grid-template-columns : repeat(2, 1fr) ;
        }
    }

    @media ( min-width : 992px ) {
      body {
        grid-template-columns : repeat(3, 1fr);
      }
    }
  </style>​​
</head>​​
<body>​​
  <header>
    <h1> Web Sitemize Hoş Geldiniz </h1>
  </header>​​
  <main>
    <p> Bu ekran alanına sığacak şekilde yeniden düzenlenecek bir metin paragrafıdır; böylece kullanıcıların tüm içeriği okumak için yatay olarak kaydırma yapmasına gerek kalmaz . </p>
  </main>​​
  <aside>
    <p> Buraya ek içerik eklenebilir. </p>
  </aside >
  <footer>
    <p> Altbilgi bilgileri buraya yazılır. </p>
  </footer>​​
</body>​​
</html>​​

Açıklama:

CSS medya sorguları ile duyarlı bir ızgara düzeni kullanmak, içeriğin çeşitli boyutlarda görüntü alanına uyacak şekilde yeniden düzenlenmesini sağlar. Bu, yatay kaydırma ihtiyacını ortadan kaldırır ve %400'e kadar yakınlaştırma yapıldığında bile okunabilirliği ve işlevselliği korur. Ek olarak, width=device-width özelliğine sahip viewport meta etiketi, sayfanın tüm cihazlarda ve ilk yakınlaştırma seviyelerinde uygun bir genişlikte oluşturulmasını sağlar.