WCAG 2.5.3: İsimde Etiket

Bu Kuralın Anlamı

\n

WCAG 2.5.3 — Label in Name (İsimde Etiket) — ekranda görünen metin etiketi olan tüm kullanıcı arayüzü bileşenleri için geçerlidir. Bu ölçüt, bileşenin erişilebilir adının ya ekrandaki görünen etiket metniyle birebir aynı olmasını ya da en azından görünen etiket metnini bir alt dizi (substring) olarak içermesini gerektirir. Bu, kullanıcının ekranda bir etiket görüp, yardımcı teknolojisinin veya konuşma tanıma yazılımının perde arkasında tamamen farklı bir adı tanıdığı durumları engeller.

\n

Erişilebilir ad, erişilebilirlik ağacına açığa çıkarılan ve ekran okuyucular, sesle kontrol yazılımları ve diğer yardımcı teknolojiler tarafından kullanılan addır. Bu ad, öğenin görünen metin içeriğinden, bir aria-label özniteliğinden, bir aria-labelledby referansından, bir title özniteliğinden veya ilişkili bir <label> öğesinden gelebilir. Geliştirici, erişilebilir adı, görünen etiket metnini içermeyen bir şeyle geçersiz kıldığında bir uyumsuzluk oluşur ve ölçüt karşılanmaz.

\n

Etkilenen öğeler, metin gösteren ve aynı zamanda erişilebilir ada sahip olan tüm etkileşimli bileşenleri içerir: düğmeler, bağlantılar, görünen etiketli form girdileri, menü öğeleri, sekmeler, onay kutuları, radyo düğmeleri ve özel ARIA bileşenleri. Paragraflar veya başlıklar gibi etkileşimli olmayan öğeler bu ölçütün kapsamına girmez.

\n

Geçer sayılan durumlar: Erişilebilir ad, baştaki ve sondaki boşluklar yok sayılarak, görünen etiket metnini kesintisiz bir alt dizi olarak içerir. Eşleşme büyük/küçük harfe duyarlı değildir. Örneğin, bir düğme üzerinde "Search Products" yazıyorsa, "Search Products Now" erişilebilir adı, "Search Products" ifadesini içerdiği için geçer. "Find Products" erişilebilir adı ise görünen metni içermediği için kalır.

\n

Kalır sayılan durumlar: Erişilebilir ad, görünen etiketle tamamen farklıdır veya erişilebilir ad, görünen etiketin anlamlı bir bölümünü dışarıda bırakır. Görsel olarak üzerinde "Buy Now" yazan bir düğmenin aria-label='Purchase item' olması bu ölçütte kalmasına neden olur. Benzer şekilde, üzerinde "Contact Us" yazan bir bağlantının, aria-label='Reach our team' olan bir öğe içinde yer alması da kalır.

\n

WCAG’de tanımlanan resmi istisnalar: Ölçüt, etiketin tamamen sembolik veya piktografik olduğu ve hiçbir metin karşılığı bulunmadığı bileşenler için geçerli değildir (örneğin, yalnızca simge içeren ve görünür metni olmayan bir düğme). Ayrıca, metnin, hiçbir anlamsal anlam taşımayan tamamen dekoratif bir öğenin parçası olduğu durumlarda da geçerli değildir. Metinsel gösterimin konuşulan bir kelimeye dönüştürülemediği matematiksel gösterimler ve dile özgü senaryolar da kapsam dışıdır. Ek olarak, erişilebilir adın kasıtlı olarak ek bağlamla genişletildiği — ancak görünen metnin hâlâ erişilebilir adın içinde yer aldığı — bileşenler de uyumludur.

\n\n

Neden Önemlidir

\n

Bu ölçüt öncelikle Dragon NaturallySpeaking (şimdiki adıyla Dragon Professional), Windows Speech Recognition veya Apple Voice Control gibi konuşma tanıma yazılımlarına güvenen kullanıcıları korur. Bu kullanıcılar, ekranda gördükleri etiketi söyleyerek arayüz öğelerinde gezinir ve onları etkinleştirir. Erişilebilir ad, görünen etiketle eşleşmediğinde, yazılım, kullanıcı öğenin adını söylediğinde hedef öğeyi bulamaz; bu da fare veya klavye olmadan kontrolü fiilen erişilemez hale getirir. Tekrarlayan zorlanma yaralanmaları, kas distrofisi, serebral palsi veya omurilik yaralanmaları olanlar dahil motor engelli kullanıcılar için sesle giriş çoğu zaman bilgisayarı kullanmanın birincil veya tek yoludur. Tek bir düğmedeki uyumsuzluk, tüm bir iş akışına erişimi engelleyebilir.

\n

Ekran okuyucu kullanıcıları da etkilenir. Ekran okuyucu, ekranda görünenle farklı bir erişilebilir ad duyurduğunda bilişsel bir yönelim bozukluğu oluşur. Aynı zamanda ekran okuyucu kullanan gören bir kullanıcı — örneğin, hem görsel hem işitsel geri bildirimi aynı anda kullanan az gören biri — ekranda farklı bir şey okurken bir yandan da başka bir şeyin duyurulduğunu işitebilir; bu da arayüzle ilgili zihinsel modellerini bozar.

\n

Bilişsel engelli kullanıcılar, okudukları ile duyulan veya duyurulan şey arasındaki tutarlılıktan fayda sağlar. Beklenmedik ad değişiklikleri bilişsel yükü artırır ve özellikle hafıza güçlüğü yaşayan veya bir sistemi ilk kez kullanmayı öğrenen kullanıcılar için kafa karışıklığına veya hatalara neden olabilir.

\n

Somut bir gerçek dünya senaryosu: Görsel olarak "Place Order" metnini gösteren bir düğmenin bulunduğu bir e-ticaret ödeme sayfasını düşünün. Bir geliştirici, daha açıklayıcı olduğunu düşündüğü bir ad sağlamak için aria-label='Submit purchase form' ekler. Dragon NaturallySpeaking kullanan bir müşteri "Click Place Order" der — Dragon erişilebilirlik ağacını tarar, "Place Order" adlı hiçbir öğe bulamaz ve düğmeyi etkinleştiremez. Müşteri, fare kontrolüne geçmeden satın alımını tamamlayamaz; bunu yapamayabilir de. İşlemi yarıda bırakır. Bu, varsayımsal bir uç durum değildir; perakende ve bankacılık sitelerinde yapılan otomatik denetimlerde sıkça görülen bir hata örüntüsüdür.

\n

Dünya Sağlık Örgütü’ne göre, dünya genelinde bir milyardan fazla insan bir tür engelle yaşamaktadır. 2023 WebAIM Million raporu, WCAG 2.5.3 etiket uyumsuzluklarının denetlenen sayfaların anlamlı bir bölümünde görüldüğünü ve çoğunlukla iyi niyetli ancak yanlış uygulanmış ARIA nedeniyle ortaya çıktığını göstermiştir. Erişilebilirliğin ötesinde, tutarlı etiketleme SEO’yu da iyileştirir; çünkü bağlantı ve düğme metnini alaka düzeyi sıralaması için dizine ekleyen arama motoru tarayıcıları, erişilebilir adlar görünen metinle uyumlu olduğunda daha anlamlı sinyaller alır.

\n\n

İlgili Axe-core Kuralları

\n

\n
• label-content-name-mismatch: Bu, WCAG 2.5.3 ile ilişkili birincil otomatik kuraldır. Kural, hem görünen metin etiketi hem de erişilebilir adı olan etkileşimli öğeleri — düğmeler, bağlantılar ve role='button', role='link', role='menuitem' ve role='tab' gibi ARIA rolleri — denetler. Erişilebilir adın, görünen metni bir alt dizi olarak içermediği (büyük/küçük harfe duyarsız) her öğeyi işaretler. Kural, özellikle erişilebilir adın, ekrandaki metinden farklı olacak şekilde aria-label veya aria-labelledby ile geçersiz kılındığı öğeleri hedefler. Axe, bunları etki düzeyi "serious" (ciddi) olan ihlaller olarak raporlar; çünkü bu durum, konuşma girdisi kullanan kullanıcıların denetimleri etkinleştirmesini doğrudan engeller.
\n
• Otomatik tespitin sınırlamaları: axe-core gibi otomatik araçlar, görünen metin öğe içinde düz metin düğümleri olarak işlendiğinde ve erişilebilir ad statik bir aria-label veya aria-labelledby özniteliğinden geldiğinde uyumsuzlukları güvenilir şekilde tespit edebilir. Ancak şu durumlarda manuel test gerekir: (1) görünen metin, tarayıcı ve yardımcı teknoloji sürümüne bağlı olarak erişilebilirlik ağacına dahil edilebilen veya edilmeyebilen CSS ::before veya ::after sözde öğeleriyle işlendiğinde; (2) etiket, sayfa yüklendikten sonra JavaScript ile dinamik olarak eklendiğinde; (3) görünen metin, metinsel bileşenin çıkarılması gereken simgeler veya resim tabanlı metin içerdiğinde; (4) öğenin hesaplanmış erişilebilir adı, birden fazla öğeyi birleştiren karmaşık aria-labelledby zincirlerini içerdiğinde. Bu durumlarda, bir ekran okuyucu kullanan insan testçinin, duyurulan ile ekranda görüneni karşılaştırarak gerçekte neyin duyurulduğunu doğrulaması gerekir.
\n

\n\n

Nasıl Test Edilir

\n

\n
1. axe DevTools veya Lighthouse ile otomatik tarama: axe DevTools tarayıcı uzantısını (Chrome veya Firefox) yükleyin veya Chrome DevTools içinde bir Lighthouse erişilebilirlik denetimi çalıştırın. Tarama işlemini, tam olarak işlenmiş sayfada tetikleyin — etkileşimli öğeler içeriyorlarsa dinamik içeriklerin, modalların ve genişletilmiş menülerin açık olduğundan emin olun. axe sonuç panelinde, kural kimliğine göre label-content-name-mismatch filtresi uygulayın. İşaretlenen her öğe, hesaplanmış erişilebilir adını görünen metinle birlikte gösterir; bu da uyumsuzluğu hemen görünür kılar. Öğenin seçicisini not alın ve erişilebilir adın nereden geçersiz kılındığını belirlemek için DOM’u inceleyin. Lighthouse, aynı hataları "Accessibility" kategorisi altında WCAG 2.5.3’e referans vererek gösterir.
\n
2. Tarayıcı DevTools ile manuel inceleme: Tarayıcının Erişilebilirlik panelini açın (Chrome DevTools → Elements → Accessibility sekmesi veya Firefox DevTools → Accessibility sekmesi). Görünen metni olan her etkileşimli öğeyi seçin. Öğenin Name alanı için "Computed Properties" bölümünü kontrol edin. Bu değeri görünen etiketle karşılaştırın. Hesaplanmış ad, görünen etiket metnini bir alt dizi olarak içermiyorsa, öğe 2.5.3’te kalır.
\n
3. NVDA + Firefox ile ekran okuyucu testi: NVDA çalışırken Firefox’u açın. Sekme (Tab) tuşunu kullanarak her etkileşimli öğeye gidin. NVDA’nın öğenin adı olarak ne duyurduğunu dinleyin. Duyurulan ad ile ekranda gösterilen metin arasındaki farklılıkları not edin. NVDA’nın Öğe Listesini (Insert+F7) kullanarak tüm bağlantıları ve düğmeleri liste halinde inceleyin ve duyurulan adları görsel etiketlerle toplu olarak karşılaştırın.
\n
4. JAWS + Chrome ile ekran okuyucu testi: JAWS çalışırken Chrome’u açın. Tüm etkileşimli denetimler arasında Sekme ile dolaşın. JAWS, erişilebilir adı rolün ardından duyurur. Duyurulan ad, görünen metni içermediğinde öğeyi not edin. Ayrıca JAWS’un "Browse Mode" özelliğini ve sanal görüntüleyicisini kullanarak her denetim için hesaplanmış erişilebilir adı görebilirsiniz.
\n
5. VoiceOver + Safari (macOS/iOS) ile ekran okuyucu testi: VoiceOver’ı etkinleştirin (macOS’te Command+F5). Etkileşimli öğeler arasında gezinmek için Tab veya VO+Sağ Ok tuşlarını kullanın. VoiceOver, her denetim için erişilebilir adı duyurur. iOS’te, öğeler arasında ilerlemek için bir parmağınızla sağa doğru kaydırın ve ad-etiket uyumsuzluklarını dinleyin.
\n
6. Voice Control (macOS/iOS) veya Dragon ile konuşma tanıma testi: macOS Voice Control’ü etkinleştirin (System Settings → Accessibility → Voice Control). Tüm etkileşimli öğelerin etiketlerini göstermek için "Show names" deyin. Voice Control’ün gösterdiği etiketlerin ekrandaki görünen metinle eşleştiğini doğrulayın. Görünen etiket metnini söyleyerek denetimleri etkinleştirmeye çalışın — görünen adına yanıt vermeyen her denetim, 2.5.3 ihlalidir. Mümkünse Windows’ta Dragon NaturallySpeaking ile de tekrarlayın ve "Click [label]" komutunu kullanın.
\n

\n\n

Nasıl Düzeltilir

\n\n

aria-label ile geçersiz kılınan düğme — Hatalı

\n

<!-- FAIL: aria-label, görünen \"Search\" metnini tamamen\n     \"Execute query\" ile değiştirerek sesli girişi bozar -->\n<button aria-label='Execute query'>\n  Search\n</button>

\n\n

aria-label ile geçersiz kılınan düğme — Doğru

\n

<!-- PASS: Uyumsuz aria-label tamamen kaldırılır.\n     Düğmenin görünen \"Search\" metni otomatik olarak erişilebilir adı olur.\n     Sesli kullanıcılar \"Click Search\" diyerek düğmeyi etkinleştirebilir. -->\n<button>\n  Search\n</button>\n\n<!-- PASS (alternatif): Ek bağlam gerekiyorsa,\n     erişilebilir adın GÖRÜNEN metni İÇERDİĞİNDEN emin olun. -->\n<button aria-label='Search products'>\n  Search\n</button>

\n\n

İlgisiz metne işaret eden aria-labelledby’li bağlantı — Hatalı

\n

<!-- FAIL: aria-labelledby, \"Our Services\" başlığına referans verir\n     ancak bağlantı görsel olarak \"Learn more\" yazar,\n     bu nedenle erişilebilir ad \"Learn more\" yerine \"Our Services\" olur -->\n<h2 id='services-heading'>Our Services</h2>\n<p>\n  <a href='/services' aria-labelledby='services-heading'>Learn more</a>\n</p>

\n\n

İlgisiz metne işaret eden aria-labelledby’li bağlantı — Doğru

\n

<!-- PASS: aria-labelledby kullanarak bağlantının kendi metnini başlıkla birleştirin.\n     Erişilebilir ad \"Learn more Our Services\" olur\n     ve görünen \"Learn more\" etiketini içerir. -->\n<h2 id='services-heading'>Our Services</h2>\n<p>\n  <a href='/services' id='learn-link' aria-labelledby='learn-link services-heading'>\n    Learn more\n  </a>\n</p>\n\n<!-- PASS (alternatif): Görünen bağlantı metnini kendi kendine açıklayıcı yapın\n     böylece hiçbir geçersiz kılma gerekmesin. -->\n<a href='/services'>Learn more about our services</a>

\n\n

aria-label erişilebilir adı görünen metinle çelişen simge düğme — Hatalı

\n

<!-- FAIL: Düğme hem bir sepet simgesi HEM de \"Cart\" metnini gösterir.\n     'View shopping basket' aria-label’i \"Cart\" ifadesini içermez,\n     bu nedenle \"Click Cart\" diyen sesli kullanıcılar yanıt alamaz. -->\n<button aria-label='View shopping basket'>\n  <svg aria-hidden='true'><!-- cart icon --></svg>\n  Cart\n</button>

\n\n

aria-label erişilebilir adı görünen metinle çelişen simge düğme — Doğru

\n

<!-- PASS: aria-label, görünen \"Cart\" metnini bir alt dizi olarak içerir.\n     Sesli kullanıcılar \"Click Cart\" veya \"Click View Cart\" diyebilir ve her ikisi de çalışır. -->\n<button aria-label='View Cart'>\n  <svg aria-hidden='true'><!-- cart icon --></svg>\n  Cart\n</button>\n\n<!-- PASS (tercih edilen): aria-label’i kaldırın ve simgeyi ağaçtan gizleyin.\n     Düğmenin \"Cart\" metin içeriği doğrudan erişilebilir adı olur. -->\n<button>\n  <svg aria-hidden='true' focusable='false'><!-- cart icon --></svg>\n  Cart\n</button>

\n\n

Görünen etiketi olan ancak aria-label’i uyumsuz form girdisi — Hatalı

\n\n

(İçerik belirteç sınırı nedeniyle kesildi — lütfen bu makaleyi yeniden deneyin.)