Bu kural ne anlama geliyor

WCAG 4.1.2 Ad, Rol, Değer, en geniş kapsamlı erişilebilirlik kriterlerinden biridir. Her etkileşimli kullanıcı arayüzü bileşeninin yardımcı teknolojiye üç şeyi açması gerekir: adı (ne olduğu), rolü (ne tür bir kontrol olduğu) ve mevcut değeri veya durumu (ne ayarlı olduğu veya genişlemiş, işaretli, seçili vb. olup olmadığı).

<button>, <input>, <select> ve <a> gibi yerel HTML öğeleri otomatik olarak rollerini açığa çıkarır ve adların etiketler, metin içeriği veya nitelikler aracılığıyla ayarlanmasına izin verir. Geliştiriciler <div> ve <span> gibi genel öğeler kullanarak özel pencere öğesi bileşenleri — açılır menüler, sekme panelleri, akordeonlar, tarih seçiciler, kaydırıcılar — oluşturduğunda bu kriter kritik hale gelir. Açık ARIA nitelikleri olmadan bu özel bileşenler ekran okuyucular için görünmez veya anlamsızdır.

"Değer" bileşeni ayrıca durum değişikliklerinin iletilmesini gerektirir. Bir kullanıcı bir akordeonu genişlettiğinde yardımcı teknolojiye bölümün artık açık olduğu bildirilmelidir. Bir onay kutusu değiştirildiğinde işaretli durumu yalnızca görsel olarak değil erişilebilirlik ağacında da güncellenmelidir.

Neden önemlidir

Ekran okuyucu kullanıcıları sayfayla görsel düzen üzerinden değil erişilebilirlik ağacı üzerinden etkileşir. <div> öğelerinden oluşturulmuş role="listbox" ve aria-expanded içermeyen özel bir açılır menü, ekran okuyucu tarafından genel bir grup veya düz metin olarak duyurulur. Kullanıcı bunun etkileşimli olduğunu, hangi seçenekleri içerdiğini veya hangi seçeneğin seçili olduğunu bilemez ve arayüzden fiilen dışlanır.

Bu kriter kritik etki olarak derecelendirilir çünkü başarısızlıklar doğrudan görev tamamlamayı engeller. Adı olmayan bir düğme tanımlanamaz. aria-checked olmayan özel bir onay kutusu durumunu iletemez. role="tablist" ve role="tab" olmayan bir sekme arayüzünde gezinilemez. Bunlar görsel sorunlar değil — yardımcı teknoloji kullanıcıları için tam engeller oluşturur.

JavaScript çerçevelerinin ve bileşen kütüphanelerinin yaygınlığı 4.1.2 başarısızlıklarını webdeki en yaygın erişilebilirlik sorunlarından biri haline getirmiştir. WebAIM Million yıllık çalışması eksik düğme adlarını, eksik form etiketlerini ve ARIA hatalarını sürekli olarak en yaygın beş hata arasında bulmaktadır.

İlgili axe-core kuralları

button-name — Düğmelerin ayırt edilebilir, erişilebilir metne sahip olmasını sağlar.
aria-label — aria-label değerlerinin boş olmadığını doğrular.
aria-labelledby — aria-labelledby referanslarının mevcut öğe kimliklerine işaret ettiğini sağlar.
aria-hidden-body — <body> öğesinde aria-hidden="true" bulunmadığını sağlar.
aria-hidden-focus — aria-hidden ile gizlenen öğelerin odaklanabilir alt öğeler içermediğini sağlar.
aria-valid-attr — ARIA nitelik adlarının geçerli ve doğru yazılmış olduğunu sağlar.
aria-valid-attr-value — ARIA nitelik değerlerinin türleri için geçerli olduğunu sağlar.
aria-allowed-attr — ARIA niteliklerinin öğenin rolü için uygun olduğunu sağlar.
aria-allowed-role — role niteliği değerinin yerleştirildiği öğe için geçerli olduğunu sağlar.
aria-roles — Tüm role niteliği değerlerinin geçerli ARIA rolleri olduğunu sağlar.

Nasıl test edilir

4.1.2 testi otomatik ve manuel tekniklerin bir kombinasyonunu gerektirir. Otomatik araçlar eksik adları, geçersiz ARIA niteliklerini ve yanlış rolleri yakalayabilir, ancak adın anlamlı olup olmadığını veya durum değişikliklerinin düzgün iletilip iletilmediğini değerlendiremez.

axe-core veya Lighthouse çalıştırın ve "ARIA" ile "Adlar ve Etiketler" kategorilerindeki tüm bulguları inceleyin.
Tarayıcının erişilebilirlik denetçisini açın (Chrome DevTools > Elements > Accessibility paneli) ve her etkileşimli öğenin doğru bir Ad, Rol ve Durum gösterdiğini doğrulayın.
Sayfada Tab tuşuyla gezinin ve bileşik pencere öğeleri içinde ok tuşlarını kullanın. Ekran okuyucunun rolü (düğme, sekme, liste öğe vb.), adı ve mevcut durumu (genişlemiş, seçili, işaretli) duyurduğundan emin olun.
Durumları değiştirin — akordeonları genişletin, kutuları işaretleyin, sekmeler seçin — ve ekran okuyucunun değişikliği duyurduğundan emin olun.
<div> veya <span> ile oluşturulmuş özel bileşenleri inceleyin. Uygun ARIA rolleri, adları ve durum niteliklerine sahip olduklarını doğrulayın.

Nasıl düzeltilir

Altın kural: mümkün olduğunda yerel HTML öğelerini kullanın. Özel bileşenler gerektiğinde eksiksiz ARIA semantiği sağlayın.

Adsız düğmeler — yanlış uygulama

<!-- Erişilebilir adı olmayan simge düğme -->
<button>
  <svg viewBox="0 0 24 24"><path d="M3 18h18v-2H3v2z"/></svg>
</button>

<!-- Yalnızca boşluk metni olan düğme -->
<button>   </button>

<!-- Rol veya ad olmadan düğme gibi davranan div -->
<div onclick="kaydet()">Kaydet</div>

Düğmeler — doğru uygulama

<!-- aria-label ile simge düğme -->
<button aria-label="Menüyü aç">
  <svg aria-hidden="true" viewBox="0 0 24 24">
    <path d="M3 18h18v-2H3v2z"/>
  </svg>
</button>

<!-- Görünen metne sahip düğme -->
<button type="button">Belgeyi Kaydet</button>

<!-- Div kullanmanız gerekiyorsa (önerilmez), rol ve tabindex ekleyin -->
<div role="button" tabindex="0" onclick="kaydet()" onkeydown="tuşİşle(event)">
  Kaydet
</div>

Özel onay kutusu — yanlış uygulama

<!-- Onay kutusu gibi stillenmiş ama AT için görünmez div -->
<div class="checkbox checked" onclick="değiştir()">
  <span class="checkmark">✓</span>
  Koşulları kabul ediyorum
</div>

Özel onay kutusu — doğru uygulama

<!-- Yerel onay kutusu (tercih edilen) -->
<label>
  <input type="checkbox" name="koşullar" checked>
  Koşulları kabul ediyorum
</label>

<!-- Tam ARIA ile özel onay kutusu -->
<div
  role="checkbox"
  aria-checked="true"
  aria-label="Koşulları kabul ediyorum"
  tabindex="0"
  onclick="değiştir()"
  onkeydown="tuşİşle(event)"
>
  <span class="checkmark" aria-hidden="true">✓</span>
  Koşulları kabul ediyorum
</div>

Sekme arayüzü — eksiksiz kalıp

<div role="tablist" aria-label="Proje ayarları">
  <button role="tab" id="tab-genel" aria-selected="true" aria-controls="panel-genel">
    Genel
  </button>
  <button role="tab" id="tab-uyeler" aria-selected="false" aria-controls="panel-uyeler" tabindex="-1">
    Üyeler
  </button>
</div>

<div role="tabpanel" id="panel-genel" aria-labelledby="tab-genel">
  <p>Genel ayarlar içeriği burada.</p>
</div>

<div role="tabpanel" id="panel-uyeler" aria-labelledby="tab-uyeler" hidden>
  <p>Üye ayarları içeriği burada.</p>
</div>

Durum yönetimi ile akordeon

<h3>
  <button aria-expanded="true" aria-controls="bolum1-içerik">
    Fatura Bilgileri
  </button>
</h3>
<div id="bolum1-içerik" role="region" aria-labelledby="bolum1-başlık">
  <p>Mevcut planınız Profesyonel'dir.</p>
</div>

<h3>
  <button aria-expanded="false" aria-controls="bolum2-içerik">
    Ödeme Geçmişi
  </button>
</h3>
<div id="bolum2-içerik" role="region" aria-labelledby="bolum2-başlık" hidden>
  <p>Ödeme kayıtları burada görünecektir.</p>
</div>

Geçersiz ARIA — yaygın hatalar

<!-- Yanlış: yanlış yazılmış ARIA niteliği -->
<button aria-labelled="Kaydet">Kaydet</button>

<!-- Yanlış: geçersiz rol değeri -->
<div role="buttn">Tıkla</div>

<!-- Yanlış: checkbox/switch rolü olmadan aria-checked -->
<div role="button" aria-checked="true">Değiştir</div>

<!-- Doğru: uygun nitelik ve rol kullanımı -->
<button aria-label="Belgeyi kaydet">Kaydet</button>
<div role="button" tabindex="0">Tıkla</div>
<div role="switch" aria-checked="true" tabindex="0">Değiştir</div>

Sık yapılan hatalar

Etkileşimli öğeler için <div> veya <span> kullanıp rol, tabindex ve klavye işleyicileri eklememek.
aria-label değerini boş dize olarak ayarlamak — bu öğeye fiilen boş bir ad verir.
Odaklanabilir alt öğeler içeren öğelere aria-hidden="true" eklemek — ekran okuyucular odak izlemesini kaybeder.
Geçersiz ARIA rol değerleri kullanmak (örneğin role="listitem" yerine role="list-item").
Görsel durum değiştiğinde aria-expanded, aria-checked veya aria-selected güncellemeyi unutmak.
Yerel semantikleri gereksiz yere geçersiz kılmak — bir <button> öğesine role="button" eklemek gereksizdir ancak role="link" eklemek yanıltıcıdır.
Bazı ekran okuyucularda göz ardı edilebilecek etkileşimli olmayan öğelerde aria-label kullanmak.
Belirli bir rol için izin verilmeyen ARIA nitelikleri yerleştirmek — örneğin role="link" üzerine aria-pressed eklemek.