WCAG 3.2.4: Tutarlı Tanımlama

Bu Kuralın Anlamı

WCAG Başarı Ölçütü 3.2.4 — Tutarlı Tanımlama — aynı işlevselliğe sahip bileşenlerin bir web sayfaları kümesi içinde tutarlı biçimde tanımlanmasını şart koşar. Bu, etkileşimli bir öğe veya görsel her ne zaman aynı işlevi yerine getiriyorsa, sitede göründüğü her seferinde aynı erişilebilir ada veya etikete sahip olması gerektiği anlamına gelir.

Bu bağlamda "tanımlanmak" terimi, bir bileşenin yardımcı teknolojilere ve kullanıcılara nasıl sunulduğunu ifade eder. Buna görünen etiket metni, aria-label veya aria-labelledby özniteliği, bir görseldeki alt metni, title özniteliği veya tarayıcının erişilebilirlik ağacı tarafından hesaplanan erişilebilir ad dahildir. Bir arama düğmesi bir sitenin her sayfasında görünüyorsa, her zaman "Search" olarak adlandırılmalıdır — ana sayfada "Search", ürün listeleme sayfasında "Find" ve ödeme sayfasında "Go" olmamalıdır.

Bu ölçüt, WCAG’in ortak bir amaca hizmet eden ve aynı yazar tarafından üretilen sayfalar koleksiyonu olarak tanımladığı bir web sayfaları kümesi için geçerlidir. Bu, tüm bir web sitesini, bir web uygulamasını veya birden fazla URL’ye yayılan çok adımlı bir formu kapsar. Yalnızca görsel olarak benzer olan ancak farklı işlevlere hizmet eden bileşenlerin aynı adı paylaşması gerekmez — gereklilik özellikle özdeş işlevselliğe bağlıdır.

Geçer sayılan durumlar: Bir hamburger menüsünü açan bir gezinme simgesi, tüm sayfalarda tutarlı biçimde "Open navigation menu" (veya eşdeğeri) olarak etiketlenmiştir. Bir alışveriş sepeti simgesi her zaman "Shopping cart" alternatif metnine veya erişilebilir adına sahiptir. Bir oturum kapatma düğmesi her zaman "Log out" olarak etiketlenmiştir. Aynı işlev için kelime seçimindeki değişiklik bir başarısızlık oluşturur.

Başarısız sayılan durumlar: Kayıt formunda "Submit" olarak etiketlenmiş bir gönder düğmesinin, iletişim formunda aynı kullanıcı girdisini iletme işlevine sahip olmasına rağmen "Send" olarak etiketlenmesi. Çoğu sayfada "Search" olarak etiketlenmiş büyüteç simgeli bir düğmenin, tutarlı bir dil stratejisi olmaksızın tek bir çevrilmiş alt sayfada "Ara" olarak etiketlenmesi.

Resmî istisna: WCAG, aynı erişilebilir ada sahip iki bileşenin farklı işlevler yerine getirmesi durumunda bunun kabul edilebilir olduğunu açıkça belirtir — bu durumda farklı işlevin kendisi bileşenleri ayırt eder. Ölçüt yalnızca işlev özdeş olduğunda ancak adlandırma tutarsız olduğunda devreye girer.

Neden Önemlidir

Tutarsız tanımlama, görsel olmayan veya desen tabanlı gezinme stratejilerine güvenen kullanıcılar üzerinde orantısız bir yük oluşturur. En ciddi şekilde etkilenen gruplar arasında ekran okuyucu kullanıcıları, bilişsel engelli kullanıcılar ve sesle kontrol yazılımlarına güvenen motor beceri kısıtlı kullanıcılar yer alır.

Ekran okuyucu kullanıcıları, bir web sitesinin zihinsel modelini, sekme ile ilerlerken veya işaret noktalarına göre gezinirken öğe adlarını dinleyerek oluşturur. Önceki sayfada aynı işlevi yerine getiren bir düğme artık farklı bir ada sahipse, kullanıcı durmak, incelemek ve yeniden yönlenmek zorunda kalır — zaman alıcı ve sinir bozucu bir deneyim. Dünya Sağlık Örgütü’ne göre, dünya genelinde yaklaşık 2,2 milyar kişinin bir tür görme bozukluğu vardır. Bu kitlenin yalnızca küçük bir kısmının bile tutarsız etiketlenmiş bir siteyle etkileşime girmesi, önemli engellerle karşılaşmaları için yeterlidir.

Bilişsel engelli kullanıcılar, disleksi, dikkat eksikliği bozuklukları veya hafıza bozuklukları olanlar da dahil olmak üzere, bilişsel yükü azaltmak için öngörülebilir adlandırmaya büyük ölçüde güvenir. Tanıdık bir simge veya kontrolü farklı bir ad altında görmek yeniden öğrenmeyi zorunlu kılar ve kaygıya neden olur. Tutarlı etiketleme, bir site düzenli olarak kullanılırken yordam belleği oluşturmak için gereken çabayı azaltır.

Sesle kontrol kullanıcıları (Dragon NaturallySpeaking veya Apple’ın Voice Control gibi araçları kullananlar), bir kontrolü etkinleştirmek için adını söyler. Bir düğmenin erişilebilir adı, sitedeki önceki deneyimlerine dayanarak beklediklerinden farklıysa, verdikleri sesli komut sessizce başarısız olur — yazılım yalnızca eşleşme bulamaz. Bu, arayüzü o anda fiilen kullanılamaz hâle getirir.

Somut bir gerçek dünya senaryosu: Giyim satan Türk bir e-ticaret platformunu düşünün. Ürün listeleme sayfasında, her öğenin, erişilebilir adı "Add to favourites" olan kalp simgeli bir düğmesi vardır. Ürün detay sayfasında ise aynı kalp simgesinin erişilebilir adı "Kaydet"tir. Ürün ızgara sayfasında kalp düğmesini adıyla etkinleştirmeyi öğrenmiş bir ekran okuyucu kullanıcısı, detay sayfasında eşdeğer kontrolü kapsamlı bir keşif yapmadan bulamaz. Siteyi tamamen terk edebilir.

Erişilebilirliğin ötesinde, tutarlı etiketleme SEO’ya da fayda sağlar. Arama motorları, sayfa içeriğini anlamak için erişilebilir adları ve bağlantı metinlerini ayrıştırır. İşlevsel olarak özdeş bağlantılar için tutarsız etiketleme (örneğin, hepsi makale detay sayfalarına yönlendiren "Read more", "Continue reading", "Learn more") anahtar kelime sinyallerini zayıflatır ve tarayıcıların site yapısını anlamasını zorlaştırır.

İlgili Axe-core Kuralları

WCAG 3.2.4, otomatik araçlar sayfalar arasında anlamsal niyeti belirleyemediği veya farklı adlandırılmış iki bileşenin aynı işlevi yerine getirdiğini bilemediği için manuel test gerektirir. Bu ölçüte doğrudan karşılık gelen bir axe-core kuralı yoktur. İşte otomasyonun neden yetersiz kaldığı ve test uzmanlarının bunun yerine ne yapması gerektiği:

• Manuel test gerekli — sayfalar arası tutarlılık: Axe-core tek bir sayfayı yalıtılmış olarak değerlendirir. Ana sayfadaki "Search" düğmesinin erişilebilir adını, ürün sayfasındaki "Find" düğmesiyle karşılaştıracak bir mekanizmaya sahip değildir; çünkü bileşen adlarının sayfalar arası envanterini tutmaz. Bir insan test uzmanı, tekrarlanan işlevsel öğeleri kataloglamalı ve göründükleri tüm sayfalarda adlandırmalarının tutarlı olduğunu doğrulamalıdır.
• Manuel test gerekli — simge ve görsel alt metni tutarlılığı: Otomatik araçlar eksik alt metni (image-alt kuralı aracılığıyla) tespit edebilir, ancak farklı sayfalarda aynı amaca hizmet eden iki görselin aynı alt metni taşıyıp taşımadığını belirleyemez. Örneğin, makbuz sayfasındaki bir yazıcı simgesi ve fatura sayfasındaki aynı yazıcı simgesi her ikisi de alt metne sahip olabilir — ancak biri "Print", diğeri "Print this page" olarak okunuyorsa, bunun 3.2.4 kapsamında bir tutarsızlık oluşturup oluşturmadığına bir insan karar vermelidir.
• Manuel test gerekli — ARIA etiketi tutarlılığı: Axe-core, ARIA etiketlerinin mevcut ve boş olmadığını kontrol eder, ancak aynı bileşen türü için aria-label değerlerinin tüm sayfa kümesi boyunca tutarlı olup olmadığını denetlemez. Bir test uzmanı, birden fazla sayfadaki erişilebilirlik ağacını incelemeli ve işlevsel olarak özdeş kontroller için adları karşılaştırmalıdır.
• Manuel test gerekli — form kontrol etiketleri: label gibi otomatik kurallar, girdilerin etiketlerle ilişkilendirildiğini doğrular, ancak giriş sayfasındaki bir "Username" alanının, hesap kurtarma sayfasında da aynı tür girdiyi kabul edip aynı işlevsel role hizmet ederken "Username" (ve "Email" veya "User ID" değil) olarak etiketlenip etiketlenmediğini kontrol etmez.

Nasıl Test Edilir

1. Otomatik ön tarama: Her sayfada axe DevTools veya Lighthouse çalıştırarak eksik erişilebilir adlar (image-alt, button-name, link-name) gibi ilgili ihlalleri ortaya çıkarın. Önce bunları çözün — adlar yoksa adlandırma tutarlılığını değerlendiremezsiniz. Tarama sonuçlarınızda tekrarlanan bileşenler için raporlanan erişilebilir adları not edin.
2. Bileşen envanteri oluşturun: Sayfalar arasında tekrarlanan tüm işlevsel bileşenleri — gezinme menüleri, arama girdileri, gönder düğmeleri, simge düğmeler, kırıntı bağlantıları, sosyal medya bağlantıları, yazdır/paylaş düğmeleri ve sayfalama kontrolleri — manuel olarak listeleyin. Her örneğin erişilebilir adını tarayıcınızın Erişilebilirlik panelini kullanarak kaydedin (Chrome DevTools > Elements > Accessibility veya Firefox Accessibility Inspector).
3. Sayfalar arasında adları karşılaştırın: Envanterinizdeki her bileşen türü için, her örneğin aynı erişilebilir adı taşıdığını doğrulayın. Herhangi bir tutarsızlığı işaretleyin. Özellikle sayfa başlıklarında, altbilgilerde ve kenar çubuklarında görünen bileşenlere dikkat edin; çünkü bunlar şablonlar arasında tutarsız etiketlenmeye en yatkın olanlardır.
4. NVDA + Firefox ile ekran okuyucu testi: Ana sayfaya gidin, ardından NVDA’nın öğe listesini (Insert + F7) kullanarak düğmeler ve bağlantılar listesini açın. Tekrarlanan kontrollerin adlarını not edin. Ardından üç veya dört başka temsilî sayfaya gidin ve tekrarlayın. İşlevsel olarak özdeş kontrollerdeki ad değişikliklerini dinleyin.
5. VoiceOver + Safari (macOS/iOS) ile ekran okuyucu testi: Her sayfada Rotor’u (VO + U) kullanarak düğmeler veya bağlantılar listesini açın. Tekrarlanan öğelerin adlarını karşılaştırın. iOS’ta, eşdeğer sayfalardaki etkileşimli öğeler arasında kaydırma yapın ve adlandırmadaki farklılıkları not edin.
6. JAWS + Chrome ile ekran okuyucu testi: Birden fazla sayfada JAWS sanal imlecini ve form alanları (Insert + F5) ile bağlantılar (Insert + F7) listesini kullanın. Özdeş kontrollerin site genelinde özdeş adları paylaştığını doğrulayın.
7. Sesle kontrol testi: Windows Voice Access veya Dragon NaturallySpeaking kullanarak, bir sayfadaki tekrarlanan bir kontrolün adını söyleyin (örneğin, "Click Search"). Başka bir sayfaya gidin ve aynı komutu söyleyin. Komut başarısız olursa, adlar işlevsel açıdan tutarsızdır.

Nasıl Düzeltilir

Tutarsız etiketlere sahip arama düğmesi — Hatalı

<!-- Homepage -->
<button type='submit' aria-label='Search'>
  <svg aria-hidden='true'>...</svg>
</button>

<!-- Product listing page -->
<button type='submit' aria-label='Find products'>
  <svg aria-hidden='true'>...</svg>
</button>

<!-- Blog page -->
<button type='submit' aria-label='Go'>
  <svg aria-hidden='true'>...</svg>
</button>

Tutarsız etiketlere sahip arama düğmesi — Doğru

<!-- Homepage, product listing page, and blog page all use the same label -->
<!-- Consistent aria-label across all pages ensures assistive technologies
     always announce the same name for this functionally identical button -->
<button type='submit' aria-label='Search'>
  <svg aria-hidden='true'>...</svg>
</button>

Aynı eylem için kullanılan simge görselde farklı alt metin — Hatalı

<!-- Order history page -->
<a href='/print/order/123'>
  <img src='/icons/print.svg' alt='Print order' />
</a>

<!-- Invoice page -->
<a href='/print/invoice/456'>
  <img src='/icons/print.svg' alt='Print this document' />
</a>

<!-- Receipt page -->
<a href='/print/receipt/789'>
  <img src='/icons/print.svg' alt='Yazdir' />
</a>

Aynı eylem için kullanılan simge görselde farklı alt metin — Doğru

<!-- All print links across the site share the same alt text.
     The destination URL differentiates which document is printed;
     the control's accessible name remains consistent. -->
<a href='/print/order/123'>
  <img src='/icons/print.svg' alt='Print' />
</a>

<a href='/print/invoice/456'>
  <img src='/icons/print.svg' alt='Print' />
</a>

<a href='/print/receipt/789'>
  <img src='/icons/print.svg' alt='Print' />
</a>

Gezinme kapatma düğmesinin tutarsız adlandırılması — Hatalı

<!-- Mobile menu on homepage -->
<button aria-label='Close menu' aria-expanded='true' aria-controls='nav-menu'>
  <svg aria-hidden='true'>...</svg>
</button>

<!-- Mobile menu on product page (different developer implemented it) -->
<button aria-label='Dismiss navigation' aria-expanded='true' aria-controls='nav-menu'>
  <svg aria-hidden='true'>...</svg>
</button>

Gezinme kapatma düğmesinin tutarsız adlandırılması — Doğru

<!-- A shared component/template ensures the label is identical everywhere.
     Using a single reusable component or design token for the label
     eliminates the risk of developer-introduced inconsistencies. -->
<button aria-label='Close navigation menu' aria-expanded='true' aria-controls='nav-menu'>
  <svg aria-hidden='true'>...</svg>
</button>

Farklı adlara sahip sosyal paylaşım bağlantıları — Hatalı

<!-- Article page -->
<a href='https://twitter.com/intent/tweet?url=...' aria-label='Share on Twitter'>
  <svg aria-hidden='true'>...</svg>
</a>

<!-- Video page -->
<a href='https://twitter.com/intent/tweet?url=...' aria-label='Tweet this'>
  <svg aria-hidden='true'>...</svg>
</a>

Farklı adlara sahip sosyal paylaşım bağlantıları — Doğru

<!-- Both pages use the same accessible name for the functionally
     identical sharing action. The URL parameter carries the context;
     the control name stays uniform. -->
<a href='https://twitter.com/intent/tweet?url=...' aria-label='Share on Twitter'>
  <svg aria-hidden='true'>...</svg>
</a>

Yaygın Hatalar

• Aynı bileşen için farklı şablonlarda farklı aria-label değerleri kullanmak: Ayrı geliştiriciler, paylaşılan bir bileşen kütüphanesi olmadan sayfa şablonlarını bağımsız olarak oluşturduğunda, kapatma, arama ve sepet gibi simge düğmeler sıklıkla gelişigüzel etiketler alır. Her tekrarlanan etkileşimli öğe için bir tasarım sistemi belirteci veya paylaşılan bileşen oluşturun; böylece erişilebilir ad bir kez tanımlanır ve her yerde yeniden kullanılır.
• Çok dilli sayfalarda erişilebilir adları tutarsız biçimde çevirmek: Bir site, arama düğmesini İngilizce olarak doğru şekilde "Search" şeklinde etiketleyebilir, ancak ardından hangi sayfa şablonunun önce yerelleştirildiğine bağlı olarak Türkçe karşılığını tutarsız biçimde — bazen "Ara", bazen "Arama Yap" — kullanabilir. Bileşen etiketi başına tek bir çeviri anahtarı oluşturun ve bunu tüm yerel dosyalar arasında uygulayın.
• Özdeş kontroller için bağlama özgü son ekler eklemek: Temel işlev (sepete ekleme) aynıyken düğmeleri "Add to cart — Blue T-Shirt", "Add to cart — Red Dress" vb. şeklinde etiketlemek otomatik olarak 3.2.4 ihlali değildir — WCAG ayırt etmeye izin verir — ancak bunu tutarsız biçimde yapmak (bazen son ekle, bazen sonsuz) kafa karışıklığı yaratır. Tek bir desen seçin ve bunu tutarlı biçimde uygulayın.
• Görünür metin etiketine güvenip farklı aria-label geçersiz kılmalarını göz ardı etmek: Bir düğme görsel olarak "Search" yazsa da bir şablon aria-label='Search the site' eklerken, diğerinde aria-label yoksa (dolayısıyla erişilebilir ad yalnızca görünen metinden türetiliyorsa), ekran okuyucular düğme aynı görünse bile farklı adlar duyurur. Yalnızca görünen etiketi değil, tam erişilebilir ad hesaplamasını denetleyin.
• CMS editörlerinin erişilebilirlik yönetişimi olmadan düğme metnini serbestçe değiştirmesine izin vermek: Düğme etiketlerini düzenlenebilir alanlar olarak sunan içerik yönetim sistemleri, editörlerin "Submit" etiketini kişisel tercihlerine göre "Send" veya "Gönder" olarak yeniden adlandırmasına izin verir. İşlevsel UI bileşenleri için etiket düzenlemeyi kısıtlayın veya önerilen etiket yerleşik standarttan saptığında editörleri uyaran doğrulama ekleyin.
• Üçüncü taraf widget’ları veya gömülü bileşenleri denetlememek: Üçüncü taraflarca eklenen sohbet widget’ları, çerez onay bantları ve ödeme iframe’leri, çoğu zaman ana sitenin kurallarından farklı şekilde etiketlenmiş düğmeler içerir. Mümkün olduğunda üçüncü taraf erişilebilir adlarını, adlandırma kurallarınızla uyumlu olacak şekilde gözden geçirin ve yapılandırın veya sapmayı bilinen bir istisna olarak belgeleyin.
• Bazı örneklerde tek erişilebilir ad kaynağı olarak araç ipucu metnini (title özniteliği) kullanırken diğerlerinde aria-label kullanmak: title özniteliği tüm yardımcı teknolojiler tarafından güvenilir biçimde duyurulmaz ve zayıf bir erişilebilir ad kaynağı olarak kabul edilir. Tekrarlanan bir bileşenin bazı örnekleri title, diğerleri aria-label kullanıyorsa, tarayıcı ve ekran okuyucu davranışlarındaki farklılıklar nedeniyle hesaplanan adlar farklı olabilir.
• Sayfalama kontrollerinin, numaraları farklı olduğu için muaf olduğunu varsaymak: Etiketlerinde bir sayfa numarası taşısalar bile ("Go to page 3" gibi) "Next page" ve "Previous page" kontrolleri tutarlı bir desen uygulamalıdır. Aynı sayfalama kontrolü için bazı sayfalarda "Next", bazılarında "Next page" veya "İleri" kullanmak 3.2.4’ü ihlal eder.
• Her farklı sayfa şablonunda başlık ve altbilgi bileşenlerini test etmemek: Siteler genellikle birden fazla sayfa şablonuna sahiptir (ana sayfa, kategori sayfası, makale sayfası, ödeme). Başlık ve altbilgi bileşenleri şablonlar arasında biraz farklı şekilde işlenebilir. Yalnızca bir veya iki şablonu kontrol eden test uzmanları, şablona özgü geçersiz kılmalarla ortaya çıkan tutarsızlıkları gözden kaçırabilir.
• 3.2.4’ü 3.2.3 (Tutarlı Gezinme) ile karıştırmak: Ekipler, gezinme sırası tutarlıysa (3.2.3) adlandırmanın da tutarlı olması gerektiğine inanabilir — ancak bunlar ayrı gerekliliklerdir. Her sayfada aynı konumda bulunan bir gezinme çubuğu (3.2.3 uyumu), bağlantıları sayfalar arasında farklı şekilde etiketlenmişse 3.2.4’te yine de başarısız olabilir. QA sürecinizde her iki ölçütü de açıkça ele alın.

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

21 Haziran 2025 tarihli ve 32933 sayılı Resmî Gazete’de yayımlanan Türkiye Cumhurbaşkanlığı Genelgesi 2025/10, çok geniş bir yelpazedeki kamu ve özel dijital hizmetler için bağlayıcı erişilebilirlik gereklilikleri getirir. Genelge, uluslararası kabul görmüş erişilebilirlik standartlarına uyumu zorunlu kılar — uygulamada WCAG 2.2 Seviye AA ile uyum — ve bu uyumu Aile ve Sosyal Hizmetler Bakanlığı tarafından verilen Erişilebilirlik Logosu ile ilişkilendirir.

WCAG 3.2.4 Tutarlı Tanımlama, Seviye AA ölçütüdür; bu da, Erişilebilirlik Logosu’nu elde etmek veya korumak isteyen kuruluşlar için bunun tavsiye niteliğinde değil, zorunlu bir gereklilik olduğu anlamına gelir. Bir dijital hizmette tutarlı tanımlamanın uygulanmaması, tam AA uyumunu ve dolayısıyla logoya uygunluğu engelleyecektir.

Genelge, web ve mobil arayüzlerinde WCAG 3.2.4’ü ele almak zorunda olan aşağıdaki kuruluş türlerini açıkça kapsar: kamu kurum ve kuruluşları; bankalar ve finansal hizmet sağlayıcıları; hastaneler ve sağlık platformları; 200.000 veya daha fazla abonesi olan telekomünikasyon işletmecileri; e-ticaret platformları; seyahat acenteleri ve rezervasyon hizmetleri; özel ulaşım şirketleri; ve Millî Eğitim Bakanlığı tarafından yetkilendirilmiş özel okullar.

Bu kuruluşlar için pratik sonuç oldukça önemlidir. Bir bankanın internet bankacılığı portalı, bir hastanenin randevu alma sistemi veya bir üniversitenin öğrenci bilgi sistemi gibi büyük kurumsal web siteleri genellikle yüzlerce sayfaya yayılır ve yıllar boyunca birden fazla geliştirme ekibi tarafından inşa edilir. Bu sayfalar arasında tekrarlanan kontrollerin (hesap işlem düğmeleri, arama çubukları, gezinme simgeleri) tutarsız etiketlenmesi, yaygın ve kolayca gözden kaçan bir hata türüdür. Uyum programları, yalnızca tek sayfalık otomatik taramalar değil, sayfalar arası tutarlılık denetimlerini de içeren özel bir test aşaması barındırmalıdır.

Erişilebilirlik Logosu’nu hedefleyen Türk kuruluşları, WCAG 3.2.4 kontrollerini tasarım sistemi yönetişimlerine, içerik yönetimi iş akışlarına ve QA hatlarına entegre etmelidir. Özellikle, her yeniden kullanılabilir UI bileşeninin erişilebilir adı, tasarım sistemi düzeyinde düzenlenemez sabit bir değer olarak tanımlanmalı; çeviri anahtarları, bileşenin göründüğü tüm sayfa ve şablonlarda Türkçe ve diğer dil varyantlarının tutarlı kalmasını sağlamak için merkezi olarak yönetilmelidir.