HTML ayrıştırma hataları ve ADA

Dipnotlu bir ölçüt

WCAG 2.1 Başarı Ölçütü 4.1.1 Ayrıştırma, işaretleme dilleriyle oluşturulan içerikte öğelerin tam başlangıç ve bitiş etiketlerine sahip olmasını, öğelerin kendi belirtimlerine göre iç içe geçmesini, öğelerde yinelenen öznitelik bulunmamasını ve belirtimlerin izin verdiği durumlar dışında tüm ID'lerin benzersiz olmasını ister.

WCAG 2.1'deki not: "Bu başarı ölçütü, HTML ya da XML kullanan her içerik için her zaman karşılanmış sayılmalıdır." Dolayısıyla HTML sayfalarında bu ölçüt kendi başına başarısız olamaz.

Durum notu. Bu ölçüt WCAG 2.2'den kaldırılmıştır; bu yüzden daha yeni kontrol listelerinde bulamazsınız. Ancak WCAG 2.1'in parçasıdır ve ADA Title II web kuralının adını andığı standart WCAG 2.1 A ve AA düzeyidir; bu nedenle burada listelenir. W3C'nin açıklaması, tarayıcıların artık bu işaretleme hatalarını tanımlı bir biçimde ele aldığını ve ölçütün kendi başına engelli kişilere bir yarar sağlamadığını söyler. Yine de temiz işaretleme çabaya değer; çünkü bozuk işaretleme, yanlış alana işaret eden bir etiket gibi, 1.3.1 ve 4.1.2 gibi başka ölçütlerin başarısızlığına yol açma eğilimindedir.

Yardımcı teknoloji bir sayfa hakkındaki resmini tarayıcının oluşturduğu belge ağacından kurar. İşaretleme bozuk olduğunda tarayıcı onu sessizce onarır ve onarılan ağaç yazarın istediğiyle örtüşmeyebilir. Tipik sonuçlar yanlış denetime bağlanan form etiketi, aynı ID'ye sahip iki öğenin ilkine işaret eden bir aria-labelledby ya da bir sayfanın geri kalanını bağlantının içine yutan başıboş bir etikettir.

Gömülü görüntüleyiciler ve bazı e-posta ve kiosk bileşenleri gibi eski ya da tarayıcı olmayan tüketicilerde hoşgörü daha da düşüktür.

Kamu sitelerinde geçersiz işaretlemenin kaynağı

Kamu sitelerindeki geçersiz işaretlemenin çoğu elle yazılmış sayfalardan değil, şablonlardan ve döngülerden gelir: kütüphane kataloğunun her satırında tekrarlanan bir rezervasyon düğmesi, bir adı kaçış yapmadan özniteliğe yazan sunucu şablonu, her örneğe aynı ID'yi basan bir içerik yönetimi bileşeni. Bir sayfa doğru görünürken altındaki yapı yanlış olabilir.

Bu şablonları bir tedarikçi sağlıyorsa, şikayet beklemek yerine işaretleme doğrulamasını kabul kontrollerine ekleyin.

Tekrarlanan satırlarda yinelenen ID'ler

Katalog sonuç listesinin her satırı aynı ID'yi aldı; bu yüzden her aria-labelledby sayfadaki ilk başlığa işaret ediyor.

<li><span id="baslik">Vadinin Haritaları</span>
    <button aria-labelledby="baslik">Ayırt</button></li>
<li><span id="baslik">Kıyının Kuşları</span>
    <button aria-labelledby="baslik">Ayırt</button></li>

<li><span id="baslik-1042">Vadinin Haritaları</span>
    <button aria-labelledby="baslik-1042">Ayırt</button></li>
<li><span id="baslik-1043">Kıyının Kuşları</span>
    <button aria-labelledby="baslik-1043">Ayırt</button></li>

Belirtimin yasakladığı iç içe geçme

Bir bağlantı, düğme gibi etkileşimli bir öğe içeremez. Tarayıcılar bununla ne yapılacağı konusunda hemfikir değildir ve yardımcı teknoloji bir denetim ya da iki denetim duyurabilir.

<a href="/klinik/randevu"><button type="button">Randevu al</button></a>

<a class="dugme" href="/klinik/randevu">Randevu al</a>

Şablonlardan gelen öznitelik sorunları

Tırnak içeren bir soyadı özniteliği erken bitirir ve etiketin geri kalanını bozar. Bir şablonun işaretlemeye yazdığı her değeri kaçışlayın.

<input name="soyad" value="O"Brien">

<input name="soyad" value="O&quot;Brien">

İki kısmi şablon aynı özniteliği eklediğinde yalnızca biri kazanır, diğeri atılır; bu da bir ipucu ya da hata referansını sessizce silebilir.

<input id="sasi" aria-describedby="sasi-ipucu"
       aria-describedby="sasi-hata">

<input id="sasi" aria-describedby="sasi-ipucu sasi-hata">

Yerel uygulamalar

SwiftUI ve Jetpack Compose ekranları etiketlerle değil kodla tanımlar; bu yüzden bu ölçütün yerel ekranlarda doğrudan karşılığı yoktur. Bir web görünümünün içinde gösterilen her HTML için, örneğin bir ödeme sayfası ya da uygulamaya yüklenen bir yardım makalesi için geçerlidir.

Nasıl test edilir

1. Sayfayı W3C Nu HTML Checker gibi bir doğrulayıcıdan ya da yapı sürecinizdeki bir HTML linter'dan geçirin.
2. Önce kapatılmamış öğeler, hatalı iç içe geçme, yinelenen öznitelikler ve yinelenen ID'ler hakkındaki hataları düzeltin. Etiketleri ve başvuruları bozan hatalar bunlardır.
3. Oluşturulan sayfada tekrarlanan ID'leri bir betikle ya da geliştirici araçları konsoluyla, örneğin ID başına öğe sayarak arayın.
4. Her for, aria-labelledby ve aria-describedby hedefinin bir kez bulunduğunu kontrol edin.
5. Yalnızca kaynağı değil, oluşturulan DOM'u test edin; çünkü betikler öğe ekler ve çoğaltır.

Sık yapılan hatalar ve işaretleme hijyeni listesi

• Bir bileşeni iki kez yapıştırıp sabit ID'sini korumak.
• Yalnızca stil uyarısı olan doğrulama mesajlarını düzeltip gerçek hataları görmezden gelmek.
• Tarayıcının onarımının doğru sonucu verdiğine güvenmek.
• Oluşturulan çıktı yerine şablonu doğrulamak.

1.3.1, 4.1.2 ve diğerlerinin başarısızlığını önleyen hijyen:

• Oluşturulan sayfalarda yinelenen ID yok; etiketler ve başvurular doğru çözülüyor.
• Öğeler düzgün kapatılmış, iç içe geçirilmiş ve yinelenen öznitelikten arınmış.
• Her ID başvurusu tam olarak bir öğeye işaret ediyor.
• Doğrulama yapı ya da yayın kontrollerinde çalışıyor.

İşaretleme sorunlarının standartla nasıl bağlandığı için WCAG 2.1 AA ve ADA sayfasına bakın.

Kaynaklar

• Understanding SC 4.1.1: Parsing (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.