ADA Kapsamında Formlarda, Adımlarda ve Bildirimlerde Okuma Sırası

Yardımcı teknoloji ekranı değil, kodu okur

Bir mahkemenin e-dosyalama sayfasında beş adım düzgün bir sıra halinde görünür. Perde arkasında bir stil sayfası "3. Adım: Harcı ödeyin" kutusunu "2. Adım: Belgeleri yükleyin" kutusunun önüne taşımıştır. Gören kullanıcılar 1, 2, 3 görür. Düzeni yok sayan bir ekran okuyucu, okuma kipi veya kullanıcı stil sayfası ise kod sırasını okur: yüklemeden önce ödeme.

WCAG 1.3.2 (A seviyesi), içeriğin sunulduğu sıra anlamını etkiliyorsa doğru bir okuma sırasının programatik olarak belirlenebilmesini ister. Yardımcı teknoloji dahil yazılım, düzen değişse bile içeriği anlamını koruyan bir sırayla sunabilmelidir.

Sıra ne zaman önemlidir, ne zaman değil?

Yalnızca anlamı etkileyen sıra kapsamdadır. Gezinmenin ana içerikten önce ya da sonra gelmesi ikisi de kabul edilebilir. Form yönergesi açıkladığı alandan önce, tablo başlığı tablodan önce, bir adım sonraki adımdan önce gelmelidir. Birden fazla doğru sıra olabilir ve yalnızca birinin programatik olarak erişilebilir olması yeterlidir.

Odağın nereye gittiği farklı bir sorudur ve 2.4.3 Odak Sırası'nda ele alınır. Bu ölçüt neyin hangi sırayla okunduğuyla ilgilidir.

Çok adımlı akışlar ve bildirimler nerede aksıyor?

Mahkeme e-dosyalama, yardım başvuruları ve ruhsat sihirbazları dizilerdir: sıra, içeriğin kendisidir. Tasarımcılar özeti sağda ya da eylem çağrısını metnin üstünde istedikleri için bu sayfalar flexbox, grid ve mutlak konumlandırmayla en çok yeniden biçimlendirilen sayfalardır. Son tarihi kodda "Kabul et" düğmesinin arkasına yerleştiren hukuki bir bildirim veya dinamik güncellemeden sonra sayfanın en sonuna eklenen bir hata iletisi, kişiyi anlamı sırasız aramak zorunda bırakır. Bu bir A seviyesi maddesidir; genel standart WCAG 2.1 AA ve ADA sayfasında açıklanır.

Web kalıpları: kod sırasını anlamlı tutun

CSS bir kutuyu okuma sırasındaki yerini değiştirmeden taşıyabilir. Stil sayfasını değil, HTML'i düzeltin.

<ol class="adimlar">
  <li>1. Adım: Dosya numarasını girin</li>
  <li class="a3">3. Adım: Harcı ödeyin</li>
  <li>2. Adım: Belgeleri yükleyin</li>
</ol>
.adimlar { display: flex; }
.a3 { order: 3; }

<ol class="adimlar">
  <li>1. Adım: Dosya numarasını girin</li>
  <li>2. Adım: Belgeleri yükleyin</li>
  <li>3. Adım: Harcı ödeyin</li>
</ol>
.adimlar { display: flex; }

İşaretlemeyi yukarıdan aşağı okuyun ve sesli okunan bir sayfa olarak anlam taşıyıp taşımadığını sorun.

<button type="submit">Kabul et ve dosyala</button>
<p class="sartlar">Dosyalama süresi: son günün 17.00'si.</p>
.sartlar { position: absolute; top: 0; }

<p class="sartlar">Dosyalama süresi: son günün 17.00'si.</p>
<button type="submit">Kabul et ve dosyala</button>

Betikle yazılan iletiler, belgenin sonuna değil ait oldukları içeriğin yanına düşmelidir. Canlı bölgeyi metniyle birlikte eklemek yerine baştan boş olarak yerinde tutun ve sonradan doldurun.

const msg = document.createElement('p');
msg.textContent = 'Dosya numarası bulunamadı.';
document.body.append(msg);

// <p id="dosya-hata" role="alert"></p> HTML'de alanın
// hemen ardında, boş olarak zaten duruyor.
document.getElementById('dosya-hata').textContent =
  'Dosya numarası bulunamadı.';

Yerel uygulamalarda: gezinme sırası

Görsel düzen ile doğal sıra uyuşmadığında yerel araç setleri okuma sırasını belirlemenize izin verir. Daha iyisi, görünümleri okunmaları gereken sırayla dizmektir.

ZStack(alignment: .topLeading) {
    Text("Ödenecek tutar: 84,20 TL")
    Text("Su faturası, son ödeme 3 Kasım")
        .offset(y: -24)
}

ZStack(alignment: .topLeading) {
    Text("Ödenecek tutar: 84,20 TL")
        .accessibilitySortPriority(1)
    Text("Su faturası, son ödeme 3 Kasım")
        .offset(y: -24)
        .accessibilitySortPriority(2)
}

Box {
    Text("Ödenecek tutar: 84,20 TL")
    Text("Su faturası, son ödeme 3 Kasım",
         Modifier.offset(y = (-24).dp))
}

Box(Modifier.semantics { isTraversalGroup = true }) {
    Text("Ödenecek tutar: 84,20 TL",
         Modifier.semantics { traversalIndex = 1f })
    Text("Su faturası, son ödeme 3 Kasım",
         Modifier.semantics { traversalIndex = 0f }
             .offset(y = (-24).dp))
}

Okuma sırası nasıl görülür?

1. Sayfanın CSS'ini kapatın (tarayıcı eklentisi veya geliştirici araçları) ve sayfayı yukarıdan aşağı okuyun.
2. Varsa tarayıcının okuma kipini açın ve ürettiği sıraya bakın.
3. Ekran okuyucuyla, göz atma kipinde, en baştan dinleyin. Her yönerge atıfta bulunduğu şeyden önce mi geliyor?
4. Dinamik bir güncellemeden sonra yeni içeriğin sırada nereye düştüğünü bulun.

Otomatik araçlar bir sıranın anlamlı olup olmadığına karar veremez; bu kontrol elle yapılır.

Tipik hatalar

• Sırası olan içeriği yeniden düzenlemek için order, row-reverse veya grid yerleşimi kullanmak.
• Kodda önce gelen metnin görsel olarak üstüne bir metin bloğunu mutlak konumlandırmak.
• İletişim kutularını, hataları veya iletileri body'nin sonuna eklemek.
• Bir cümleyi veya tabloyu yüzen sütunlara yanlış sırayla bölmek.
• Sütunları taklit etmek için boşluk biçimlendirmesi (boşluk ve satır sonları).

Şu durumda yayına alın

• Her adımın, yönergenin ve tablonun kod sırası, bir kişinin okuması gereken sırayla uyuşuyor.
• CSS görünümü değiştiriyor, anlamlı içeriğin sırasını değil.
• Dinamik içerik, ilgili olduğu içeriğin yanına ekleniyor.

Kaynaklar

• Understanding SC 1.3.2: Meaningful Sequence (W3C), İngilizce, yeni sekmede açılır
• C27: Making the DOM order match the visual order (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.