WCAG Başarı Kriterleri · Level A
WCAG 4.1.2: İsim, Rol, Değer
WCAG 4.1.2, tüm kullanıcı arayüzü bileşenlerinin programatik olarak belirlenebilir bir ada ve role sahip olmasını ve durumların, özelliklerin ve değerlerin yardımcı teknolojiler tarafından hem okunup hem de ayarlanabilmesini gerektirir. Bu, ekran okuyucuların ve diğer araçların sayfadaki her bir öğeyi doğru şekilde tanımlamasını, betimlemesini ve onunla etkileşime girmesini sağlar.
Bu Kuralın Anlamı
WCAG 4.1.2 — İsim, Rol, Değer, Sağlam (Robust) ilkesinin altında yer alan Seviye A başarı ölçütüdür. Form öğeleri, butonlar, bağlantılar, özel bileşenler (widget), çerçeveler (frame) ve etkileşimli kontroller dahil her kullanıcı arayüzü bileşeni için aşağıdaki üç şeyin doğru olmasını gerektirir:
- İsim (Name): Her bileşenin, yardımcı teknolojilerin sesli olarak okuyabileceği veya braille ekran üzerinden gösterebileceği erişilebilir bir ismi olmalıdır. İsim; öğe içeriğinden (örneğin bir
<button>içindeki metin), birlabelöğesinden, biraria-labelözniteliğinden, biraria-labelledbyreferansından veya birtitleözniteliğinden gelebilir. - Rol (Role): Her bileşenin, amacını yardımcı teknolojilere ileten bir rolü olmalıdır. Yerel (native) HTML öğeleri örtük rollere sahiptir (bir
<button>öğesinin rolü button, bir<input type='checkbox'>öğesinin rolü checkbox’tur).<div>veya<span>gibi genel öğelerden oluşturulan özel bileşenler, ARIAroleözniteliği kullanılarak rolleri açıkça tanımlamalıdır. - Değer (Durumlar ve Özellikler): Kullanıcı için anlamlı olan her mevcut durum veya değer — bir onay kutusunun işaretli olup olmadığı, bir açılır/kapanır bileşenin genişletilmiş olup olmadığı, bir alanın zorunlu olup olmadığı gibi — programatik olarak açığa çıkarılmalıdır ki yardımcı teknolojiler bunu rapor edebilsin ve kullanıcılar uygulanabildiği yerlerde bu durumu değiştirebilsin.
Bir bileşen, erişilebilir ismi boş olmadığında, rolü geçerli ve anlamsal olarak uygun olduğunda ve tüm ilgili durumlar (örneğin aria-checked, aria-expanded veya aria-required) görsel arayüzle senkronize şekilde doğru uygulanmış olduğunda bu ölçütü geçer. Bileşen, bu üç unsurdan herhangi biri eksik, hatalı veya senkron dışı olduğunda kalır — örneğin, rengi görsel olarak değişen ancak aria-pressed durumunu hiç güncellemeyen özel bir geçiş (toggle) butonu gibi.
Resmî WCAG istisnası, bilerek erişilebilirlik API’lerine açılmayan bileşenleri kapsar — örneğin, tamamen dekoratif öğeler veya aria-hidden='true' ile gizlenmiş içerik. Ancak, etkin veya odaklanabilir içeriği aria-hidden ile gizlemek (örneğin bunu <body> öğesine uygulamak) başlı başına bir ihlaldir, çünkü sayfadaki tüm içeriği erişilebilirlik ağacından kaldırır.
Neden Önemlidir
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. JAWS, NVDA veya VoiceOver gibi ekran okuyuculara güvenen kör ve az gören kullanıcılar için her etkileşimli bileşenin erişilebilir ismi ve rolü, bir kontrolün ne yaptığını ve nasıl kullanılacağını anlamanın birincil — ve çoğu zaman tek — yoludur. Bir butonun erişilebilir ismi yoksa, ekran okuyucu kullanıcısı yalnızca amacına dair hiçbir ipucu olmadan “button” ifadesini duyar. Özel bir açılır liste (dropdown) rolü olmadan oluşturulmuşsa, kullanıcı bunu statik metinden ayırt edemez.
Yazılımları anahtar (switch) erişimi, Dragon NaturallySpeaking gibi sesle kontrol araçları veya klavye ile kullanan motor engelli kullanıcılar da bu ölçüte bağlıdır. Sesle kontrol yazılımları, söylenen komutları (“Gönder’e tıkla”) erişilebilir isimlerle eşleştirir. Bir butonun erişilebilir ismi, görünen etiketiyle eşleşmiyorsa, sesli komutlar tamamen başarısız olur.
Bilişsel erişilebilirlik de aynı derecede önemlidir. Tutarlı ve öngörülebilir etiketleme, disleksi, hafıza bozuklukları veya dikkatle ilgili engelleri olan kullanıcılar için bilişsel yükü azaltır. Durum değişiklikleri — örneğin bir modal pencerenin açılması veya bir form alanının zorunlu hale gelmesi — yardımcı teknolojiler tarafından duyurulmadığında, kullanıcılar yönlerini kaybedebilir ve görevleri tamamlayamaz hale gelebilir.
Somut bir gerçek dünya senaryosunu düşünün: Bir Türk e-ticaret platformu, tıklama işleyicisi ve alışveriş sepeti simgesi olan bir <div> olarak oluşturulmuş “Sepete Ekle” butonu gösteriyor. Görsel olarak buton gibi görünüyor. Ancak role='button', erişilebilir bir isim ve tabindex='0' olmadığı için, klavye ile gezinme yapan bir ekran okuyucu kullanıcısı hiçbir şeyle karşılaşmaz — bu öğe yardımcı teknolojisi için tamamen görünmezdir. Kullanıcı ürünleri sepetine ekleyemez ve fiilen tüm alışveriş deneyiminin dışında bırakılır.
Erişilebilirliğin ötesinde, doğru adlandırılmış ve yapılandırılmış bileşenler SEO’yu da iyileştirir, çünkü arama motoru tarayıcıları sayfa yapısını ve etkileşimli niyeti anlamak için anlamsal işaretlemeye güvenir. Ayrıca test edilebilirliği artırırlar; çünkü otomatik test çerçeveleri, anlamlı rol ve etiketlere sahip öğeleri daha güvenilir şekilde bulup onlarla etkileşime girebilir.
İlgili Axe-core Kuralları
Aşağıdaki axe-core kuralları doğrudan WCAG 4.1.2 ile ilişkilidir. Her biri, isim, rol veya değer hatalarının belirli bir kategorisini hedefler:
- aria-allowed-attr: Bir öğeye uygulanan ARIA özniteliklerinin, o öğenin rolü için izin verilen öznitelikler olduğunu kontrol eder. Örneğin,
role='link'olan bir öğeyearia-checkeduygulamak geçersizdir ve işaretlenir, çünkülinkrolüaria-checked’i desteklemez. - aria-command-name: ARIA komut rolleri (
link,button,menuitem) olan öğelerin boş olmayan bir erişilebilir isme sahip olmasını sağlar. Etiket metni olmayan vearia-labeliçermeyen yalnızca simgeden oluşan bir buton burada işaretlenir. - aria-hidden-body:
aria-hidden='true'özniteliğinin<body>öğesine uygulandığı özel durumu işaretler; bu, tüm sayfayı erişilebilirlik ağacından kaldırır ve tüm içeriği ekran okuyucular için görünmez hale getirir. - aria-input-field-name: ARIA girdi rolleri (
textbox,searchbox,spinbutton,slider,combobox) olan öğelerin erişilebilir bir isme sahip olduğunu kontrol eder.role='textbox'ile oluşturulmuş ancak etiketi olmayan özel bir arama girişi işaretlenir. - aria-meter-name:
role='meter'olan öğelerin erişilebilir bir isme sahip olduğunu doğrular; böylece ekran okuyucu kullanıcıları, sayacın hangi niceliği ölçtüğünü (örneğin depolama kullanımı veya pil seviyesi) anlayabilir. - aria-progressbar-name:
role='progressbar'olan öğelerin erişilebilir bir isim taşımasını sağlar; böylece kullanıcılar yalnızca “progress bar” duymak yerine hangi sürecin veya işlemin devam ettiğini bilir. - aria-required-attr: Belirli bir ARIA rolünü kullanan öğelerin, ARIA spesifikasyonunun o rol için zorunlu kıldığı tüm öznitelikleri içerdiğini kontrol eder. Örneğin,
role='slider'içinaria-valuenow,aria-valueminvearia-valuemaxgereklidir; bunlardan herhangi birinin eksik olması işaretlenir. - aria-roles:
roleözniteliğine atanan tüm değerlerin geçerli, soyut olmayan ARIA rolleri olduğunu doğrular. Yazım hataları, uydurma roller veya doğrudan öğeler üzerinde kullanılan soyut roller (örneğinrole='widget') işaretlenir. - aria-tooltip-name:
role='tooltip'olan öğelerin erişilebilir bir isme sahip olduğunu kontrol eder. Boş bir araç ipucu (tooltip) öğesi, ekran okuyucu kullanıcıları için hiçbir değer sağlamaz ve bir etiketleme hatasını temsil eder. - button-name:
<button>öğelerinin verole='button'olan öğelerin boş olmayan bir erişilebilir isme sahip olduğunu doğrular. Bu,aria-labeliçermeyen simge butonları ve dekoratif tetikleyici olarak kullanılan boş butonları yakalar. - frame-title:
<iframe>ve<frame>öğelerinin, çerçevenin içeriğini tanımlayan boş olmayan birtitleözniteliğine sahip olmasını gerektirir. Bu olmadan, ekran okuyucu kullanıcıları gömülü içeriğin amacını belirleyemez ve çerçeveye girip girmemeleri gerektiğini bilemeyebilir. - input-button-name:
<input>öğelerininsubmit,reset,buttonveimagetürlerinde erişilebilir bir isme sahip olduğunu kontrol eder — bu,valueözniteliğiyle veya resim girdileri için biraltözniteliğiyle sağlanabilir.
Otomatik araçların birçok isim, rol ve değer hatasını yakalamasına rağmen, bazı ihlallerin manuel test gerektirdiğini unutmamak önemlidir. Otomatik tarayıcılar, erişilebilir bir ismin anlamlı olup olmadığını doğrulayamaz — “buraya tıklayın” etiketi taşıyan bir buton, teknik olarak isme sahip olduğu için otomatik kontrolden geçer, ancak gerçek amacını iletmekte başarısız olur. Benzer şekilde, durum değişikliklerinin (örneğin bir menü açıldığında aria-expanded’ın değişmesi) canlı etkileşim sırasında doğru şekilde duyurulup duyurulmadığı yalnızca ekran okuyucu ile birebir test edilerek doğrulanabilir.
Nasıl Test Edilir
- axe DevTools veya Lighthouse ile otomatik tarama: axe DevTools tarayıcı eklentisini (Chrome veya Firefox) kurun veya Chrome DevTools’taki Accessibility sekmesi altından bir Lighthouse denetimi çalıştırın. Tüm sayfa taramasını etkinleştirin ve sonuçları WCAG 4.1.2 etiketiyle filtreleyin. Özellikle
button-name,frame-title,aria-required-attr,aria-rolesvearia-input-field-nameihlallerine bakın. Her bulgu, sorunlu öğeyi, hatanın açıklamasını ve önerilen düzeltmeyi içerecektir. Sonuçları dışa aktarın ve önce Kritik (Critical) ve Ciddi (Serious) önem derecesine sahip maddelere öncelik verin. - Klavye ile gezinme testi: Farenizi çıkarın ve tüm sayfada Tab tuşunu kullanarak gezinin. Odaklanabilir her öğenin görünür odak aldığını, tarayıcının yerel odak göstergesinin (veya özel bir göstergenin) net şekilde göründüğünü ve tüm kontrolleri Enter veya Space ile etkinleştirebildiğinizi doğrulayın. Ekrana bakmadan, yalnızca bağlamdan hareketle ne olduğunu tanımlayamadığınız her öğe, muhtemel bir erişilebilir isim hatasına işaret eder.
- NVDA ve Firefox ile ekran okuyucu testi: NVDA’yı (Windows, ücretsiz) açın, Firefox’u başlatın ve etkileşimli öğeler arasında gezinmek için Tab tuşunu, tüm butonları, bağlantıları ve form alanlarını listelemek için NVDA Öğeler Listesi’ni (Insert+F7) kullanın. Her etkileşimli öğe için NVDA’nın ne duyurduğunu dinleyin. Öğenin ismini, rolünü ve ilgili durumları (örneğin “Abone ol, button” veya “E-posta adresi, zorunlu, edit text”) okuması gerekir. İsimsiz veya yanlış rolle duyurulan öğeleri işaretleyin.
- VoiceOver ve Safari ile ekran okuyucu testi (macOS/iOS): VoiceOver’ı etkinleştirin (macOS’ta Command+F5), Safari’yi açın ve öğeler arasında gezinmek için VO+Sağ Ok tuşlarını kullanın. Tüm form kontrollerini ve butonları listelemek için VoiceOver Rotor’u (VO+U) kullanın. İsimlerin açıklayıcı, rollerin uygun ve durumların etkileşim sırasında dinamik olarak güncellendiğini doğrulayın (örneğin, özel bir akordeonu açıp kapatmak VoiceOver’ın “expanded” veya “collapsed” duyurmasına neden olmalıdır).
- JAWS ve Chrome ile ekran okuyucu testi: JAWS’ı başlatın ve Chrome’u açın. Etkileşimli öğeler arasında gezinmek için Tab tuşunu, form alanlarını listelemek için JAWS Sanal İmlecini (Insert+F3) kullanın. Özellikle ARIA ile oluşturulmuş özel bileşenlere dikkat edin — klavye etkileşimiyle tetiklenen durum değişikliklerinin, JAWS’ın gerçek zamanlı duyurularına yansıtıldığını doğrulayın.
- Özel bileşen durum doğrulaması: Her özel bileşen (akordeon, sekme paneli, combobox, modal) için, yalnızca klavye kullanarak tam etkileşim sağlayın. Her adımda, ekran okuyucunun doğru durum güncellemesini duyurduğunu doğrulayın — örneğin, bir açılır/kapanır bileşeni açmak “expanded”, kapatmak ise “collapsed” duyurusunu tetiklemelidir. Görsel durum değişiyor ancak ekran okuyucu sessiz kalıyorsa,
aria-expandedya eksiktir ya da programatik olarak değiştirilmiyordur.
Nasıl Düzeltilir
Erişilebilir İsmi Olmayan Yalnızca Simge Buton — Hatalı
<!-- Icon button with no accessible name: screen readers announce only "button" -->
<button>
<svg aria-hidden='true' focusable='false'>
<use href='#icon-search'></use>
</svg>
</button>Erişilebilir İsmi Olmayan Yalnızca Simge Buton — Doğru
<!-- aria-label provides the accessible name when no visible text is present -->
<button aria-label='Search'>
<svg aria-hidden='true' focusable='false'>
<use href='#icon-search'></use>
</svg>
</button>Rol veya Durumu Olmayan Özel Geçiş Bileşeni — Hatalı
<!-- A div used as a toggle: no role, no state, not keyboard accessible -->
<div class='toggle' onclick='toggleDarkMode()'>
Dark Mode
</div>Rol veya Durumu Olmayan Özel Geçiş Bileşeni — Doğru
<!-- role='switch' communicates purpose; aria-checked reflects current state;
tabindex='0' makes it keyboard reachable; keydown handler enables Space/Enter -->
<div
role='switch'
aria-checked='false'
tabindex='0'
onclick='toggleDarkMode(this)'
onkeydown='if(event.key==="Enter"||event.key===" "){toggleDarkMode(this);event.preventDefault();}'
>
Dark Mode
</div>
<script>
function toggleDarkMode(el) {
const isOn = el.getAttribute('aria-checked') === 'true';
el.setAttribute('aria-checked', String(!isOn));
document.body.classList.toggle('dark-mode', !isOn);
}
</script>Etiketsiz iframe — Hatalı
<!-- iframe with no title: screen reader users cannot determine what is inside -->
<iframe src='https://maps.example.com/embed?q=istanbul'></iframe>Etiketsiz iframe — Doğru
<!-- title describes the frame's content so users can decide whether to enter it -->
<iframe
src='https://maps.example.com/embed?q=istanbul'
title='Interactive map showing our Istanbul office location'
></iframe>Gerekli ARIA Öznitelikleri Eksik Özel İlerleme Çubuğu — Hatalı
<!-- role='progressbar' without aria-valuenow, aria-valuemin, aria-valuemax:
screen readers cannot determine the current progress -->
<div role='progressbar' style='width:60%'></div>Gerekli ARIA Öznitelikleri Eksik Özel İlerleme Çubuğu — Doğru
<!-- All required attributes present; aria-label provides the accessible name -->
<div
role='progressbar'
aria-valuenow='60'
aria-valuemin='0'
aria-valuemax='100'
aria-label='File upload progress'
>
60%
</div>Yaygın Hatalar
<div>üzerinderole='button'kullanıptabindex='0'eklememek — öğe, ekran okuyucular tarafından buton olarak duyurulur ancak klavye Tab gezinmesiyle ulaşılamaz, bu da onu yalnızca klavye kullanan kullanıcılar için kullanılamaz hale getirir.- Etkileşimli olmayan bir öğeye
aria-labeluygulamak — rolü olmayan bir<div>veya<span>öğesinearia-labeleklemek hiçbir etki yaratmaz; etiket, çoğu tarayıcı tarafından yok sayılır çünkü öğenin, bu etiketin adlandıracağı bir rolü yoktur. - Açılır/kapanır bir bileşen uygulandıktan sonra
aria-expanded’ı statik bırakmak — HTML’dearia-expanded='false'ayarlayıp bunu JavaScript ile hiç değiştirmemek, ilk tıklamadan sonra özniteliğin her zaman yanlış olacağı anlamına gelir ve ekran okuyucu kullanıcılarına ters durumu duyurur. - Odaklanabilir öğeler içeren bir kapsayıcıda
aria-hidden='true'kullanmak — bu, kapsayıcıyı erişilebilirlik ağacından gizler ancak klavye odağından gizlemez; böylece ekran okuyucu kullanıcıları, duyamadıkları öğelere Tab ile girebilir ve bu da ciddi kafa karışıklığına neden olur. - Bir
<input>için tek etiket olarakplaceholderkullanmak — placeholder metni giriş yapıldığında kaybolur, tüm ekran okuyucular tarafından güvenilir şekilde etiket olarak duyurulmaz ve form alanları için erişilebilir isim gereksinimini karşılamaz. role='widget'veyarole='structure'gibi geçersiz veya soyut bir ARIA rolü kullanmak — bunlar ARIA spesifikasyonunda temel rollerdir ve doğrudan kullanım için tasarlanmamıştır; anlamlı anlamsal bilgi sağlamazlar ve yardımcı teknolojiler tarafından yok sayılabilir veya hatalara neden olabilirler.aria-labelledbyiçinde var olmayan bir öğe kimliğine (ID) referans vermek —aria-labelledbytarafından işaret edilen ID DOM’da yoksa, erişilebilir isim hesaplaması başarısız olur ve öğe isimsiz kalır.<input type='image'>içinaria-labelyerinevaluekullanmak — resim girdi butonları, erişilebilir isimleri için biraltözniteliği gerektirir;valueözniteliği, resim girdilerinde isim hesaplaması için yok sayılır.- Üçüncü taraf içerik yükleyen
<iframe>öğelerindetitleözniteliğini atlamak — geliştiriciler, iyi bilinen gömülü içeriklerin (haritalar, ödeme bileşenleri, video oynatıcılar) kendini açıklayıcı olduğunu varsayma eğilimindedir, ancak ekran okuyucu kullanıcılarına, çerçevenin amacının çerçeveye girip girmeye karar vermeden önce söylenmesi gerekir. - İçerik değiştiğinde erişilebilir isimleri dinamik olarak güncellemeyi unutmak — bir butonun etiketi görsel olarak “Oynat”tan “Duraklat”a değişiyor ancak
aria-label“Oynat” olarak kalıyorsa, ekran okuyucu kullanıcılarına mevcut durum ve eylem hakkında yanlış bilgi verilir.
Türkiye’nin Erişilebilirlik Mevzuatıyla İlişkisi
Türkiye’nin 21 Haziran 2025’te Resmî Gazete’de (Sayı: 32933) yayımlanan 2025/10 sayılı Cumhurbaşkanlığı Genelgesi, WCAG 2.2 ile uyumlu zorunlu dijital erişilebilirlik gereksinimlerini belirler. WCAG 4.1.2 — İsim, Rol, Değer, Seviye A ölçütüdür; yani uyumun en temel katmanında yer alır. Genelge kapsamında Seviye A uyumu isteğe bağlı değildir — kapsamdaki tüm kurumların ulaşması gereken asgari düzeydir.
Genelge, Türkiye’de faaliyet gösteren geniş bir kurum yelpazesine uygulanır. Kamu kurumları — bakanlıklar, belediyeler ve devlet kurumları dahil — genelgenin yayım tarihinden itibaren bir yıl içinde uyumu sağlamak zorundadır. Özel sektör kuruluşları — e-ticaret platformları, bankalar ve finans kuruluşları, hastaneler ve özel sağlık hizmeti sağlayıcıları, 200.000 veya daha fazla abonesi olan telekomünikasyon şirketleri, seyahat acenteleri, özel ulaşım şirketleri ve Millî Eğitim Bakanlığı (MoNE) tarafından yetkilendirilmiş özel okullar dahil — iki yıl içinde uyumu sağlamak zorundadır.
WCAG 4.1.2, Türk kuruluşları için özellikle önemlidir; çünkü modern Türk web sitelerinin büyük bir kısmı, çoğu zaman uygun ARIA rolleri, isimleri veya durum yönetimi olmadan uygulanmış özel etkileşimli bileşenlere — ürün karuselleri, akordeon SSS’ler, adım adım ödeme akışları ve bankacılık panoları gibi — dayanır. Erişilebilir ismi olmayan özel bir ödeme butonu veya aria-valuenow içermeyen bir kredi hesaplayıcı kaydırıcısı, yalnızca kötü bir kullanıcı deneyimi değildir: genelge kapsamında, aynı zamanda hukuki uyum ihlalidir.
Genelgeye tabi bankalar ve e-ticaret platformları için, işlem açısından kritik akışlardaki — ödeme formları, kimlik doğrulama modalları, hesap panoları — WCAG 4.1.2 ihlalleri özellikle yüksek risk taşır. Uygun ARIA işaretlemesi olmayan, görsel olarak tasarlanmış özel bir banka şubesi seçme combobox’ı, ekran okuyucu kullanan bir kullanıcının işlemi tamamen tamamlayamamasına neden olabilir ve kurumu hem düzenleyici yaptırımlara hem de ayrımcılık iddialarına maruz bırakabilir.
Accsible overlay SDK’sını kullanan kuruluşlar, birçok İsim, Rol, Değer ihlalinin otomatik tespiti ve çalışma zamanında giderilmesinden — eksik erişilebilir isimlerin eklenmesi, bilinen bileşen kalıplarındaki geçersiz ARIA rollerinin düzeltilmesi ve etkileşimli bileşenlerde durum özniteliklerinin senkronize edilmesi dahil — faydalanabilir. Ancak kuruluşlar, özellikle programatik durum yönetiminin en baştan uygulama mantığına gömülmesi gereken karmaşık özel bileşenler söz konusu olduğunda, otomatik overlay desteğini doğru anlamsal HTML geliştirmesinin yerine değil, tamamlayıcısı olarak görmelidir.