WCAG 1.3.6: Amacı Belirleme

Bu Kuralın Anlamı

\n

WCAG 1.3.6 — Amacı Belirleme, Mevcut yapı ve anlamsal gereksinimleri daha ince bir ayrıntı düzeyine genişleten, İlke 1 (Algılanabilir) altında Seviye AAA ölçütüdür. Özellikle, her bir kullanıcı arayüzü bileşeninin, simgenin, bölgenin ve belirli girdi alanlarının amacının programatik olarak belirlenebilmesini gerektirir — yani anlamsal bilginin, tarayıcıların, tarayıcı uzantılarının ve yardımcı teknolojilerin bunu okuyup buna göre hareket edebileceği şekilde açığa çıkarılmasını ifade eder.

\n

Bu ölçüt doğrudan 1.3.1 (Bilgi ve İlişkiler) ve 1.3.5 (Girdi Amacını Belirleme) üzerine inşa edilir. 1.3.5 yaygın kişisel veri girdi alanlarına (ad, e-posta, telefon vb.) odaklanırken, 1.3.6 gereksinimi gezinme işaretleri, simgeler, düğmeler ve etkileşimli bileşenler dahil olmak üzere tüm kullanıcı arayüzü bölgeleri ve bileşenlerine genişletir. Temel fikir, bir kullanıcı aracısının veya kişiselleştirme aracının, işaretlemeye gömülü makinece okunabilir amaç verilerine dayanarak varsayılan sunumu değiştirebilmesi — metin etiketlerini sembollerle değiştirmesi, karmaşık bir gezinmeyi sadeleştirmesi veya en ilgili denetimleri vurgulaması — gerektiğidir.

\n

Pratik açıdan, bir sayfa, HTML5 işaret bölgesi (landmark) öğelerini (örneğin <header>, <nav>, <main>, <aside>, <footer> ve <section>) kullandığında, işaret öğelerinin kullanılmadığı yerlerde uygun ARIA işaret rolleri uygulandığında, simgelerin ve diğer metin olmayan UI bileşenlerinin amacı erişilebilir adlar veya roller aracılığıyla açığa çıkarıldığında ve — uygulanabildiği yerlerde — W3C Personalization Semantics (eski adıyla COGA Semantics önerisi) tanımında yer alanlar gibi standartlaştırılmış amaç belirteçleri kullanıldığında, örneğin aui- öznitelik söz dağarcığı aracılığıyla, 1.3.6’yı geçer.

\n

Bir sayfa, bölgeleri anlamsal rolü olmayan genel <div> veya <span> kapları olarak uygulandığında, simgeler anlam taşıdığı hâlde erişilebilir adı veya destekleyici anlamsal bilgisi olmadığında ya da etkileşimli bileşenler, görünür görünümleri dışında işlevleri hakkında hiçbir programatik ipucu sunmadığında başarısız olur. Resmî bir istisna geçerlidir: gereksinim yalnızca beklenen anlamın tanımlanmasını destekleyen teknolojiler kullanılarak uygulanmış içeriğe uygulanır. Belirli bir teknoloji yığınındaki belirli bir bileşen türü için destekleyici bir teknoloji veya spesifikasyon yoksa, ölçüt o bileşene makul biçimde uygulanamaz.

\n\n

Neden Önemlidir

\n

WCAG 1.3.6’nın birincil yararlanıcıları, disleksi, dikkat eksikliği bozuklukları, otizm spektrum koşulları, hafıza bozuklukları ve entelektüel engeller dahil olmak üzere bilişsel ve öğrenme engelleri olan kişilerdir. Dünya Sağlık Örgütü’ne göre, dünya genelinde yaklaşık her 6 kişiden 1’i — bir milyardan fazla birey — önemli bir engellilik biçimiyle yaşamaktadır ve bilişsel engeller en büyük ve en az hizmet alan gruplardan birini temsil eder. Bu kullanıcıların çoğu, karmaşık gezinme yapıları, yoğun metin menüleri ve hiçbir anlamsal dayanak sunmayan yalnızca simge tabanlı denetimlerle mücadele eder.

\n

Somut bir senaryo düşünün: ağır disleksisi olan bir kullanıcı, standart gezinme etiketlerini günlük yaşamda kullandığı bir iletişim panosundan alınan resim tabanlı simgeler gibi kişisel sembol setleriyle değiştiren bir tarayıcı uzantısına güvenir. Bu ikamenin çalışması için, uzantının belirli bir <div>’in aslında bir gezinme işareti olduğunu, bir yıldız simgesinin "favorilere ekle"yi temsil ettiğini ve dairesel bir okun "yenile"yi temsil ettiğini belirleyebilmesi gerekir. Programatik olarak belirlenebilir bir amaç olmadan, uzantının bağlanabileceği hiçbir şey yoktur ve ikame sessizce başarısız olur; kullanıcı, çözemediği bir arayüzle baş başa kalır.

\n

Anahtarlama erişimi veya sesle kontrol araçlarına güvenen motor engelli kullanıcılar da önemli ölçüde fayda sağlar, çünkü amacı bilen araçlar yalnızca işlevi makinece okunabilir olan denetimler için kısayol katmanları veya ses komutu eşlemeleri oluşturabilir. Ekran okuyucular aracılığıyla etkileşim kuran kör kullanıcılar, doğrudan <main> içeriğine atlamalarına veya tekrarlayan gezinmeyi atlamalarına olanak tanıyan açıkça etiketlenmiş işaret bölgelerinden yararlanır. Tarayıcı yakınlaştırması veya özel stil sayfaları kullanan az gören kullanıcılar, tarayıcının içeriği öngörülebilir şekilde yeniden akıtmasına izin verdiği için işaret yapısından fayda sağlar.

\n

Erişilebilirliğin ötesinde, 1.3.6’nın gerektirdiği anlamsal bilgilerin uygulanması ölçülebilir SEO faydaları sağlar. Arama motoru tarayıcıları, sayfa yapısını anlamak, içerik hiyerarşilerini dizine eklemek ve zengin sonuçlar üretmek için işaret ve şema işaretlemesini kullanır. Anlamlı işaret bölgelerine sahip iyi yapılandırılmış bir sayfanın öne çıkan snippet’ler ve daha yüksek alaka puanları elde etme olasılığı daha yüksektir. Ayrıca doğrudan bir kullanılabilirlik getirisi de vardır: net anlamsal yapıya sahip sayfalar, geliştirme ekipleri tarafından bakım, test ve genişletme açısından daha kolaydır ve uzun vadeli teknik borcu azaltır.

\n\n

İlgili Axe-core Kuralları

\n

WCAG 1.3.6, herhangi bir otomatik denetime ek olarak manuel test gerektirir. Otomatik araçlar anlamsal işaretlemenin varlığını doğrulayabilir, ancak bu işaretlemenin her bileşenin amacını bir insan testçinin yapacağı gibi doğru ve eksiksiz biçimde iletip iletmediğini belirleyemez. Aşağıdaki axe-core kuralları yakından ilişkilidir ve bu ölçütün bazı yönleri için otomatik vekil görevi görür:

\n

\n
• region — Sayfadaki tüm içeriğin bir işaret bölgesi içinde yer aldığını kontrol eder. Tanınan herhangi bir işaret öğesi veya ARIA işaret rolü dışında kalan içeriği işaretler. Bu kural, amaç tanımlamasının doğruluğunu test etmese de, 1.3.6 tarafından gerekli yapısal temelin mevcut olmasını sağlar. Başarısızlık, önemli içeriğin işaret tabanlı gezinme için görünmez olduğu anlamına gelir.
\n
• landmark-one-main — Sayfanın tam olarak bir <main> öğesi veya role='main' olan bir öğe içerdiğini doğrular. Bu, 1.3.6 için temeldir çünkü ana içerik alanı, amacı tanımlanabilir olması gereken en kritik bölgelerden biridir. Birden fazla veya eksik <main> işareti, kişiselleştirme araçlarının birincil içeriği yalıtmasını imkânsız hâle getirir.
\n
• landmark-complementary-is-top-level — <aside> öğelerinin veya role='complementary' bölgelerinin, amaçlarını yanlış yansıtacak şekilde ana içerik alanı içinde iç içe geçmediğini kontrol eder. Yanlış iç içe yerleştirme, bölgeler arasındaki ilişki hakkında yardımcı teknolojiyi yanıltır.
\n
• aria-allowed-role ve aria-valid-attr-value — Geçersiz veya uygunsuz ARIA rol atamalarını işaretler. 1.3.6 doğru rol anlambilimine bağlı olduğundan, yanlış bir rol kullanmak (örneğin bir düğme grubunda role='navigation') amaç tanımlamasını aktif olarak baltalar ve bu kurallar bu tür uyumsuzlukları ortaya çıkarır.
\n
• button-name ve link-name — Etkileşimli denetimlerin erişilebilir adlara sahip olduğunu doğrular. Erişilebilir adı olmayan yalnızca simge düğmeler ve bağlantılar, 1.3.6 için birincil başarısızlık türüdür; çünkü adı olmayan bir denetim için hiçbir amaç belirlenemez. Bu kurallar, aria-label, aria-labelledby veya görünür metnin yokluğunu işaretler.
\n

\n

Manuel test gereklidir çünkü otomatik araçlar, seçilen amaç belirteçlerinin veya anlamsal rollerin, bileşenin uygulamanın bağlamındaki gerçek işlevini doğru biçimde temsil edip etmediğini değerlendiremez. Bir düğmenin erişilebilir bir adı ve geçerli bir ARIA rolü olabilir, ancak adı yanıltıcıysa veya rol, denetimin gerçekte yaptığını yansıtmıyorsa yine de 1.3.6’da başarısız olur.

\n\n

Nasıl Test Edilir

\n

\n
1. axe DevTools veya Lighthouse ile otomatik bir tarama çalıştırın. Sayfayı Chrome’da açın, axe DevTools uzantısını etkinleştirin ve tam sayfa taraması yapın. Sonuçları yukarıda listelenen kurallara göre filtreleyin: region, landmark-one-main, button-name ve link-name. Herhangi bir ihlali ve bunların etki derecelerini not edin. Lighthouse’ta bir Erişilebilirlik denetimi çalıştırın ve işaret ve ARIA bölümlerini inceleyin. Tüm başarısızlıkları bir temel çizgi olarak belgeleyin, ancak bunların yalnızca 1.3.6 uyumluluğunun bir alt kümesini temsil ettiğini unutmayın.
\n
2. İşaret yapısını tarayıcı geliştirici araçlarıyla manuel olarak inceleyin. DevTools’u açın, Erişilebilirlik Ağacı paneline (Chrome) veya Erişilebilirlik Denetçisi’ne (Firefox) gidin ve sayfanın tutarlı bir işaret hiyerarşisi sunduğunu doğrulayın: üst düzeyde bir <header>, bir <main>, en az bir <nav> (birden fazla varsa ayırt edici bir etiketle) ve bir <footer>. Anlamlı hiçbir içerik bölgesinin yalnızca genel bir <div> veya <span> içine sarılmadığını doğrulayın.
\n
3. NVDA ve Firefox ile test edin. NVDA’yı başlatın, sayfayı Firefox’ta açın ve işaretler arasında dolaşmak için D tuşuna basın. Her işaretin anlamlı bir rolle duyurulduğunu ve aynı türden birden fazla işaret olduğunda benzersiz bir etikete sahip olduğunu doğrulayın. Sekme tuşunu kullanarak yalnızca simge düğmelerin her birine gidin ve NVDA’nın boş bir dize, dosya adı veya "button" gibi genel bir etiket değil, açıklayıcı bir erişilebilir ad duyurduğunu doğrulayın.
\n
4. VoiceOver ve Safari (macOS/iOS) ile test edin. VoiceOver’ı etkinleştirin (macOS’ta Cmd+F5). Rotor’u (Vo+U) kullanarak İşaretler listesini açın ve beklenen tüm bölgelerin göründüğünü doğrulayın. Etkileşimli denetimler arasında sekme ile dolaşın ve anlamlı açıklamaları dinleyin. iOS’ta, başlıklar ve işaretler arasında gezinmek için üç parmakla kaydırma hareketini kullanın ve her bölgenin amacının doğru şekilde duyurulduğunu doğrulayın.
\n
5. JAWS ve Chrome ile test edin. JAWS çalışırken sayfayı Chrome’da açın. Bölgeler arasında gezinmek için R tuşuna basın ve her bölgenin rolünün ve etiketinin doğru olduğunu doğrulayın. JAWS Sanal İmlecini kullanarak simge düğmeler boyunca okuyun ve amaçlarının iletildiğini doğrulayın. Tüm bağlantı adlarının anlamlılığını denetlemek için JAWS Bağlantı Listesini (Insert+F7) kullanın.
\n
6. Kişiselleştirme anlambilimini test edin (uygulanmışsa). Sayfanız W3C Personalization Semantics söz dağarcığını (örneğin data-purpose veya aui- öznitelikleri) kullanıyorsa, amaç belirteçlerinin doğru şekilde uygulandığını ve spesifikasyonu destekleyen kullanıcı aracıları tarafından makinece okunabilir olduğunu doğrulamak için Personalization Semantics test aracını veya uyumlu bir tarayıcı uzantısını kullanın.
\n
7. Bileşen bazlı bir amaç denetimi yapın. Sayfadaki her etkileşimli bileşen ve simge için şu soruyu sorun: Bu bileşenin amacı görsel bağlam olmadan belirlenebiliyor mu? Tüm CSS ve görselleri kaldırmak, bileşenin amacını yalnızca DOM ve ARIA özniteliklerinden açık bırakıyorsa, geçer. Amaç yalnızca görsel olarak iletiliyorsa, başarısız olur.
\n

\n\n

Nasıl Düzeltilir

\n\n

İşaretler olmadan genel div bölgeleri — Hatalı

\n

<div class='site-header'>\n  <div class='logo'>Accsible</div>\n  <div class='main-nav'>\n    <a href='/home'>Home</a>\n    <a href='/pricing'>Pricing</a>\n  </div>\n</div>\n<div class='main-content'>\n  <p>Welcome to our platform.</p>\n</div>\n<div class='sidebar'>\n  <p>Related articles</p>\n</div>\n<div class='site-footer'>\n  <p>© 2025 Accsible</p>\n</div>

\n\n

İşaretler olmadan genel div bölgeleri — Doğru

\n

<!-- Tarayıcılar ve yardımcı teknolojiler\n     her bölgenin amacını programatik olarak belirleyebilsin diye\n     yerel HTML5 işaret öğelerini kullanın -->\n<header>\n  <a href='/' aria-label='Accsible home'>\n    <img src='logo.svg' alt='Accsible' />\n  </a>\n  <nav aria-label='Primary navigation'>\n    <a href='/home'>Home</a>\n    <a href='/pricing'>Pricing</a>\n  </nav>\n</header>\n<main>\n  <p>Welcome to our platform.</p>\n</main>\n<aside aria-label='Related articles'>\n  <p>Related articles</p>\n</aside>\n<footer>\n  <p>© 2025 Accsible</p>\n</footer>

\n\n

Erişilebilir adı olmayan yalnızca simge düğme — Hatalı

\n

<!-- Amacı programatik olarak belirlenemeyen\n     bir simge düğme — hiç erişilebilir adı yok -->\n<button class='btn-icon'>\n  <svg viewBox='0 0 24 24' width='24' height='24'>\n    <path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/>\n  </svg>\n</button>

\n\n

Erişilebilir adı olmayan yalnızca simge düğme — Doğru

\n

<!-- aria-label düğmeye programatik olarak belirlenebilir\n     bir amaç verir; etiket bunu karşıladığından SVG AT'den gizlenir -->\n<button class='btn-icon' aria-label='Add to favourites'>\n  <svg viewBox='0 0 24 24' width='24' height='24' aria-hidden='true' focusable='false'>\n    <path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/>\n  </svg>\n</button>

\n\n

Ayırt edici etiketler olmadan birden fazla gezinme işareti — Hatalı

\n

<!-- Aynı role sahip ama etiketsiz iki nav öğesi:\n     ekran okuyucular amaçlarını ayırt edemez -->\n<nav>\n  <a href='/home'>Home</a>\n  <a href='/about'>About</a>\n</nav>\n\n<nav>\n  <a href='/page1'>Chapter 1</a>

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