Anlamlı Sıralama

Kısaca

Ekran okuyucu bir sayfayı ekranda göründüğü sırayla değil, kodda (DOM'da) yer aldığı sırayla okur. Mobil uygulamalarda da erişilebilirlik ağacının sırası belirleyicidir. CSS veya yerleşim ayarlarıyla görsel sıra değiştirildiğinde iki sıra birbirinden kopabilir.

Bu kriter, sırası anlam taşıyan içeriğin (adımlar, form akışı, makale metni, çok sütunlu düzenler) programatik sırada da doğru okunmasını ister. Her öğenin görsel sırayla birebir aynı okunması gerekmez; önemli olan anlamın bozulmamasıdır.

Neleri kapsar?

• DOM sırası: HTML'deki öğe sırasının içeriğin mantıksal sırasıyla örtüşmesi.
• CSS ile yeniden sıralama: order, flex-direction: row-reverse, grid yerleşimi ve mutlak konumlandırmanın anlamı bozmaması.
• Çok sütunlu içerik: Sütunların satır satır değil, sütun sütun ve doğru sırayla okunması.
• Mobilde okuma sırası: Ekran okuyucu ile kaydırarak gezinirken öğelerin anlamlı bir sırayla gelmesi.
• Kapsam dışı notlar: Klavyeyle Tab tuşunda odağın gezdiği sıra Odaklama Sırası kriterinin konusudur; ancak iki konu çoğunlukla aynı düzeltmeyle çözülür.

Kimleri etkiler?

Ekran okuyucu kullanan kör ve az gören kullanıcılar okuma sırasındaki hatalardan doğrudan etkilenir: bir talimatın üçüncü adımını ilk adımdan önce duyan kullanıcı işlemi yanlış yapabilir. Sayfayı kendi stil ayarlarıyla veya okuma modunda görüntüleyen, ekranı büyük oranda büyüten ve içeriği metin olarak seslendiren araçları kullanan kişiler de DOM sırasına bağlıdır.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 46–48 numaralı soruları kapsar. Yönlendirme soruları sayfada ilgili içerik olup olmadığını belirler; yoksa liste sizi sonraki soruya geçirir. Aşağıdaki açıklamalar sorulardan alıntı değil, özetidir. Soruların tam metni için resmî listeye bakın.

Resmî kontrol listesini indirin (PDF), yeni sekmede açılır

Web için kod örnekleri

1. Adımları CSS ile ters çevirmek

Görsel olarak doğru görünen bir adım listesi, kodda ters sıradaysa ekran okuyucu onu ters okur.

<ol class="adimlar" style="display:flex; flex-direction:column-reverse">
  <li>Başvuruyu gönderin</li>
  <li>Belgeleri yükleyin</li>
  <li>e-Devlet ile giriş yapın</li>
</ol>

<ol class="adimlar">
  <li>e-Devlet ile giriş yapın</li>
  <li>Belgeleri yükleyin</li>
  <li>Başvuruyu gönderin</li>
</ol>

2. order özelliği ile yer değiştirmek

order yalnızca görseli değiştirir. Uyarı metni gibi önce okunması gereken bir içerik, kodda da önce gelmelidir.

<div class="kart" style="display:flex; flex-direction:column">
  <p>Formu eksiksiz doldurun.</p>
  <p class="uyari" style="order:-1">
    Önemli: Son başvuru tarihi 30 Kasım.
  </p>
</div>

<div class="kart">
  <p class="uyari">
    Önemli: Son başvuru tarihi 30 Kasım.
  </p>
  <p>Formu eksiksiz doldurun.</p>
</div>

3. Mutlak konumlandırma ile kurulan düzen

Fiyat veya tarih gibi bilgileri kodun sonuna koyup position: absolute ile başa taşımak, okuma sırasını bozar.

<article class="duyuru" style="position:relative">
  <h3>Su kesintisi</h3>
  <p>Bakım çalışması nedeniyle …</p>
  <p style="position:absolute; top:0; right:0">
    Moda Mahallesi
  </p>
</article>

<article class="duyuru">
  <h3>Su kesintisi</h3>
  <p class="etiket">Moda Mahallesi</p>
  <p>Bakım çalışması nedeniyle …</p>
</article>

4. Çok sütunlu içerikte doğru kaynak sırası

İki sütunlu bir karşılaştırmada her sütunun içeriği kodda kendi kapsayıcısında ve bir bütün olarak yer almalıdır. Satır satır bölünen içerik, sütunlar arasında gidip gelerek okunur.

<div class="izgara">
  <p>Bireysel başvuru</p> <p>Kurumsal başvuru</p>
  <p>Kimlik belgesi</p> <p>Vergi levhası</p>
  <p>Gelir belgesi</p> <p>İmza sirküleri</p>
</div>

<div class="izgara">
  <section>
    <h3>Bireysel başvuru</h3>
    <ul><li>Kimlik belgesi</li><li>Gelir belgesi</li></ul>
  </section>
  <section>
    <h3>Kurumsal başvuru</h3>
    <ul><li>Vergi levhası</li><li>İmza sirküleri</li></ul>
  </section>
</div>

5. Grid ile görsel yerleşim, doğru kaynak sırası

CSS Grid, kaynak sırası doğru kaldığı sürece görsel düzeni özgürce kurmanıza izin verir. Önce kodu mantıklı sırayla yazın, yerleşimi sonra CSS ile yapın.

<main class="sayfa">
  <article class="icerik">…</article>
  <aside class="yan">İlgili duyurular</aside>
</main>

<style>
  .sayfa {
    display: grid;
    grid-template-columns: 1fr;
  }
  @media (min-width: 60em) {
    .sayfa { grid-template-columns: 3fr 1fr; }
  }
</style>

Mobil için kod örnekleri

iOS (SwiftUI)

SwiftUI çoğu zaman görsel sırayı izler. Katmanlı (ZStack) veya yan yana düzenlerde sıra bozulursa accessibilitySortPriority ile düzeltilebilir; daha yüksek değer önce okunur.

import SwiftUI

struct DuyuruKarti: View {
    var body: some View {
        ZStack(alignment: .topTrailing) {
            VStack(alignment: .leading) {
                Text("Su kesintisi")
                    .font(.headline)
                    .accessibilityAddTraits(.isHeader)
                    .accessibilitySortPriority(3)
                Text("Bakım çalışması nedeniyle 14.00–18.00 arası su verilemeyecektir.")
                    .accessibilitySortPriority(1)
            }
            Text("Moda Mahallesi")
                .font(.caption)
                .accessibilitySortPriority(2)
        }
        // Sıralama önceliklerinin kart içinde geçerli olması için
        .accessibilityElement(children: .contain)
    }
}

Android (Jetpack Compose)

Compose'da isTraversalGroup ile bir kapsayıcı tanımlanır ve içindeki öğelerin sırası traversalIndex ile belirlenir; daha küçük değer önce okunur.

import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.*

@Composable
fun DuyuruKarti() {
    Box(Modifier.semantics { isTraversalGroup = true }) {
        Column {
            Text(
                "Su kesintisi",
                modifier = Modifier.semantics {
                    heading()
                    traversalIndex = 0f
                }
            )
            Text(
                "Bakım çalışması nedeniyle 14.00–18.00 arası su verilemeyecektir.",
                modifier = Modifier.semantics { traversalIndex = 2f }
            )
        }
        Text(
            "Moda Mahallesi",
            modifier = Modifier
                .align(Alignment.TopEnd)
                .semantics { traversalIndex = 1f }
        )
    }
}

Her iki platformda da önce kodun doğal sırasını düzeltmeyi deneyin; sıralama özelliklerini yalnızca yerleşim bunu gerçekten gerektirdiğinde kullanın.

Nasıl test edilir?

• Stilleri kapatın: Tarayıcıda CSS'i devre dışı bırakın (örneğin Firefox'ta Görünüm › Sayfa Stili › Stil yok). İçerik mantıklı bir sırayla akıyor mu?
• Ekran okuyucuyla baştan sona dinleyin: Sayfayı veya ekranı okuma komutuyla (ya da mobilde sağa kaydırarak) baştan sona gezin. Adımlar, uyarılar ve etiketler doğru sırada mı geliyor?
• CSS'te riskli özellikleri arayın: order, row-reverse, column-reverse, grid-row/grid-column ve position: absolute kullanılan yerleri tek tek kontrol edin.
• Otomatik araçların sınırı: Otomatik araçlar bu kriteri büyük ölçüde değerlendiremez. Bazı araçlar pozitif tabindex değerlerini veya CSS ile ters çevrilmiş düzenleri işaret edebilir, ancak okuma sırasının anlamı bozup bozmadığına bir kişinin karar vermesi gerekir.

Sık yapılan hatalar

• Mobil ve masaüstü için sırayı CSS ile değiştirmek: Ekran boyutuna göre order kullanmak, bir görünümde doğru olan okuma sırasını diğerinde bozar.
• Görseli önce, kodu sonra tasarlamak: Yerleşimi tutturmak için kodun sırasını değiştirmek okuma sırasını bozar.
• Boşlukla hizalamak: Sütun görünümü için boşluk karakterleri veya pre kullanmak, metni ekran okuyucuda anlamsız hâle getirir.
• Modal içeriği sayfanın sonuna eklemek: Açılan pencere kodda sayfanın sonundaysa ve odak oraya taşınmıyorsa kullanıcı içeriğe geç ulaşır (bu durum odak yönetimiyle birlikte ele alınmalıdır).
• Mobilde katmanlı tasarımı test etmemek: Üst üste binen öğelerde erişilebilirlik ağacının sırası görselden farklı olabilir.

Kaynaklar

• Understanding SC 1.3.2: Meaningful Sequence (W3C), İngilizce, yeni sekmede açılır
• Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
• Erişilebilirlik sözlüğü — DOM, erişilebilirlik ağacı, okuma sırası ve diğer terimler.

Kontrol listesi sürümü: V2.2.30.01 (2026). Bu sayfa bilgilendirme amaçlıdır; bağlayıcı metin için Aile ve Sosyal Hizmetler Bakanlığı'nın resmî kontrol listesini esas alın.