WCAG 1.3.2: Anlamlı Sıra

Bu Kuralın Anlamı

WCAG Başarı Kriteri 1.3.2 — Anlamlı Sıra (Seviye A) şöyle der: "İçeriğin sunulduğu sıranın anlamını etkilemesi durumunda, doğru okuma sırası programatik olarak belirlenebilir olmalıdır." Basitçe söylemek gerekirse, sayfa içeriğinizin görsel sırası anlam taşıyorsa — bir süreçteki adımlar, bir konuşma dizisi, bir form etiketinin kendi girdisiyle eşleştirilmesi, numaralı bir liste — o zaman alttaki DOM sırası da aynı diziyi yansıtmalıdır ki yardımcı teknolojiler bunu doğru şekilde ortaya koyabilsin.

Buradaki kilit ifade "eğer sıra anlamını etkiliyorsa". Sayfadaki her sıralama kararı bu kapsama girmez. Örneğin, birbiriyle ilgisiz logolardan oluşan dekoratif listeler ardışık bir anlam taşımaz. Ancak yeniden sıralandığında kullanıcının anladığını değiştirecek her içerik — bir tarifin malzeme listesinin ardından gelen talimatlar, ürünlerle eşleştirilmiş fiyat tablosu, çok adımlı bir ödeme süreci — mutlaka anlamlı görsel sırayla eşleşen bir DOM sırasına sahip olmalıdır.

Başarılı sayılan durum: DOM kaynak sırası mantıksal okuma sırasıyla eşleşir VEYA (görsel sunumu yeniden sıralayan CSS gibi) bir dönüşüm, programatik okuma sırasının yardımcı teknolojiler tarafından doğru şekilde belirlenmesine hâlâ izin verir. DOM’u doğrudan okuyan ekran okuyucular, CSS görsel konumlandırma DOM sırasından farklı olsa bile içeriğe hâlâ doğru, anlamlı sırada ulaşabilmelidir.

Başarısız sayılan durum: CSS tekniklerini — position: absolute, CSS Grid order özelliği, CSS Flexbox order özelliği veya CSS çok sütunlu yerleşim — kullanarak içeriği görsel olarak yeniden sıralamak ve görsel dizinin, DOM sırasının vermediği bir anlam iletmesi. Klasik bir örnek, DOM’da ana içerikten önce yer alan ancak görsel olarak ondan sonra gösterilen bir kenar çubuğudur; bu kenar çubuğu, yalnızca ana metin okunduktan sonra anlamlı olan bağlamsal notlar içeriyorsa sorun yaratır.

WCAG spesifikasyonu açıkça bir istisna belirtir: Bir sıra anlamlı değilse, programatik olarak belirlenebilir olması gerekmez. Ayrıca kriter, görsel ve DOM sıralarının her zaman özdeş olmasını değil, doğru okuma sırasının belirlenebilir olmasını şart koşar — CSS, AT’ye sunulan sıra anlamlı kaldığı sürece görsel olarak yeniden sıralama yapabilir. Ancak pratikte, yalnızca CSS ile yeniden sıralama çoğu zaman AT sırasını bozar ve büyük dikkatle ele alınmalıdır.

Neden Önemlidir

Ekran okuyucu kullanıcıları en doğrudan etkilenen gruptur. Amerika Birleşik Devletleri’nde yaklaşık 7.5 milyon kişi ekran okuma yazılımı kullanmaktadır ve dünya genelinde Dünya Sağlık Örgütü, 2.2 milyar kişinin bir tür görme bozukluğuna sahip olduğunu tahmin etmektedir. NVDA, JAWS veya VoiceOver ile bir sayfada dolaşan kör bir kullanıcı için okuma deneyimi tamamen programatik sıraya — özellikle DOM sırasına — bağlıdır. Bir geliştirici, bir uyarı mesajını bir formun üzerine görsel olarak taşımak için Flexbox yerleşiminde CSS order kullanır, ancak DOM bu uyarıyı form girdilerinden sonra yerleştirirse, ekran okuyucu kullanıcısı uyarıyı duymadan önce formu dolduracaktır. Bu küçük bir rahatsızlık değildir; hatalara, başarısız işlemlere ve kritik hizmetlerden dışlanmaya yol açabilir.

Bilişsel engeli olan kullanıcılar da anlamlı sıralamadan önemli ölçüde fayda sağlar. Disleksi, dikkat eksikliği veya işlem farklılıkları olan kullanıcılar sıklıkla mantıklı, öngörülebilir içerik akışına güvenir. Başlık hiyerarşisi ve içerik blokları karışık bir DOM sırasıyla sunulduğunda, sayfayı görebilen kullanıcılar bile tarayıcı okuma modu, metin okuma araçları veya CSS’i kaldırıp ham DOM içeriğini gösteren sadeleştirilmiş görüntüleme eklentilerine güveniyorlarsa zorlanabilir.

Klavyeyle veya anahtarlı erişimle gezinmek zorunda olan motor engelli kullanıcılar, etkileşimli öğeler arasında DOM sırasına göre Tab tuşuyla ilerler. DOM’da bir gönder düğmesi, ilişkili form alanlarından önce (ancak görsel olarak onlardan sonra) yer alıyorsa, sekme sırası kafa karıştırıcı ve hataya açık hale gelir.

Somut bir gerçek dünya senaryosu: Bir Türk e-ticaret ödeme sayfası, CSS Grid yerleşimi kullanıyor ve order özelliği ile "Sipariş Özeti" panelini görsel olarak sağ tarafa, fatura formundan sonra gelecek şekilde taşıyor. Ancak DOM’da sipariş özeti HTML’i önce geliyor. Ekran okuyucu kullanan bir kullanıcı, fatura formunu duymadan önce toplam fiyatı ve ürün listesini duyuyor — ne için ödeme yaptıklarına dair henüz bağlamları yok. Bu, terk etmeye, kafa karışıklığına ve erişilebilirlik şikâyetlerine yol açabilir. Türkiye’nin yeni erişilebilirlik düzenlemeleri kapsamında, ticari bir platformda böyle bir hata artık düzenleyici bir sorumluluk anlamına gelir.

Erişilebilirliğin ötesinde, anlamlı DOM sırası SEO’ya da fayda sağlar. Arama motoru tarayıcıları DOM sırasını ekran okuyuculara benzer şekilde okur. En anlamlı içeriği — başlıklar, birincil içerik, temel harekete geçirici mesajlar — önce yerleştiren iyi yapılandırılmış bir DOM, sayfaların nasıl indekslendiğini ve sıralandığını olumlu yönde etkileyebilir.

İlgili Axe-core Kuralları

WCAG 1.3.2, manuel test gerektiren bir kriter olarak sınıflandırılır. Axe-core dahil otomatik araçlar, içeriğin anlamını — özellikle belirli bir içerik sırasının yorumunu değiştirip değiştirmediğini — anlamayı gerektireceği için sıra ihlallerini güvenilir biçimde işaretleyemez. Bu, hiçbir otomatik ayrıştırıcının evrensel olarak yapamayacağı anlamsal bir yargıdır. Otomatik bir araç, CSS’in öğeleri görsel olarak yeniden sıralamak için kullanıldığını tespit edebilir, ancak bu yeniden sıralamanın anlamlı mı yoksa dekoratif mi olduğunu insan yargısı olmadan belirleyemez.

• Manuel inceleme — CSS görsel sırası vs. DOM sırası: Axe-core’un 1.3.2 için özel bir otomatik kuralı yoktur. Test uzmanları, CSS’i devre dışı bırakarak ve doğrusal hâle getirilmiş içeriğin hâlâ anlamlı olup olmadığını gözlemleyerek bir sayfanın görsel sunumunu DOM kaynak sırasıyla manuel olarak karşılaştırmalıdır. Tarayıcının yerleşik erişilebilirlik ağacı inceleyicisi veya axe DevTools "Full Page Scan" gibi araçlar yapısal anormallikleri ortaya çıkarabilir, ancak sıranın anlamlı olup olmadığına insan karar vermelidir.
• Manuel inceleme — CSS Flexbox ve Grid order özelliği: Axe DevTools veya tarayıcı DevTools, CSS order özelliğini veya içerik (sadece dekoratif olmayan) öğeleri için position: absolute/fixed kullanımını ortaya çıkardığında, görsel sıranın DOM sırasından anlamlı biçimde sapıp sapmadığını insan test uzmanı değerlendirmelidir. Otomatik araçlar bunu kendi başlarına hata olarak işaretlemez.
• Manuel inceleme — Tablo yerleşiminin yanlış kullanımı: Görsel yerleşim için (tablo verisi yerine) HTML tabloları kullanan sayfalar, ekran okuyucuların hücreleri, amaçlanan okuma akışıyla eşleşmeyen bir DOM sırasına göre okumasına neden olabilir. Otomatik araçlar yerleşim tablolarını ayrı bir sorun olarak işaretleyebilir, ancak sıra üzerindeki etkisi insan doğrulaması gerektirir.

Nasıl Test Edilir

1. Önce otomatik bir tarama çalıştırın: Tam sayfa erişilebilirlik taraması yapmak için axe DevTools (tarayıcı uzantısı) veya Chrome DevTools içindeki Lighthouse’u kullanın. Bu araçların hiçbiri doğrudan bir 1.3.2 ihlalini işaretlemese de, sıra sorunlarına işaret edebilecek ilgili yapısal sorunları — yerleşim tabloları, hatalı başlık sırası veya ARIA yanlış kullanımı — ortaya çıkaracaktır. Görsel sıra veya yapısal anormalliklerle ilgili uyarıları manuel takip için not edin.
2. Tüm CSS’i devre dışı bırakın ve doğrusal hâle getirilmiş içeriği inceleyin: Firefox DevTools veya Chrome DevTools’ta tüm stil sayfalarını devre dışı bırakın (veya Web Developer uzantısının "Disable All Styles" özelliğini kullanın). Sayfayı baştan sona okuyun. Şunu sorun: Bu sırada içerik hâlâ anlamlı mı? Bir hikâyeyi, bir formu veya bir süreci kafa karışıklığı olmadan takip edebiliyor musunuz? Anlam bozuluyorsa, sayfa muhtemelen 1.3.2’yi karşılamıyordur.
3. DOM kaynak sırasını doğrudan inceleyin: DevTools’u açın, Elements/Inspector paneline gidin ve HTML kaynağını okuyun. Her bir büyük içerik bloğunun DOM’daki konumunu görsel konumuyla karşılaştırın. Özellikle CSS Flexbox veya Grid kullanan öğelere dikkat edin — hesaplanmış stillerde order özelliğini arayın ve anlamlı bir sıra uyumsuzluğu yaratmadığını doğrulayın.
4. NVDA ve Firefox ile test edin: NVDA’yı başlatın, Firefox’u açın ve sayfaya gidin. Tüm sayfayı baştan sona dinlemek için Insert + Aşağı Ok tuşlarına basarak "Hepsini Oku" modunu etkinleştirin. Görsel olarak takip edin ve konuşulan içerik sırasının anlamlı görsel sırayla uyuşmadığı her durumu not edin. Form etiketleri ve girdilerine, numaralı listelere, adım adım talimatlara ve önceki içeriğe atıfta bulunan içeriklere dikkat edin.
5. VoiceOver ve Safari ile test edin (macOS/iOS): VoiceOver’ı etkinleştirin (macOS’ta Command + F5). Başlıklar veya işaretçiler arasında gezinmek için rotor’u (Control + Option + U) kullanın ve sayfayı doğrusal olarak okumak için Control + Option + Sağ Ok tuşlarını kullanın. İçeriğin mantıklı, anlamlı bir sırada akıp akmadığını not edin. iOS’ta, içerik boyunca ilerlemek için sağa kaydırın ve sıra bütünlüğünü doğrulayın.
6. JAWS ve Chrome ile test edin: JAWS’ı Chrome ile açın ve Insert + Aşağı Ok "Hepsini Oku" komutunu kullanın. NVDA’da olduğu gibi, dinlerken görsel olarak takip edin ve anlamlı sıranın dışında sunulan her içeriği işaretleyin. JAWS, büyük ölçüde DOM sırasını yansıtan erişilebilirlik ağacını okur; bu da onu sıra sorunları için güvenilir bir test hâline getirir.
7. Klavyeyle sekme sırasını test edin: Ekran okuyucu olmadan, sayfadaki tüm etkileşimli öğeler arasında ilerlemek için sadece Tab tuşuna art arda basın. Odak sırası mantıklı, anlamlı bir yolu izlemelidir — Latin alfabeli dillerde genellikle soldan sağa ve yukarıdan aşağıya, gören bir kullanıcının sayfayı okuyacağı şekilde. Bölümler arasında öngörülemez biçimde atlayan bir sekme sırası, bir DOM sırası sorununa işaret eder.

Nasıl Düzeltilir

CSS Flexbox order özelliği — Hatalı

<!-- Görsel sıra: Uyarı, sonra Form. DOM sırası ters. -->
<div style='display: flex; flex-direction: column;'>
  <form style='order: 1;'>
    <label for='email'>Email</label>
    <input type='email' id='email' name='email' />
    <button type='submit'>Subscribe</button>
  </form>
  <div class='warning' style='order: 0;'>
    <p>Warning: You must be 18 or older to subscribe.</p>
  </div>
</div>

CSS Flexbox order özelliği — Doğru

<!-- DOM sırası artık anlamlı görsel sırayla eşleşiyor: Önce Uyarı, sonra Form. -->
<!-- CSS order özelliği kaldırıldı; görsel ve AT sırasını yalnızca DOM dizisi kontrol ediyor. -->
<div style='display: flex; flex-direction: column;'>
  <div class='warning'>
    <p>Warning: You must be 18 or older to subscribe.</p>
  </div>
  <form>
    <label for='email'>Email</label>
    <input type='email' id='email' name='email' />
    <button type='submit'>Subscribe</button>
  </form>
</div>

Yanlış yönlendirici sıra oluşturan mutlak konumlandırılmış içerik — Hatalı

<!-- Adım etiketleri görsel olarak içerik kutularının üzerinde görünüyor, ancak DOM’da onlardan sonra geliyor. -->
<div style='position: relative; height: 200px;'>
  <div style='position: absolute; top: 50px; left: 0;'>
    <p>Step 1: Fill in your personal details below.</p>
  </div>
  <div style='position: absolute; top: 0; left: 0;'>
    <p><strong>1</strong></p>
  </div>
</div>

Yanlış yönlendirici sıra oluşturan mutlak konumlandırılmış içerik — Doğru

<!-- DOM sırası artık anlamlı okuma dizisini yansıtıyor: önce etiket, sonra numara. -->
<!-- Mutlak konumlandırma, anlamlı sırayı tersine çevirmek için değil, yalnızca görsel iyileştirme için kullanılıyor. -->
<div style='position: relative; height: 200px;'>
  <div style='position: absolute; top: 0; left: 0;'>
    <p><strong>1</strong></p>
  </div>
  <div style='position: absolute; top: 50px; left: 0;'>
    <p>Step 1: Fill in your personal details below.</p>
  </div>
</div>

Yeniden sıralanmış içerik alanlarıyla CSS Grid — Hatalı

<!-- Kenar çubuğu (bağlamsal notlar) görsel olarak sağda, ana içerikten sonra görünüyor. -->
<!-- Ancak DOM’da önce geliyor, bu yüzden ekran okuyucular makaleden önce kenar çubuğu notlarını okuyor. -->
<div class='layout'>
  <aside class='sidebar'>
    <p>Note: The statistics below are sourced from the 2024 annual report.</p>
  </aside>
  <main class='content'>
    <h1>Annual Sales Overview</h1>
    <p>Total revenue grew by 23% compared to the prior year...</p>
  </main>
</div>
<!--
.layout { display: grid; grid-template-columns: 3fr 1fr; }
.sidebar { grid-column: 2; }
.main { grid-column: 1; }
-->

Yeniden sıralanmış içerik alanlarıyla CSS Grid — Doğru

<!-- Ana içerik DOM’da önce geliyor ve anlamlı okuma sırasıyla eşleşiyor. -->
<!-- Ana içeriği açıklayan kenar çubuğu DOM’da onu takip ediyor. -->
<!-- CSS Grid, DOM dizisini değiştirmeden kenar çubuğunu görsel olarak sağ tarafa yerleştiriyor. -->
<div class='layout'>
  <main class='content'>
    <h1>Annual Sales Overview</h1>
    <p>Total revenue grew by 23% compared to the prior year...</p>
  </main>
  <aside class='sidebar'>
    <p>Note: The statistics above are sourced from the 2024 annual report.</p>
  </aside>
</div>
<!--
.layout { display: grid; grid-template-columns: 3fr 1fr; }
.content { grid-column: 1; }
.sidebar { grid-column: 2; }
-->

Yaygın Hatalar

• HTML kaynak sırasını güncellemeden anlamlı içerik bloklarını görsel olarak yeniden sıralamak için CSS Flexbox veya Grid order özelliğini kullanmak — bu, modern web geliştirmede 1.3.2 ihlallerinin en yaygın tek nedenidir. Her zaman önce DOM sırasını ayarlayın ve CSS’i yalnızca görsel sunumu iyileştirmek için kullanın.
• Bir sayfanın birincil <main> içeriğini DOM’da bir <nav> veya <aside> öğesinden sonra yerleştirip ana içeriği görsel olarak önce göstermek için CSS kullanmak — ekran okuyucular, anlamlı diziyi bozarak birincil makaleden önce gezinme veya kenar çubuğu içeriğini okuyacaktır.
• CSS sütunları veya float’larla çok sütunlu dergi tarzı yerleşimler oluşturmak ve DOM sırasını her sütun içinde yukarıdan aşağıya sütun sütun çalıştırmak, ancak görsel sırayı satır satır düzenlemek — birçok ızgara tabanlı içerik yerleşiminde olduğu gibi satır satır okuma bekleyen kullanıcılar, içeriği yanlış sırada alacaktır.
• Bir form hata özetini sayfanın üstüne görsel olarak çekmek için position: absolute veya position: fixed kullanmak ancak hata özeti öğesini DOM’un altında bırakmak — bir form gönderen ekran okuyucu kullanıcıları, sayfanın altına ulaşana kadar hata özetine rastlamayacak ve kritik geri bildirimi kaçıracaktır.
• Adım adım talimatları veya numaralı dizileri CSS counter reset’leriyle oluşturmak ancak adımların DOM sırasını anlamlı sırayla eşleştirmemek — görsel numaralar doğru görünebilir, ancak sesli okuma sırası yanlış olacaktır.
• Dinamik içeriği (ör. sohbet mesajları, canlı akış öğeleri, toast bildirimleri) DOM’da bir kapsayıcının en üstüne eklemek ancak görsel gelenek en yeni öğeleri altta gösterirken — veya tam tersi — ARIA canlı bölgeleri kullanmadan veya DOM’u anlamlı sırayla eşleşecek şekilde ayarlamadan.
• Tablo verisi yerine yerleşim için HTML tabloları kullanmak ve hücreleri satır yerine sütun öncelikli bir DOM sırasına yerleştirmek — yardımcı teknolojiler tablo hücrelerini DOM sırasına göre (satır satır) okur, bu nedenle sütun öncelikli oluşturulmuş yerleşim tabloları yanlış sırada okunacaktır.
• İçeriği görsel olarak sıralamak veya yeniden düzenlemek için JavaScript’e güvenmek (ör. sıralanabilir bir ürün listesi) ancak alttaki DOM sırasını güncellememek — bir kullanıcı fiyata göre sıraladıktan sonra, yalnızca CSS sınıfları veya görsel konumlandırma güncellendiyse ekran okuyucu öğeleri hâlâ orijinal sıralanmamış düzende duyurabilir.
• Dipnotları veya son notları, açıklama yaptıkları paragrafın hemen ardından DOM’a yerleştirmek ancak görsel sunumda tüm dipnotları sayfanın altında gruplamak — veya tam tersi — AT’ye sunulan sıranın amaçlanan okuma akışı için anlamlı olmasını sağlamadan.
• Tek bir mantıksal içerik birimini bitişik olmayan DOM konumlarına bölmek — örneğin, bir <figure> öğesinin <figcaption>’ını kaynağın çok uzağına yerleştirerek ekran okuyucuların altyazıyı bağlamından kopuk şekilde duyurmasına neden olmak.

Türkiye’nin Erişilebilirlik Düzenlemeleriyle İlişkisi

Türkiye’nin 21 Haziran 2025 tarihli ve 32933 sayılı Resmî Gazete’de yayımlanan 2025/10 sayılı Cumhurbaşkanlığı Genelgesi, WCAG 2.2 ile uyumlu zorunlu web erişilebilirliği gerekliliklerini belirlemektedir. WCAG 1.3.2 Anlamlı Sıra, Seviye A kriteridir ve bu da onu tüm kapsamdaki kuruluşların karşılaması gereken asgari gereklilik setinin bir parçası yapar.

Genelge, uyumu kademeli bir takvimle zorunlu kılar: kamu kurumları genelgenin yayım tarihinden itibaren bir yıl içinde uyum sağlamak zorundayken, özel sektör kuruluşlarının uyum için iki yılı vardır.

Aşağıdaki kuruluş türleri genelge kapsamında açıkça sayılmıştır ve bu nedenle tüm dijital içerik ve web arayüzlerinde bilgiyi programatik olarak belirlenebilir anlamlı bir sırada sunmak zorundadır:

• Kamu kurumları ve devlet kurumları — kamuya açık web siteleri veya dijital hizmetler işleten tüm merkezi ve yerel yönetim birimleri, bakanlıklar ve devlete bağlı kuruluşlar.
• Bankalar ve finans kuruluşları — çevrimiçi bankacılık portalları, yatırım platformları ve sigorta şirketi web siteleri dahil; burada ardışık içeriklerin (hesap özetleri, adım adım kredi başvuruları, işlem geçmişleri) tüm kullanıcılar tarafından doğru sırada okunabilir olması gerekir.
• E-ticaret platformları — ürün listeleri, çok adımlı ödeme akışları ve sipariş onay dizileri, DOM sıralarının anlamlı görsel diziyi doğru şekilde yansıtmasını gerektirir; böylece kör ve az gören alışveriş yapanlar, AT kaynaklı kafa karışıklığı olmadan satın alma işlemlerini tamamlayabilir.
• Hastaneler ve sağlık hizmeti sağlayıcıları — talimatların, uyarıların ve form alanlarının sırasının doğrudan güvenlik etkileri taşıdığı hasta portalları, randevu alma sistemleri ve tıbbi bilgi sayfaları.
• 200.000 veya daha fazla abonesi olan telekomünikasyon şirketleri — tarife tabloları ve özellik listelerinin anlamlı, programatik olarak doğru bir sırada sunulması gereken hizmet karşılaştırma sayfaları, sözleşme yönetim arayüzleri ve destek portalları.
• Seyahat acenteleri ve özel ulaşım şirketleri — rezervasyon akışları, seyahat planı görünümleri ve koltuk seçimi arayüzleri; burada (kalkışın varıştan önce gelmesi, 1. adımın 2. adımdan önce gelmesi gibi) görsel sıralamaya büyük ölçüde dayanılır ve bu sıralama DOM’da doğru şekilde yansıtılmalıdır.
• Millî Eğitim Bakanlığı (MoNE) tarafından yetkilendirilmiş özel okullar — öğrenme yönetim sistemleri, ders içerik sayfaları ve kayıt portalları; burada dersler, modüller, değerlendirmeler gibi eğitim dizilerinin programatik olarak belirlenebilir bir sırada sunulması gerekir ki yardımcı teknolojiler kullanan öğrenciler ders akışını doğru şekilde takip edebilsin.

Bu platformların herhangi birinde WCAG 1.3.2’ye uyulmaması, yalnızca en iyi uygulama eksikliği değildir; 2025/10 sayılı genelge kapsamında denetime ve iyileştirme yükümlülüklerine tabi bir düzenleyici uyumsuzluk teşkil eder. 1.3.2 ihlallerinin, Türk web geliştirmesinde yaygın olan modern CSS yerleşim tekniklerinden (Flexbox, Grid) sıklıkla kaynaklandığı göz önüne alındığında, kuruluşlar uyum yol haritalarının bir parçası olarak yerleşim kalıplarının ve DOM sıralama uygulamalarının sistematik bir denetimini önceliklendirmelidir.