Ad, Rol, Değer

Kısaca

Ekran okuyucu kullanıcıya bir kontrolün adını, ne olduğunu ve hangi durumda olduğunu söyler: "Abone ol, düğme", "Karanlık mod, anahtar, açık". Bir kontrol tıklama işleyicili bir div'den yapılmışsa, ekran okuyucu yararlı hiçbir şey duyurmaz; konuşma ve anahtar kullanıcıları da onu hedefleyemez.

Bu kriter, tüm kullanıcı arayüzü bileşenleri için adın ve rolün programatik olarak belirlenebilmesini, kullanıcının ayarlayabildiği durumların, özelliklerin ve değerlerin programatik olarak ayarlanabilmesini ve bu öğelerdeki değişikliklerin bildiriminin yardımcı teknolojiler dahil kullanıcı aracılarına sunulmasını ister.

Neleri kapsar?

• Ad: Her kullanıcı arayüzü bileşeninin programatik olarak belirlenebilen bir adı vardır. Görünür ya da gizli olabilir.
• Rol: Rol bileşenin ne olduğunu söyler: düğme, bağlantı, onay kutusu, sekme.
• Durumlar, özellikler ve değerler: Kullanıcının ayarlayabildiği şey programatik olarak ayarlanabilir ve değişiklikler bildirilir. Durum dinamik bir özelliktir; örneğin işaretli, genişletilmiş ya da seçili. Odak özellikle önemli bir durumdur.
• Önce yerel öğeler: Spesifikasyona uygun kullanılan standart HTML kontrolleri kriteri zaten karşılar (H91, H88).
• Özel bileşenler: Kriter öncelikle kendi bileşenlerini oluşturan ya da betikleyen yazarlar içindir. ARIA rolleri, durumları ve özellikleri gibi ek önlemlere ihtiyaçları vardır (ARIA4, ARIA5).
• ARIA ile adlar: Görünür etiket kullanılamadığında aria-label adı sağlayabilir (ARIA14). aria-labelledby yakındaki metne işaret edebilir (ARIA16).
• Kullanıcı aracıları ve yardımcı teknoloji: Kullanıcı aracı, web içeriğini alıp sunan her yazılımdır. Yardımcı teknoloji bir kullanıcı aracı olarak ya da onun yanında çalışır.
• Kapsam dışı: Adın görünür etiketle eşleşip eşleşmediği 2.5.3'tür. Etiketin anlamlı olup olmadığı 2.4.6'dır. Durum mesajları 4.1.3'tür.

Kimleri etkiler?

Kontrolleri anlamak ve kullanmak için ad, rol ve durumlara güvenen ekran okuyucu kullanıcıları. Konuşacak bir ada ihtiyaç duyan konuşma tanıma kullanıcıları. Yazılımı kontrolleri ada göre listeleyip etkinleştiren anahtar ve klavye kullanıcıları. Odak takibiyle ekran büyüteci kullananlar. Arayüzü uyarlayan yazılım kullanan herkes.

EAA ve EN 301 549'da

Avrupa Erişilebilirlik Yasası (Direktif (AB) 2019/882) 28 Haziran 2025'ten sonra piyasaya sunulan kapsamdaki ürün ve hizmetler için geçerlidir. Yasanın 47. gerekçesi web siteleri ve mobil uygulamalar için dört ilkeyi sayar: algılanabilirlik, işletilebilirlik, anlaşılabilirlik ve sağlamlık. Ad, rol ve değeri açığa çıkaran bileşenler, "sağlamlık" ilkesinin parçasıdır.

Teknik karşılığı EN 301 549 standardında bulunur. Standart, WCAG 4.1.2'i atıfla alır ve ortama göre ayrı maddelere dönüştürür.

Kriterin web dışı dokümanlara uygulanıp uygulanmadığı ve nasıl uygulandığı standardın 10. maddesinde belirtilir. Madde numaraları EN 301 549'un "9. + WCAG numarası" düzenine göredir. V3.2.1'de yazılım maddesi, açık ve kapalı işlevsellik için ayrı alt maddelere bölünmüştür. Kaynak gösterirken tam numaraları standarttan kontrol edin.

Standart sürümü: EN 301 549 V4.1.1 (Eylül 2026), WCAG 2.2'yi esas alan ve EAA için hazırlanan ilk sürümdür. Henüz AB Resmî Gazetesi'nde atıf almamıştır; bu nedenle EAA gereksinimlerini karşılamanın gönüllü teknik yolu olarak görülmelidir. Atıf yapıldığında EAA ile ilgili uygunluk karinesi sağlayacaktır. 4.1.2 kriterinin metni WCAG 2.1 ve 2.2'de aynıdır.

EAA bağlamında dikkat: Yasanın Madde 2/4 hükmü bazı içerikleri gereksinimlerin dışında bırakır; örneğin 28 Haziran 2025'ten önce yayımlanmış ofis dosya biçimleri ve bu tarihten sonra güncellenmeyen arşivler. Bu tarihten sonra yayımladığınız ya da değiştirdiğiniz içerik bu istisnaların kapsamında değildir.

Directive (EU) 2019/882, EUR-Lex, İngilizce, yeni sekmede açılır

Web için kod örnekleri

1. Düğme olarak div

Tıklama işleyicili bir div'in rolü, adı ve klavye desteği yoktur (F59). button kullanın.

<div class="btn" onclick="subscribe()">Abone ol</div>

<button type="button" onclick="subscribe()">Abone ol</button>

2. Adı olmayan simge düğmesi

Programatik olarak belirlenen adı olmayan bir kontrol başarısız olur (F68). Ona bir ad verin (ARIA14).

<button><svg>…</svg></button>

<button type="button" aria-label="Kapat"><svg aria-hidden="true">…</svg></button>

3. Yalnızca görselden oluşan bağlantı

Tek içeriği bir görsel olan bağlantı, adını görselin metin alternatifinden almalıdır (F89).

<a href="/"><img src="logo.svg" alt=""></a>

<a href="/"><img src="logo.svg" alt="Corpowid ana sayfa"></a>

4. Durumlu özel onay kutusu

Yerel girdi kullanamıyorsanız, rolü ve durumu açığa çıkarın, değiştiğinde durumu güncelleyin ve klavyeyi destekleyin (ARIA4, ARIA5).

<div class="check" onclick="this.classList.toggle('on')">Beni hatırla</div>

<div role="checkbox" tabindex="0" aria-checked="false" id="remember">Beni hatırla</div>
<script>
remember.addEventListener("click", toggle);
remember.addEventListener("keydown", e => { if (e.key === " ") { e.preventDefault(); toggle(); } });
function toggle() {
  const on = remember.getAttribute("aria-checked") === "true";
  remember.setAttribute("aria-checked", String(!on));
}
</script>

5. Durumunu açığa çıkaran açılır bölüm

Yardımcı teknolojiye panelin açık olup olmadığını söyleyin.

<div class="head" onclick="toggle()">Ayrıntılar</div>

<button type="button" aria-expanded="false" aria-controls="panel">Ayrıntılar</button>
<div id="panel" hidden>…</div>

6. Sahte bağlantı

Bir span'i bağlantı gibi davranan betik, bağlantı rolünü ve klavye erişimini kaybeder (F42). Gerçek bir bağlantı kullanın.

<span class="link" onclick="location.href='/fiyatlar'">Fiyatlar</span>

<a href="/fiyatlar">Fiyatlar</a>

Mobil için kod örnekleri

Yerel bileşenler ad, rol ve durumu otomatik olarak açığa çıkarır. Özel bir kontrol oluşturduğunuzda rolünü, adını ve durumunu kendiniz ayarlayın.

iOS (SwiftUI)

import SwiftUI

struct DarkModeSwitch: View {
    @Binding var isOn: Bool

    var body: some View {
        // Bir Image'den oluşturulan özel kontrol. Ona ad, rol ve değer verin
        Image(systemName: isOn ? "moon.fill" : "moon")
            .onTapGesture { isOn.toggle() }
            .accessibilityLabel("Karanlık mod")
            .accessibilityAddTraits(.isButton)
            .accessibilityValue(isOn ? "Açık" : "Kapalı")
        // Daha iyisi Toggle("Karanlık mod", isOn: $isOn) kullanmaktır
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.Role

@Composable
fun DarkModeRow(checked: Boolean, onChange: (Boolean) -> Unit) {
    // toggleable; rolü, durumu ve tıklama eylemini açığa çıkarır
    Row(
        modifier = Modifier.toggleable(
            value = checked,
            role = Role.Switch,
            onValueChange = onChange
        )
    ) {
        Text("Karanlık mod")
        // Görsel anahtar burada çizilir
    }
}

Nasıl test edilir?

• Erişilebilirlik ağacını inceleyin: Tarayıcı geliştirici araçlarında her kontrolün adını, rolünü ve durumunu kontrol edin.
• Ekran okuyucu kullanın: Kontroller arasında gezin. Her biri bir ad, bir rol ve durumunu duyuruyor mu?
• Özel kontrolleri kontrol edin: Her birinin rolü, adı ve kullanıcı işlem yaptığında değişen durum öznitelikleri var mı?
• Odağı kontrol edin: Odak durumu açığa çıkarılıyor mu ve odak değişikliği duyuruluyor mu?
• Simge düğmelerini ve görsel bağlantıları kontrol edin: Her birinin adı var mı? (F68, F89)
• Yerel alternatifleri kontrol edin: Özel bir öğe yerine yerel bir öğe kullanılabilir mi?
• Denetleyiciyi başlangıç olarak kullanın: axe gibi araçlar eksik adları ve geçersiz ARIA'yı yakalar. Özel bir bileşenin doğru davranıp davranmadığını değerlendiremez; bunu bir kişi yardımcı teknolojiyle test etmelidir.

Sık yapılan hatalar

• div ve span kontroller: Rol ve klavye desteği yok (F59, F42).
• Adı olmayan kontroller: Simge düğmeleri ve görsel bağlantılar (F68, F89).
• Güncellenmeyen durum: Hiç değişmeyen aria-expanded ya da aria-checked.
• Yanlış ya da uydurma roller: Davranışla eşleşmeyen rol.
• Adsız çok parçalı alanlar: Her parçası için adı olmayan, üç kutuda telefon numarası (F86).
• Erişilebilir adı olmayan görünür metin: Etiket gösteren ama hiçbirini açığa çıkarmayan kontrol (F111).
• Yerel HTML yerine ARIA: Yerel öğe varken öğelere rol eklemek.
• Metin alternatiflerini güncellememek: Metin dışı içerik değiştiğinde (F20).

Kaynaklar

• Understanding SC 4.1.2: Name, Role, Value (W3C), İngilizce, yeni sekmede açılır
• H91: Using HTML form controls and links (W3C), İngilizce, yeni sekmede açılır
• ARIA14: Using aria-label to provide an accessible name where a visible label cannot be used (W3C), İngilizce, yeni sekmede açılır
• ARIA16: Using aria-labelledby to provide a name for user interface controls (W3C), İngilizce, yeni sekmede açılır
• ARIA4: Using a WAI-ARIA role to expose the role of a user interface component (W3C), İngilizce, yeni sekmede açılır
• ARIA5: Using WAI-ARIA state and property attributes to expose the state of a user interface component (W3C), İngilizce, yeni sekmede açılır
• F59: Failure of Success Criterion 4.1.2 due to using script to make div or span a user interface control in HTML without providing a role for the control (W3C), İngilizce, yeni sekmede açılır
• F68: Failure of Success Criterion 4.1.2 due to a user interface control not having a programmatically determined name (W3C), İngilizce, yeni sekmede açılır
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), İngilizce, yeni sekmede açılır
• EN 301 549 V4.1.1 (ETSI), İngilizce, yeni sekmede açılır
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), İngilizce, yeni sekmede açılır

Standart sürümü: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz; bağlayıcı metin için Avrupa Erişilebilirlik Yasası'nın (Direktif (AB) 2019/882) ve EN 301 549 standardının resmî metinlerini esas alın.