Bu kural ne anlama geliyor

Başarı Ölçütü 1.3.2, içeriğin DOM sıralamasının amaçlanan okuma sırasıyla eşleşmesini gerektirir. CSS kullanılarak öğeler görsel olarak yeniden düzenlendiğinde — flexbox order, CSS Grid yerleşimi, mutlak konumlandırma veya float ile — kaynak kodundaki sıralama doğrusal olarak okunduğunda anlamlı olmaya devam etmelidir. Yardımcı teknolojiler görsel düzeni değil, DOM'u takip eder.

Bu ölçüt görsel yeniden sıralamayı yasaklamaz. Okuma sırası anlamayı etkilediğinde programatik sıranın bu anlamı korumasını gerektirir. Sol ve sağ sütunları bağımsız olan iki sütunlu bir düzen serbestçe yeniden sıralanabilir, ancak adımların görsel olarak sıralı göründüğü adım adım bir eğitim, DOM'da da bu sırayı korumalıdır.

Neden önemlidir

Ekran okuyucular içeriği DOM sırasına göre işler. Bir sayfa görsel olarak Adım 1, Adım 2, Adım 3 gösteriyorsa ancak CSS yeniden sıralaması nedeniyle DOM'da Adım 2, Adım 3, Adım 1 şeklindeyse, ekran okuyucu kullanıcısı talimatları yanlış sırada alır. Bu karışıklık yaratır ve içeriği tamamen kullanılamaz hale getirebilir.

Klavye gezintisi de varsayılan olarak DOM sırasını takip eder. Görsel sıra ile DOM sırası birbirinden ayrıldığında Tab tuşu gezintisi düzensiz hale gelir — odak sayfada öngörülemeyen şekilde atlar ve klavye kullanıcılarını şaşırtır. Bu durum motor engelli kişileri, hem görsel hem de klavye ipuçlarına dayanan az gören kullanıcıları ve klavye ile gezinen deneyimli kullanıcıları etkiler.

İlgili axe-core kuralları

Okuma sırası insan değerlendirmesi gerektirdiğinden, bu ölçüt için otomatik axe-core kuralı bulunmaz. Otomatik araçlar görsel sıranın anlamlı olup olmadığını belirleyemez. Uyumluluğu doğrulamak için yardımcı teknolojilerle manuel test şarttır.

Nasıl test edilir

Tüm CSS'i devre dışı bırakın ve sayfa içeriğinin mantıklı, anlamlı bir sırayla okunduğunu doğrulayın.
Sayfayı bir ekran okuyucu ile doğrusal olarak gezinerek okuma sırasının amaçlanan sırayla eşleştiğini kontrol edin.
CSS flexbox order, CSS Grid yerleşimi, float veya mutlak/sabit konumlandırma kullanımını inceleyerek görsel yeniden sıralamanın anlam bozup bozmadığını doğrulayın.
Sayfada Tab tuşuyla ilerleyin ve odak sırasının beklenen görsel sırayı takip ettiğini kontrol edin.
Duyarlı düzenleri farklı kesme noktalarında kontrol edin — yeniden akan içerik okuma sırasını bozabilir.

Nasıl düzeltilir

HTML kaynak sırasının amaçlanan okuma sırasıyla eşleştiğinden emin olun. DOM'u yeniden sıralayan özelliklere dayanmadan görsel sunum için CSS kullanın:

<!-- Doğru: kaynak sırası görsel sıra ile eşleşir -->
<article>
  <h2>Adım 1: Bağımlılıkları yükleyin</h2>
  <p>Projeyi kurmak için npm install çalıştırın.</p>
  <h2>Adım 2: Ortamı yapılandırın</h2>
  <p>Ayarlarınızla bir .env dosyası oluşturun.</p>
  <h2>Adım 3: Sunucuyu başlatın</h2>
  <p>Uygulamayı başlatmak için npm start çalıştırın.</p>
</article>

Anlamlı sıralamaya sahip içeriği yeniden düzenlemek için CSS order veya grid yerleşimini kullanmaktan kaçının:

/* Okuma sırası önemliyken bundan kaçının */
.adım-1 { order: 3; }  /* Görsel olarak son ama DOM'da ilk */
.adım-2 { order: 1; }  /* Görsel olarak ilk ama DOM'da ikinci */
.adım-3 { order: 2; }

/* Bunun yerine HTML kaynak sırasını düzeltin */

CSS Grid kullanırken içeriği yeniden sıralayan açık yerleşimlere dikkat edin:

/* Güvenli: öğeler grid içinde doğal olarak akar */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Riskli: açık yerleşim okuma sırasını bozabilir */
.kenar-cubugu { grid-row: 1 / 3; grid-column: 2; }
.ana-içerik   { grid-column: 1; }

Sık yapılan hatalar

Numaralanmış adımları veya talimatları yeniden düzenlemek için flexbox order özelliğini kullanmak.
"Devamını oku" bağlantısını DOM'da ilgili içerikten önce yerleştirip CSS ile altına konumlandırmak.
CSS Grid ile bir sorunun ve cevabının görsel konumunu değiştirerek ekran okuyucu kullanıcılarının kafasını karıştırmak.
İçeriği float ile konumlandırarak görsel olarak ilişkili öğeleri bir araya getirirken DOM'da birbirinden ayırmak.
Kaynak sırasını düzeltmek yerine pozitif tabindex değerleriyle odak sırasını "düzeltmeye" çalışmak.
Duyarlı tasarımlarda içeriğin mantıksal olmayan bir sırayla tek sütuna yeniden akması.

1.3.2 Anlamlı Sıralama