Anlamlı Sıra

Kısaca

Ekran okuyucular, klavyeyle gezinme ve okuyucu modları, sayfanın ekranda göründüğü sırayı değil, kodun sırasını izler. CSS öğeleri yer değiştirirse kod sırası, gören kullanıcının gördüğünden farklı olabilir ve içerik anlamını yitirebilir.

Bu kriter, içeriğin sırası anlamı etkiliyorsa doğru bir okuma sırasının programatik olarak belirlenebilmesini ister. Koddaki sıra anlamlı sırayla örtüşmelidir; yani başlık metninden, soru yanıtından, adım ise bir sonraki adımdan önce gelir.

Neleri kapsar?

• Okuma sırası: DOM'daki, PDF etiketlerindeki ya da erişilebilirlik ağacındaki sıra, anlamı koruyan düzende okunur.
• CSS ile yeniden sıralama: order, flex-direction: row-reverse, grid yerleşimi ve mutlak konumlandırma gibi özellikler görsel sırayı değiştirebilir. Bunlar, okuma sırası açısından içeriğin anlamını değiştirmemelidir.
• Yerleşim: Çok sütunlu metinler, kenar çubukları, kartlar ve kayan öğeler mantıklı bir sırayla okunur.
• Dinamik içerik: Sayfa yüklendikten sonra eklenen içerik, örneğin bir hata iletisi ya da araya eklenen bir panel, ait olduğu içeriğin yanına konur.
• Kapsam dışı notlar: Odağın nereye gittiği ve odaklanabilir kontrollerin sırası 2.4.3 (Odak Sırası) kapsamındadır. Konuma dayanan yönergeler ise 1.3.3 kriterinin konusudur.

Kimleri etkiler?

Ekran okuyucu kullanıcıları içeriği kod sırasıyla duyar; dolayısıyla yanlış sıra anlamı karıştırır. Klavye, anahtar cihazı ya da sesle kontrol kullananlar ile okuyucu modu ya da kendi stillerini kullananlar da kod sırasını alır. Net bir sıra bilişsel farklılıkları olan kişilere ve arama motorlarına da yardımcı olur.

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. Anlamı koruyan bir okuma sırası, "algılanabilirlik" ve "anlaşılabilirlik" ilkelerinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 1.3.2'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.

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.3.2 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır.

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. Sırayı değiştiren CSS

Kod sırasından farklı bir görsel sıra, ekran okuyucunun söylediğini karıştırabilir. İçeriği kodda doğru sıraya koyun ve bunu CSS'in düzeltmesine bırakmayın.

<div class="kart" style="display:flex; flex-direction:column">
  <p>Cuma gününe kadar %20 tasarruf edin.</p>
  <h2 style="order:-1">Bahar indirimi</h2>
</div>

<div class="kart">
  <h2>Bahar indirimi</h2>
  <p>Cuma gününe kadar %20 tasarruf edin.</p>
</div>

2. Yerleşim tabloları

Tablo hücreleri boyunca okumak sütunları karıştırır. CSS yerleşimi kullanın; böylece her blok kendi başına okunur.

<table>
  <tr>
    <td>Bölüm 1 burada başlıyor ve devam ediyor…</td>
    <td>İlgili bağlantılar…</td>
  </tr>
  <tr>
    <td>…ve burada bitiyor.</td>
    <td>Daha fazla bağlantı…</td>
  </tr>
</table>

<div class="yerlesim">
  <article>Bölüm 1 burada başlıyor ve devam ediyor… ve burada bitiyor.</article>
  <aside>İlgili bağlantılar… Daha fazla bağlantı…</aside>
</div>

.yerlesim { display: grid; grid-template-columns: 3fr 1fr; gap: 24px; }

3. Yerleşim için mutlak konumlandırma

Mutlak konumlandırma içeriği akıştan çıkarır. DOM'u okuma sırasında tutun ve yerleştirme için grid ya da flex kullanın.

<div style="position:absolute; top:200px">Adım 2: Onayla</div>
<div style="position:absolute; top:100px">Adım 1: Bilgileri girin</div>

<ol>
  <li>Adım 1: Bilgileri girin</li>
  <li>Adım 2: Onayla</li>
</ol>

4. Sayfa yüklendikten sonra eklenen içerik

Yeni içeriği sayfanın sonuna değil, ait olduğu öğenin yanına ekleyin.

// Hata, body'nin sonuna eklenir
document.body.appendChild(hataIletisi);

// Hata, alanın hemen arkasına eklenir
alan.insertAdjacentElement("afterend", hataIletisi);

5. Sırayı onarmak için pozitif tabindex kullanmayın

Pozitif bir tabindex ikinci bir sıra yaratır ve doğru tutması zordur. Bunun yerine öğelerin sırasını düzeltin.

<a href="/a" tabindex="3">A</a>
<a href="/b" tabindex="1">B</a>
<a href="/c" tabindex="2">C</a>

<a href="/b">B</a>
<a href="/c">C</a>
<a href="/a">A</a>

Mobil için kod örnekleri

Yerel mobil uygulamalarda aynı kural geçerlidir. Ekran okuyucular öğeleri platformun verdiği sırayla okur. Bu sıranın anlamla örtüştüğünü kontrol edin ve örtüşmüyorsa sırayı açıkça belirleyin.

iOS (SwiftUI)

import SwiftUI

struct SiparisOzeti: View {
    var body: some View {
        // Toplam görsel olarak altta yer alır, ama başlıktan
        // ve öğe listesinden sonra okunmasını istiyoruz.
        VStack(alignment: .leading, spacing: 12) {
            Text("Toplam: ₺420")
                .accessibilitySortPriority(1)   // en son okunur

            Text("Öğeler")
                .accessibilitySortPriority(3)   // ilk okunur

            Text("2 × Defter")
                .accessibilitySortPriority(2)
        }
        .accessibilityElement(children: .contain)
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.isTraversalGroup
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.traversalIndex

@Composable
fun SiparisOzeti() {
    // traversalIndex ile okuma sırası: küçük değerler önce gelir
    Column(modifier = Modifier.semantics { isTraversalGroup = true }) {
        Text(
            text = "Toplam: ₺420",
            modifier = Modifier.semantics { traversalIndex = 2f }
        )
        Text(
            text = "Öğeler",
            modifier = Modifier.semantics { traversalIndex = 0f }
        )
        Text(
            text = "2 × Defter",
            modifier = Modifier.semantics { traversalIndex = 1f }
        )
    }
}

Nasıl test edilir?

• Sayfayı stilsiz okuyun: CSS'i kapatın ya da bir okuyucu modu açın. Metin hâlâ mantıklı bir sırayla okunuyor mu?
• Ekran okuyucuyla dinleyin: Sayfayı NVDA, VoiceOver ya da TalkBack ile baştan sona okuyun. Her başlık metninden, her soru yanıtından önce geliyor mu ve her adım sırasında mı?
• Görsel sırayı kod sırasıyla karşılaştırın: order, row-reverse, mutlak konumlandırma ve grid yerleştirmesini arayın. Sırayı değiştiriyorlarsa anlamın korunduğunu kontrol edin.
• Sayfada Tab ile gezinin: Odak, içerikle örtüşen bir sırayla mı ilerliyor? (Ayrıntılar 2.4.3 kapsamındadır.)
• Dinamik içeriği kontrol edin: Hataları, iletişim kutularını ve eklenen panelleri tetikleyin. Yeni içerik, ait olduğu içeriğin yanına mı konuyor?
• Mobili kontrol edin: Her ekranı ekran okuyucuyla parmak kaydırarak gezin. Sıra görsel yerleşimle ve anlamla örtüşüyor mu?
• Denetleyiciyi başlangıç olarak kullanın: Otomatik araçlar bir sıranın mantıklı olup olmadığına karar veremez. Buna ancak bir kişi karar verebilir.

Sık yapılan hatalar

• Görsel sırayı yalnızca CSS ile düzeltmek: Yardımcı teknolojinin okuduğu, kod sırasıdır.
• Başlığı kodda içeriğinin arkasına koymak: Başlık, tanıttığı metinden sonra okunur.
• Sayfa yerleşimi için tablo kullanmak: Hücreler boyunca okumak sütunları karıştırır.
• Tüm yerleşim için mutlak konumlandırma: Kod sırası artık sayfanın gösterdiğiyle örtüşmez.
• Pozitif tabindex kullanmak: İkinci bir sıra yaratır ve kolayca bozulur.
• Dinamik içeriği sayfanın sonuna eklemek: Ait olduğu yerden çok uzakta okunur.
• Sıranın ekran boyutuna göre değişmesine izin vermek: Okuma sırası masaüstü ve mobil yerleşim arasında farklı olabilir.
• Mobili unutmak: Bir uygulamadaki üst üste binen ya da yığılmış öğeler yanlış sırayla okunabilir.

Kaynaklar

• Understanding SC 1.3.2: Meaningful Sequence (W3C), İngilizce, yeni sekmede açılır
• G57: Ordering the content in a meaningful sequence (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.