WCAG 4.1.1: Ayrıştırma (WCAG 2.2’de kullanımdan kaldırılmıştır)

Bu Kuralın Anlamı

WCAG 4.1.1 Parsing, başlangıçta tarayıcılar ve yardımcı teknolojiler de dahil olmak üzere kullanıcı aracılarının web içeriğini doğru şekilde ayrıştırıp yorumlayabilmesini sağlamak için tasarlanmıştı. Ölçüt, HTML veya XML gibi işaretleme dilleriyle oluşturulan sayfaların dört yapısal koşulu sağlamasını gerektiriyordu: öğelerin tam başlangıç ve bitiş etiketlerine sahip olması; öğelerin kendi tanımlarına uygun şekilde iç içe yerleştirilmesi; öğelerin yinelenen öznitelikler içermemesi; ve içerikte kullanılan tüm ID’lerin benzersiz olması.

WCAG 2.2’de W3C bu ölçütü resmen kullanımdan kaldırdı (deprecated). Gerekçe, modern tarayıcıların bozuk HTML’e karşı son derece dayanıklı hale gelmiş olması ve çoğu yapısal hatayı erişilebilirlik ağacına ulaşmadan önce otomatik olarak düzeltmesiydi. Sonuç olarak, kapanmamış etiketler veya yanlış iç içe yerleştirilmiş öğeler gibi ilk endişelerin çoğu, güncel ortamlarda yardımcı teknolojilere artık pratikte zarar vermemektedir.

Ancak kullanımdan kaldırma, ölçütün ele aldığı sorunların tamamen ortadan kalktığı anlamına gelmez. W3C, yinelenen ID özniteliklerinin hâlâ anlamlı bir erişilebilirlik sorunu olduğunu açıkça belirtir. İki veya daha fazla öğe aynı id değerini paylaştığında, tarayıcılar ARIA referansları, etiket ilişkileri veya parça bağlantıları (fragment links) ile hangi öğenin ilişkilendirileceğine dair keyfi bir karar vermek zorunda kalır. Bu belirsizlik, ekran okuyucuların yanlış içeriği duyurmasına, etkileşimli denetimleri atlamasına veya form etiketlerini hiç ortaya çıkaramamasına neden olabilir. Bu nedenle ölçütün günümüzde en iyi anlaşılma biçimi şudur: DOM’da yinelenen ID değeri bulunmamalıdır. Bir sayfa, yardımcı teknolojilerin dayandığı programatik ilişkileri bozan ID tekrarları olduğunda bu ölçütten kalır.

WCAG belirtimindeki resmi istisnalar sınırlıdır. Ölçüt, işaretleme dilleriyle oluşturulan içeriğe uygulanır; çıktının biçimi üzerinde yazarın doğrudan kontrolünün olmadığı betik (script) ortamlarının ürettiği içeriğe uygulanmaz. Ancak pratikte, geliştiriciler, üretmek için kullanılan teknoloji yığını ne olursa olsun, son oluşturulan DOM’dan sorumludur.

Neden Önemli

Yinelenen ID’ler önemsiz bir düzenleme sorunu gibi görünebilir, ancak yardımcı teknoloji kullanıcıları için sonuçları ağır olabilir. JAWS, NVDA ve VoiceOver gibi ekran okuyucular, arayüz öğeleri arasındaki ilişkileri kurmak için doğru çözümlenmiş ID referanslarına dayanan tarayıcının erişilebilirlik ağacına güvenir. Bir ID yinelendiğinde, tarayıcı genellikle referansları belge sırasındaki ilk eşleşen öğeye çözümler ve aynı ID’ye sahip sonraki öğeleri sessizce yok sayar.

Kör ve az gören kullanıcılar için bu, bir form alanının etiketi olmadan duyurulması veya aria-describedby aracılığıyla bir girdiye bağlanan hata mesajının hiç okunmaması anlamına gelebilir. Bir e-ticaret sitesindeki ödeme sayfasında, hem teslimat adresi hem de fatura adresi alanlarının city, zip ve state gibi ID’ler kullandığını düşünün. Fatura bölümünü dolduran bir ekran okuyucu kullanıcısı, bunun yerine teslimat bölümünün etiketini duyabilir; bu da kafa karışıklığına, hatalara ve işlemin yarıda bırakılmasına yol açabilir.

Bilişsel engelli kullanıcılar için bozuk etiket ilişkileri, ekranda okudukları görünen metnin ekran okuyucu veya sesle kontrol yazılımının duyurduğu metinle eşleşmemesi anlamına gelir; bu da bilişsel yükü artıran, yönünü şaşırtıcı bir kopukluk yaratır.

Dragon NaturallySpeaking gibi sesle giriş yazılımlarına güvenen motor engelli kullanıcılar için yinelenen ID’ler, belirli bir denetimi hedefleyen ses komutlarının yanlış öğeyi etkinleştirmesine neden olabilir; çünkü yazılım dahili olarak ID tabanlı hedeflemeye dayanıyor olabilir.

Engellilik etkisinin ötesinde, yinelenen ID’ler SEO’yu da etkiler: belirli sayfa bölümlerini dizine eklemek için parça tanımlayıcılarına (fragment identifier) dayanan arama motoru tarayıcıları, ID’ler benzersiz olmadığında yanlış içeriği dizine ekleyebilir. Sayfa içi bağlantılar sayfanın yanlış konumuna gittiğinde, tüm kullanıcılar için kullanılabilirlik de bozulur.

Dünya Sağlık Örgütü’ne göre dünya genelinde yaklaşık 2,2 milyar insanın bir tür görme bozukluğu vardır. Bu kullanıcıların önemli bir kısmı, bozuk ID ilişkilerinden doğrudan etkilenen ekran okuyuculara güvenir. Benzersiz ID’leri sağlamak, bir geliştirme ekibinin uygulayabileceği en düşük çaba, en yüksek etki düzeltmelerinden biridir.

İlgili Axe-core Kuralları

Üç axe-core kuralı, WCAG 4.1.1’in ele aldığı endişelerle doğrudan eşleşir. Her biri, yinelenen ID sorununun belirli bir görünümünü hedefler:

• duplicate-id: Bu kural, DOM’un tamamını herhangi bir id öznitelik değerinin birden fazla öğede görünüp görünmediğini kontrol etmek için tarar. ARIA tarafından referans alınıp alınmadığına veya etkileşimli olup olmadığına bakılmaksızın, bir ID’yi paylaşan ilk öğe dışındaki tüm öğeleri işaretler. Bu, üç kuralın en geniş kapsamlı olanıdır ve açık bir ARIA ilişkisi olmasa bile yapısal ihlalleri yakalar. Yaygın bir tetikleyici, aynı yeniden kullanılabilir bileşeni sayfada birden çok kez oluştururken her örnek için benzersiz ID üretmeyen bileşen tabanlı çerçevelerdir.
• duplicate-id-active: Bu kural odağını, etkileşimli veya odaklanılabilir öğelerdeki yinelenen ID’lere daraltır—butonlar, bağlantılar, girdiler ve negatif olmayan tabindex değerine sahip herhangi bir öğe. Buradaki erişilebilirlik etkisi daha yüksektir; çünkü hem yardımcı teknolojiler hem de klavye ile gezinme, etkin bir denetimi açıkça tanımlayabilmeye bağlıdır. Bir gönder (submit) butonu ile ilgisiz bir simge aynı ID’yi paylaştığında, sekme sırası duyuruları ve programatik odak yönetimi ikisi de bozulabilir.
• duplicate-id-aria: Bu, üç kuralın en kritik olanıdır. ID’ler özellikle ARIA öznitelikleri tarafından referans alındığında—aria-labelledby, aria-describedby, aria-controls, aria-owns ve benzeri ilişki öznitelikleri—yinelenen ID’leri işaretler. Bu öznitelikler, yardımcı teknolojilerin öğeler arasındaki ilişkileri anlamasının birincil mekanizması olduğundan, buradaki tekrarlar doğrudan erişilebilir ad hesaplamasını ve rol ilişkilerini bozar. Başarısız bir örnek, bir modalin aria-labelledby='dialog-title' kullandığı durumda id='dialog-title' değerine sahip iki <div> öğesi olmasıdır—ekran okuyucu DOM’da ilk görünen öğeyi duyurur; bu da amaçlanan diyalog başlığı olmayabilir.

Otomatik araçlar, kontrol tamamen sözdizimsel olduğu için yinelenen ID’leri yakalamaya son derece uygundur: araç DOM’u okur ve ID değerlerini karşılaştırır. Bu ölçüt için manuel test kesin olarak gerekli değildir. Ancak ID’ler kullanıcı etkileşiminden sonra dinamik olarak üretiliyorsa—örneğin, yeni içerik ekleyip yinelenen ID’ler oluşturan sonsuz kaydırma (infinite scroll) gibi—sayfa yüklemesinde çalıştırılan otomatik taramalar, yalnızca daha sonra ortaya çıkan ihlalleri kaçırabilir. Bu gibi durumlarda, test uzmanları taramayı çalıştırmadan önce dinamik davranışı tetiklemeli veya etkileşimlerden sonra tarayıcı geliştirici araçlarını kullanarak DOM’u izlemelidir.

Nasıl Test Edilir

1. axe DevTools ile otomatik tarama: Sayfayı Chrome veya Firefox’ta açın. Geliştirici Araçları’nı (F12) açın, axe DevTools paneline gidin (veya tarayıcı uzantısını kurun) ve tam sayfa taraması çalıştırın. Sonuçları duplicate-id, duplicate-id-active ve duplicate-id-aria kuralları için filtreleyin. Her ihlal, etkilenen öğeleri ve yinelenen ID değerlerini listeleyecektir. Gerekirse denetim dokümantasyonu için raporu dışa aktarın. Lighthouse için, Geliştirici Araçları’ndaki Lighthouse sekmesinden bir Lighthouse erişilebilirlik denetimi çalıştırın ve "Document has multiple elements with the same id" denetimini arayın.
2. Tarayıcı Geliştirici Araçları konsol kontrolü: Tarayıcı konsolunu açın ve mevcut sayfadaki tüm yinelenen ID’leri bulmak için şu JavaScript kod parçasını çalıştırın: const ids = [...document.querySelectorAll('[id]')].map(el => el.id); const dupes = ids.filter((id, i) => ids.indexOf(id) !== i); console.log([...new Set(dupes)]); Bu, birden fazla kez görünen tüm ID değerlerinin yer aldığı bir dizi yazdıracaktır. Boş bir dizi, yinelenen ID olmadığını gösterir.
3. NVDA ve Firefox ile ekran okuyucu testi: Sayfayı NVDA açıkken yükleyin. for/id veya aria-labelledby aracılığıyla etiketleri ilişkilendirilmiş alanlar içeren bir forma gidin. Her alanı sekme ile dolaşın ve NVDA’nın doğru etiketi duyurup duyurmadığını dikkatle dinleyin. Bir alan etiketsiz veya farklı bir bölümden yanlış etiketle duyuruluyorsa, bunun nedeni yinelenen bir ID olabilir. Bu işlemi, aria-controls veya aria-describedby kullanan ARIA işaret bölgeleri, modal diyaloglar veya bileşenler için de tekrarlayın.
4. macOS’ta VoiceOver ve Safari: VoiceOver’ı etkinleştirin (Command+F5). VoiceOver rotorunu (Control+Option+U) kullanarak Form Denetimleri veya Bağlantılar listesini açın ve her denetimin benzersiz, doğru duyurulan bir etikete sahip olduğunu doğrulayın. Herhangi bir modal diyaloga gidin ve diyalog açıldığında başlığın doğru şekilde duyurulduğunu doğrulayın.
5. JAWS ve Chrome: JAWS açıkken sayfayı açın ve tüm form öğelerini ve bunların ilişkili etiketlerini gözden geçirmek için JAWS form alanları listesini (Insert+F5) kullanın. Ayrı olması gereken alanların aynı etiket metnini paylaşmadığını doğrulayın.
6. Dinamik içerik testi: Sayfa sonsuz kaydırma, tek sayfa navigasyonu veya JavaScript ile eklenen modal diyaloglar kullanıyorsa, DOM’a yeni içerik yüklemek için bu özelliklerle etkileşime geçin; ardından dinamik içeriğin oluşturduğu tekrarları kontrol etmek için otomatik taramayı veya konsol kod parçasını yeniden çalıştırın.

Nasıl Düzeltilir

Yinelenen bölümler arasında yinelenen form alanı ID’leri — Hatalı

<!-- Shipping Address -->
<label for='city'>City</label>
<input type='text' id='city' name='shipping-city'>

<!-- Billing Address -->
<label for='city'>City</label>
<input type='text' id='city' name='billing-city'>
<!-- FAIL: Both inputs share id='city'. The second label's 'for' attribute
     resolves to the first input, so screen readers announce the wrong field. -->

Yinelenen bölümler arasında yinelenen form alanı ID’leri — Doğru

<!-- Shipping Address -->
<label for='shipping-city'>City</label>
<input type='text' id='shipping-city' name='shipping-city'>

<!-- Billing Address -->
<label for='billing-city'>City</label>
<input type='text' id='billing-city' name='billing-city'>
<!-- PASS: Each input has a unique ID scoped to its section.
     Screen readers correctly announce each field's label. -->

Birden çok kez oluşturulan yeniden kullanılabilir bileşen — Hatalı

<!-- Product Card 1 -->
<div class='product-card'>
  <img id='product-img' src='shoe.jpg' alt='Running Shoe'>
  <button id='add-to-cart' aria-describedby='product-desc'>Add to Cart</button>
  <p id='product-desc'>Free shipping on orders over 500 TL.</p>
</div>

<!-- Product Card 2 (same template, duplicate IDs) -->
<div class='product-card'>
  <img id='product-img' src='boot.jpg' alt='Hiking Boot'>
  <button id='add-to-cart' aria-describedby='product-desc'>Add to Cart</button>
  <p id='product-desc'>Free shipping on orders over 500 TL.</p>
</div>
<!-- FAIL: IDs duplicated across cards. aria-describedby on the second button
     resolves to the <p> in the first card, not the second. -->

Birden çok kez oluşturulan yeniden kullanılabilir bileşen — Doğru

<!-- Product Card 1 -->
<div class='product-card'>
  <img id='product-img-1' src='shoe.jpg' alt='Running Shoe'>
  <button id='add-to-cart-1' aria-describedby='product-desc-1'>Add to Cart</button>
  <p id='product-desc-1'>Free shipping on orders over 500 TL.</p>
</div>

<!-- Product Card 2 -->
<div class='product-card'>
  <img id='product-img-2' src='boot.jpg' alt='Hiking Boot'>
  <button id='add-to-cart-2' aria-describedby='product-desc-2'>Add to Cart</button>
  <p id='product-desc-2'>Free shipping on orders over 500 TL.</p>
</div>
<!-- PASS: Each card's IDs are unique. ARIA references resolve correctly
     within their own card. Use a counter, UUID, or slug-based strategy
     to generate IDs in your component framework. -->

Yinelenen ARIA etiket referansına sahip modal diyalog — Hatalı

<!-- A generic heading used as a reusable ID -->
<h1 id='dialog-title'>Welcome</h1>

<div role='dialog' aria-modal='true' aria-labelledby='dialog-title'>
  <h2 id='dialog-title'>Confirm Your Order</h2>
  <p>Are you sure you want to place this order?</p>
  <button>Confirm</button>
  <button>Cancel</button>
</div>
<!-- FAIL: Two elements share id='dialog-title'. The dialog's
     aria-labelledby resolves to the page <h1>, not the dialog heading.
     Screen readers will announce 'Welcome' as the dialog name. -->

Yinelenen ARIA etiket referansına sahip modal diyalog — Doğru

<h1>Welcome</h1>

<div role='dialog' aria-modal='true' aria-labelledby='confirm-dialog-title'>
  <h2 id='confirm-dialog-title'>Confirm Your Order</h2>
  <p>Are you sure you want to place this order?</p>
  <button>Confirm</button>
  <button>Cancel</button>
</div>
<!-- PASS: The dialog heading has a unique, descriptive ID.
     aria-labelledby correctly identifies the dialog to screen readers
     as 'Confirm Your Order'. -->

Yaygın Hatalar

• Bileşen işaretlemesini ID’leri güncellemeden kopyalayıp yapıştırmak: Geliştiriciler, HTML’in çalışan bir bölümünü ikinci bir örnek için (ikinci adres bloğu, ikinci sekme paneli, ikinci akordeon öğesi) sıklıkla kopyalar ve tüm ID değerlerini benzersiz olacak şekilde güncellemeyi unutur. component-name-index (ör. accordion-panel-1, accordion-panel-2) gibi bir adlandırma kuralı belirleyin ve bunu kod incelemesinde uygulayın.
• Benzersiz anahtar stratejisi olmadan çerçeve bileşenlerinde statik ID’ler kullanmak: React, Vue, Angular ve benzeri çerçeveler, aynı bileşeni bir sayfada onlarca kez oluşturabilir. Yeniden kullanılabilir bir bileşenin içinde sabit bir id='search-input' kullanmak, örnek sayısı kadar tekrar oluşturur. ID’leri her zaman props’tan, bir sayaçtan veya React 18+’ta useId() gibi bir yardımcıdan türetin.
• HTML’i düzeltmek yerine CSS sınıf hedeflemesine güvenmek: Bazı geliştiriciler, JavaScript seçicilerini getElementById’den bir sınıfla querySelector’a çevirerek yinelenen ID sorunlarını dolanır, ancak yinelenen ID’leri yerinde bırakır. Bu, görsel davranışı düzeltebilir ama bozuk erişilebilirlik ağacı ilişkilerini çözmek için hiçbir şey yapmaz.
• Her yinelemede aynı ID’yi üreten sunucu tarafı şablon döngüleri: Bir {% for item in items %} döngüsü içinde id='item-title' oluşturan Jinja2, Blade veya Twig şablonu, listedeki her öğe için bir tekrar üretir. ID’ye her zaman döngü indeksini veya öğe tanımlayıcısını ekleyin: id='item-title-{{ loop.index }}'.
• Gizli veya ekran dışı öğelerdeki ID’leri yok saymak: display: none veya visibility: hidden olan öğeler hâlâ DOM’da bulunur ve ID’leri hâlâ kayıtlıdır. Görünür bir öğeyle aynı ID’yi paylaşan gizli bir modal şablonu, aynı ayrıştırma hatalarına neden olur. hidden özniteliğini kullanın veya gizli şablonların benzersiz ID’ler kullandığından emin olun.
• Shadow DOM’a kapsamlamanın sorunu çözdüğünü varsaymak: Yerel Shadow DOM içindeki ID’ler kapsamlıdır ve light DOM’daki veya diğer shadow root’lardaki ID’lerle çakışmaz. Ancak birçok bileşen kütüphanesi, gerçek kapsam sunmayan bir polyfill veya standart dışı bir yaklaşım kullanır. Çerçeve davranışını varsaymak yerine gerçek DOM çıktısını doğrulayın.
• Kullanıcı tarafından sağlanan içeriğe dayalı ID’leri arındırma veya tekilleştirme olmadan üretmek: Ürün adları, makale başlıkları veya diğer dinamik metinlerden ID oluşturmak, iki öğe aynı ada sahip olduğunda çakışmalara neden olabilir (örneğin, her ikisi de "Classic" olarak adlandırılan iki ürünün id='classic' üretmesi gibi). İçerikten türetilen ID’lere her zaman benzersiz bir veritabanı anahtarı veya indeks ekleyin.
• Tek sayfa uygulamalarda istemci tarafı navigasyondan sonra test etmemek: Tam sayfa yeniden yüklemesi olmadan yeni rota içeriğini DOM’a enjekte eden SPA’lar, eski içerik düzgün şekilde kaldırılmadıysa, daha önce ziyaret edilen rotalardan ID biriktirebilir. Yalnızca ilk yüklemede değil, rotalar arasında gezinirken de axe taramaları çalıştırın.
• SVG <defs> ve <use> öğelerinde kullanılan ID’leri unutmak: <defs> içinde ID’lerle semboller tanımlayan ve ardından bunları <use href='#icon-arrow'> ile referans alan SVG sprite desenleri, aynı sembol tanımı bir sayfada birden çok kez dahil edilirse yinelenen ID’ler oluşturabilir. SVG sprite tanımlarını merkezileştirin ve bunları yalnızca bir kez dahil edin.
• Üçüncü taraf widget’lar, sohbet eklentileri veya analiz betikleri tarafından üretilen ID’leri gözden kaçırmak: Üçüncü taraf betikler bazen sabit ID’lere sahip öğeler enjekte eder. Kendi kodunuz aynı ID’yi kullanıyorsa, geliştirme sırasında fark etmeyebileceğiniz bir çakışma ortaya çıkar. Üçüncü taraf içerik dahil olmak üzere oluşturulmuş DOM’un tamamını denetleyin ve çakışmaları satıcılara bildirin veya çakışmalardan kaçınmak için kendi ID’lerinizi ad alanına alın.

Türkiye’nin Erişilebilirlik Mevzuatıyla İlişkisi

Türkiye’nin 2025/10 sayılı Cumhurbaşkanlığı Genelgesi, 21 Haziran 2025 tarihli ve 32933 sayılı Resmî Gazete’de yayımlanarak, Türkiye’de faaliyet gösteren geniş bir kamu ve özel sektör kuruluşu için zorunlu web erişilebilirliği gereklilikleri getirmiştir. Genelge, teknik referans standardı olarak WCAG 2.2’yi benimser ve kapsamdaki tüm kuruluşlar için Asgari yasal eşik olarak Seviye A uyumunu belirler.

WCAG 4.1.1 Parsing, Seviye A ölçütüdür. W3C bunu WCAG 2.2’de kullanımdan kaldırmış olsa da, temel endişesini—benzersiz ID’leri—uygulayan axe-core kuralları etkin kalmaya devam eder ve WCAG 2.2’ye göre yürütülen erişilebilirlik denetimlerinde hâlâ işaretlenir. Otomatik tarama araçlarını kullanan Türk düzenleyici denetimleri ve uyum incelemeleri, bu nedenle, belirtim düzeyinde kullanımdan kaldırılmış olmasına bakılmaksızın duplicate-id ihlallerini potansiyel Seviye A başarısızlıkları olarak işaretleyecektir. Uyum sağladığını göstermek isteyen kuruluşlar, yinelenen ID ihlallerini engelleyici (blocking) sorunlar olarak ele almalıdır.

2025/10 sayılı Cumhurbaşkanlığı Genelgesi kapsamındaki kuruluşlar, geniş bir kamu kurumu ve özel sektör organizasyonu yelpazesini içerir: tüm merkezi ve yerel yönetim birimleri ve bunlara bağlı kurumlar; Türk bankacılık mevzuatı kapsamında düzenlenen bankalar ve finans kuruluşları; hastaneler ve özel sağlık hizmeti sağlayıcıları; 200.000 veya daha fazla aboneye hizmet veren telekomünikasyon işletmecileri; e-ticaret platformları ve çevrimiçi pazar yerleri; seyahat acenteleri ve tur operatörleri; kamu imtiyazı altında faaliyet gösteren özel ulaşım şirketleri; ve Millî Eğitim Bakanlığı (MoNE) tarafından yetkilendirilmiş özel okullar ve eğitim kurumları.

Genelge, kademeli bir uyum takvimi belirler. Kamu kurumları, genelgenin yayım tarihinden itibaren bir yıl içinde tam Seviye A uyumunu sağlamak zorundadır. Kapsamdaki özel sektör kuruluşları ise aynı standarda ulaşmak için iki yıla sahiptir. Uyum sağlamamak, kapsamdaki kuruluşları düzenleyici incelemeye, olası idari yaptırımlara ve giderek daha fazla erişilebilirlik bilincine sahip bir pazarda itibar riskine maruz bırakır.

Türk kuruluşları için, yinelenen ID ihlallerini ele almak özellikle dijital formlar, çevrimiçi ödeme akışları, kamu hizmeti portalları ve sağlık randevu sistemlerinin söz konusu olduğu bağlamlarda önemlidir. Bunlar, yinelenen form bölümlerinin, yeniden kullanılabilir bileşenlerin ve yinelenen ID’ler oluşturan üçüncü taraf widget entegrasyonlarının en olası olduğu arayüz türleridir. Geliştirme sürecinin bir parçası olarak axe-core’u CI/CD hatlarına entegre etmek gibi otomatik erişilebilirlik testleri kurmak, hem teknik bir en iyi uygulama hem de genelgenin gereklilikleri kapsamında sürekli düzenleyici uyumu sürdürmek için pragmatik bir stratejidir.