Bu kural ne anlama geliyor

WCAG 4.1.1 Ayrıştırma, HTML gibi işaretleme dillerinde yazılan içeriğin doğru biçimde oluşturulmasını gerektirir. Özellikle, öğelerin eşleşen açılış ve kapanış etiketlerine sahip olması, belirtime göre doğru iç içe yerleştirilmesi, hiçbir öğenin yinelenen niteliklere sahip olmaması ve sayfadaki tüm id değerlerinin benzersiz olması gerekir. Amaç, tarayıcıların, ekran okuyucuların ve diğer yardımcı teknolojilerin içeriği güvenilir biçimde ayrıştırıp sunabilmesini sağlamaktır.

Önemli: Bu kriter WCAG 2.2 sürümüyle kaldırılmıştır. W3C, modern tarayıcıların ayrıştırma hatalarını sorunsuz şekilde ele aldığını belirlediğinden açık ayrıştırma gereksinimlerini gereksiz bulmuştür. Ancak 4.1.1, WCAG 2.0 veya WCAG 2.1 uyumluluk testlerinde hala geçerlidir.

Modern tarayıcılar birçok HTML hatasını tolere etse de yinelenen kimlikler yardımcı teknolojiler için gerçek sorunlara neden olur. İki öğe aynı id değerini paylaştığında aria-labelledby, aria-describedby ve label[for] referansları belirsizleşir ve tarayıcı yanlış öğeyle ilişkilendirme yapabilir.

Neden önemlidir

Yardımcı teknolojiler, ayrıştırılan DOM'dan inşa edilen erişilebilirlik ağacına dayanır. İşaretleme bozuk olduğunda — kapatılmamış etiketler, hatalı iç içe yerleştirme veya yinelenen kimlikler — ortaya çıkan DOM tarayıcılar arasında farklılık gösterebilir. Ekran okuyucu içeriği atlayabilir, bir etiketi yanlış girdi ile ilişkilendirebilir veya sayfanın yapısını tamamen aktaramayabilir.

Yinelenen kimlikler pratikte en etkili ayrıştırma sorunudur. Bir form etiketi iki girdi tarafından paylaşılan bir id değerine referans verdiğinde yalnızca ilk girdi programatik ilişkilendirmeyi alır. İkinci girdi, gören kullanıcılar etiketi görsel olarak görse bile yardımcı teknoloji kullanıcıları için fiilen etiketlenmemiş olur.

İlgili axe-core kuralları

duplicate-id — Belgedeki her id niteliği değerinin benzersiz olduğunu doğrular.
duplicate-id-active — Aktif, odaklanabilir öğelerdeki id niteliklerinin benzersiz olduğunu doğrular.
duplicate-id-aria — ARIA nitelikleri tarafından referans verilen id niteliklerinin benzersiz olduğunu doğrular.
accesskeys — Her accesskey niteliği değerinin çakışmaları önlemek için benzersiz olduğunu doğrular.

Nasıl test edilir

Tarayıcılar birçok ayrıştırma hatasını tolere etse de yinelenen kimlikleri ve bozuk işaretlemeyi test etmek erişilebilirlik ve kod kalitesi için değerli olmaya devam eder.

axe-core veya axe DevTools çalıştırın — duplicate-id kural ailesi sayfadaki tüm paylaşılan kimlikleri işaret eder.
Ayrıştırma hatalarını, kapatılmamış öğeleri ve yerleştirme ihlallerini belirlemek için W3C Nu HTML Checker (validator.w3.org/nu/) kullanın.
Kod tabanında id niteliklerini arayın ve benzersizliği doğrulayın, özellikle kimliklerin bileşenler arasında tekrarlanabileceği sunucu tarafında oluşturulan şablonlarda.
Dinamik olarak eklenen içeriği kontrol edin — DOM'a düğümler ekleyen tek sayfa uygulamaları önceki oluşturmalardan kimlikleri sıklıkla yeniden kullanır.

Nasıl düzeltilir

Temel çözüm yinelenen kimlikleri ortadan kaldırmaktır. Aşağıda yaygın kalıplar ve çözümler yer almaktadır.

Yinelenen kimlikler — yanlış uygulama

<!-- İki öğe aynı id'yi paylaşır -->
<label for="email">E-posta</label>
<input id="email" type="email" name="kayit-email">

<!-- Aynı sayfada daha sonra -->
<label for="email">İş E-postası</label>
<input id="email" type="email" name="iş-email">

Yinelenen kimlikler — doğru uygulama

<!-- Her id benzersizdir -->
<label for="kayit-email">E-posta</label>
<input id="kayit-email" type="email" name="kayit-email">

<label for="iş-email">İş E-postası</label>
<input id="iş-email" type="email" name="iş-email">

Yerleştirme ihlalleri — örnekler

<!-- Yanlış: satır içi öğenin içinde blok öğe -->
<a href="/hakkımızda">
  <div>Hakkımızda</div>
</a>

<!-- Yanlış: iç içe etkileşimli öğeler -->
<button>
  <a href="/kaydet">Kaydet</a>
</button>

<!-- Doğru: uygun yerleştirme -->
<a href="/hakkımızda">Hakkımızda</a>

<button type="button">Kaydet</button>

Sık yapılan hatalar

Sabit kodlanmış kimlikler içeren bileşenleri her örnek için benzersiz hale getirmeden kopyalamak.
Sunucu tarafındaki döngülerin tekrarlanan öğeler için aynı kimlikleri oluşturması — id içinde bir dizin veya benzersiz anahtar kullanın.
SPA çerçevelerinin bileşen durumu değiştiğinde id niteliklerini sıfırlamadan DOM düğümlerini yeniden kullanması.
Sayfa genelinde klavye kısayolu çakışmalarına neden olan yinelenen accesskey değerleri.
Bu kriterin WCAG 2.2'de kaldırılmış olması nedeniyle yinelenen kimliklerin zararsız olduğunu varsaymak — bunlar hala ARIA referanslarını ve etiket ilişkilendirmelerini bozar.