İsim, Rol, Değer

Kısaca

Ekran okuyucu bir bileşene geldiğinde dört şey söyler: ne olduğu (rol: düğme, onay kutusu, sekme), adı ("Kaydet"), durumu (işaretli, açık, seçili) ve varsa değeri (yüzde 40). Gören kullanıcı bunları görünüşten anlar; yardımcı teknoloji ise yalnızca kodda tanımlanmış olanı bilebilir.

Bu kriter, tüm arayüz bileşenlerinin adının, rolünün, durumunun ve değerinin programatik olarak belirlenebilmesini ve kullanıcı etkileşimiyle değiştiğinde bu değişikliğin yardımcı teknolojilere iletilmesini ister. Yerleşik HTML öğeleri ve platformun standart bileşenleri bunu kendiliğinden sağlar; sorunlar çoğunlukla özel tasarlanmış bileşenlerde ortaya çıkar.

Neleri kapsar?

• Ad (name): Bileşenin erişilebilir adı; görünür metin, label, aria-label veya aria-labelledby ile sağlanır.
• Rol (role): Bileşenin ne olduğu; düğme, bağlantı, onay kutusu, anahtar, sekme, kaydırıcı vb.
• Durum ve özellik (state, property): İşaretli, seçili, açık/kapalı, devre dışı, basılı gibi bilgiler.
• Değer (value): Kaydırıcı, ilerleme çubuğu veya sayı seçici gibi bileşenlerin mevcut değeri.
• Değişikliklerin bildirilmesi: Durum ve değer değiştiğinde kod içindeki bilginin de anında güncellenmesi.
• Kapsam dışı notlar: Görünür etiketle erişilebilir adın uyumu İsimlerin Kullanılan Etiketi İçermesi kriterinin, bileşenlerin klavyeyle çalıştırılabilmesi Klavye Erişimi kriterinin konusudur.

Kimleri etkiler?

Ekran okuyucu kullanan kör kullanıcılar, rolü bildirilmeyen bir öğenin tıklanabilir olduğunu bilemez; durumu bildirilmeyen bir anahtarın açık mı kapalı mı olduğunu anlayamaz. Ses komutu kullanan motor engelli kişiler bileşenleri adlarıyla çağırır; adı olmayan bir bileşen bu yolla kullanılamaz. Anahtar cihazları ve diğer yardımcı teknolojiler de hangi öğelerle etkileşime girilebileceğini rol bilgisinden öğrenir.

Kontrol listesinde

Bu kriter, Bakanlığın A Seviyesi Kontrol Listesi'nde 123–126 numaralı soruları kapsar. Yönlendirme soruları sayfada ilgili içerik olup olmadığını belirler; yoksa liste sizi sonraki soruya geçirir. Aşağıdaki açıklamalar sorulardan alıntı değil, özetidir. Soruların tam metni için resmî listeye bakın.

Resmî kontrol listesini indirin (PDF), yeni sekmede açılır

Web için kod örnekleri

1. Özel düğme yerine yerleşik düğme

Yerleşik button öğesi rolü, klavye desteğini ve odaklanabilirliği kendiliğinden sağlar. Özel bir öğe kullanmak zorundaysanız rol, odak ve klavye davranışını tek tek eklemeniz gerekir.

<div class="dugme" onclick="kaydet()">Kaydet</div>

<button type="button" onclick="kaydet()">Kaydet</button>

<!-- Yerleşik öğe kullanılamıyorsa: -->
<div role="button" tabindex="0" class="dugme"
     onclick="kaydet()"
     onkeydown="if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); kaydet(); }">
  Kaydet
</div>

2. Açılır-kapanır bölüm (akordeon)

Bölümü açan düğme, durumunu aria-expanded ile bildirmeli ve bu değer her tıklamada güncellenmelidir.

<h3 onclick="ac(this)">Gerekli belgeler ▼</h3>
<div class="gizli">…</div>

<h3>
  <button type="button" aria-expanded="false"
          aria-controls="belgeler-panel" id="belgeler-dugme">
    Gerekli belgeler
  </button>
</h3>
<div id="belgeler-panel" hidden>…</div>

<script>
  const dugme = document.getElementById("belgeler-dugme");
  const panel = document.getElementById("belgeler-panel");
  dugme.addEventListener("click", () => {
    const acik = dugme.getAttribute("aria-expanded") === "true";
    dugme.setAttribute("aria-expanded", String(!acik));
    panel.hidden = acik;
  });
</script>

3. Açma/kapama anahtarı

Görsel bir anahtar, role="switch" ve aria-checked ile tanımlanmalıdır. Durum yalnızca CSS sınıfıyla değiştirilirse ekran okuyucu değişikliği bilemez.

<span class="anahtar acik" onclick="this.classList.toggle('acik')"></span>
<span>SMS bildirimleri</span>

<button type="button" role="switch" aria-checked="true"
        id="sms-anahtar" class="anahtar">
  SMS bildirimleri
</button>

<script>
  const anahtar = document.getElementById("sms-anahtar");
  anahtar.addEventListener("click", () => {
    const acik = anahtar.getAttribute("aria-checked") === "true";
    anahtar.setAttribute("aria-checked", String(!acik));
  });
</script>

Yerleşik <input type="checkbox"> ve bir label ile görsel olarak anahtar biçiminde tasarlanmış bir onay kutusu da aynı sonucu ek kod gerektirmeden verir.

4. Sekmeler

Sekme bileşenlerinde her sekmenin rolü, seçili olup olmadığı ve hangi paneli denetlediği belirtilmelidir.

<div role="tablist" aria-label="Başvuru bilgileri">
  <button role="tab" id="sekme-kisisel" aria-selected="true"
          aria-controls="panel-kisisel">Kişisel bilgiler</button>
  <button role="tab" id="sekme-belge" aria-selected="false"
          aria-controls="panel-belge" tabindex="-1">Belgeler</button>
</div>
<div role="tabpanel" id="panel-kisisel" aria-labelledby="sekme-kisisel">…</div>
<div role="tabpanel" id="panel-belge" aria-labelledby="sekme-belge" hidden>…</div>

<script>
  const sekmeler = [...document.querySelectorAll('[role="tab"]')];
  function sec(secilen) {
    sekmeler.forEach((s) => {
      const aktif = s === secilen;
      s.setAttribute("aria-selected", String(aktif));
      s.tabIndex = aktif ? 0 : -1;
      document.getElementById(s.getAttribute("aria-controls")).hidden = !aktif;
    });
    secilen.focus();
  }
  sekmeler.forEach((s, i) => {
    s.addEventListener("click", () => sec(s));
    s.addEventListener("keydown", (e) => {
      if (e.key === "ArrowRight") sec(sekmeler[(i + 1) % sekmeler.length]);
      if (e.key === "ArrowLeft") sec(sekmeler[(i - 1 + sekmeler.length) % sekmeler.length]);
    });
  });
</script>

5. Özel kaydırıcı ve değeri

Mümkünse input type="range" kullanın. Özel bir kaydırıcı gerekiyorsa değer, sınırlar ve okunabilir metin ARIA ile verilmeli ve her değişiklikte güncellenmelidir.

<span id="yazi-boyutu-etiket">Yazı boyutu</span>
<div role="slider" tabindex="0" id="yazi-boyutu"
     aria-labelledby="yazi-boyutu-etiket"
     aria-valuemin="80" aria-valuemax="200" aria-valuenow="100"
     aria-valuetext="Yüzde 100"></div>

<script>
  const kaydirici = document.getElementById("yazi-boyutu");
  kaydirici.addEventListener("keydown", (e) => {
    let deger = Number(kaydirici.getAttribute("aria-valuenow"));
    if (e.key === "ArrowRight" || e.key === "ArrowUp") deger = Math.min(200, deger + 10);
    else if (e.key === "ArrowLeft" || e.key === "ArrowDown") deger = Math.max(80, deger - 10);
    else return;
    e.preventDefault();
    kaydirici.setAttribute("aria-valuenow", String(deger));
    kaydirici.setAttribute("aria-valuetext", `Yüzde ${deger}`);
    yaziBoyutunuUygula(deger); // Kendi fonksiyonunuz
  });
</script>

6. Devre dışı ve basılı durumları

Görsel olarak soluk gösterilen bir düğme kodda da devre dışı olmalı; bir filtre düğmesinin seçili hâli de kodda belirtilmelidir.

<button class="soluk">Gönder</button>
<button class="secili">Yalnızca açık başvurular</button>

<button disabled>Gönder</button>
<button aria-pressed="true">Yalnızca açık başvurular</button>

Mobil için kod örnekleri

Standart platform bileşenleri (Button, Toggle, Slider, Switch, Checkbox) ad, rol, durum ve değeri kendiliğinden iletir. Özel çizilmiş bileşenlerde bu bilgiler elle eklenmelidir.

iOS (SwiftUI)

import SwiftUI

// Kendi bileşeniniz: özel çizilmiş bir anahtar
struct OzelAnahtar: View {
    let baslik: String
    @Binding var acik: Bool

    var body: some View {
        HStack {
            Text(baslik)
            Spacer()
            Capsule()
                .fill(acik ? Color.green : Color.gray)
                .frame(width: 50, height: 30)
                .overlay(alignment: acik ? .trailing : .leading) {
                    Circle().fill(.white).padding(3)
                }
        }
        .contentShape(Rectangle())
        .onTapGesture { acik.toggle() }
        // Ad, rol, değer ve eylem tek bir erişilebilir öğede toplanır
        .accessibilityElement(children: .ignore)
        .accessibilityLabel(baslik)
        .accessibilityValue(acik ? "Açık" : "Kapalı")
        .accessibilityAddTraits(.isButton)
        .accessibilityAction { acik.toggle() }
    }
}

// Mümkünse standart bileşen tercih edilir:
// Toggle("SMS bildirimleri", isOn: $smsAcik)

iOS 17 ve sonrasında .accessibilityAddTraits(.isToggle) özelliği, VoiceOver'ın bileşeni anahtar olarak duyurmasını sağlar.

Android (Jetpack Compose)

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.toggleable
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.semantics.stateDescription
import androidx.compose.ui.unit.dp

// Kendi bileşeniniz: özel çizilmiş bir anahtar
@Composable
fun OzelAnahtar(baslik: String, acik: Boolean, degisti: (Boolean) -> Unit) {
    Row(
        modifier = Modifier
            .fillMaxWidth()
            // Rol ve durum: TalkBack "Anahtar, açık" olarak duyurur
            .toggleable(value = acik, role = Role.Switch, onValueChange = degisti)
            .semantics { stateDescription = if (acik) "Açık" else "Kapalı" }
            .padding(12.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(baslik, Modifier.weight(1f))
        Box(
            Modifier
                .size(width = 50.dp, height = 30.dp)
                .clip(CircleShape)
                .background(if (acik) Color(0xFF2E7D32) else Color.Gray)
        )
    }
}

// Mümkünse standart bileşen tercih edilir:
// Switch(checked = smsAcik, onCheckedChange = { smsAcik = it })

Nasıl test edilir?

• Erişilebilirlik ağacını inceleyin: Tarayıcı geliştirici araçlarının erişilebilirlik panelinde her etkileşimli bileşenin adını, rolünü ve durumunu kontrol edin.
• Ekran okuyucuyla dinleyin: Her bileşene geldiğinizde rol, ad ve durum doğru okunuyor mu? Örneğin "Gerekli belgeler, düğme, daraltılmış".
• Durumları değiştirin: Anahtarları açıp kapatın, akordeonları genişletin, sekmeleri değiştirin, kaydırıcıları hareket ettirin. Yeni durum anında duyuruluyor mu?
• Mobilde tarayın: iOS'ta Xcode Accessibility Inspector, Android'de Accessibility Scanner ile özel bileşenlerin özelliklerini kontrol edin; ardından VoiceOver ve TalkBack ile doğrulayın.
• Otomatik araçların sınırı: Otomatik araçlar bu kriterin önemli bir kısmını yakalar: adsız düğme ve bağlantılar, geçersiz ARIA rolleri, eksik zorunlu ARIA öznitelikleri (örneğin role="slider" için aria-valuenow). Ancak div ile yapılmış ve hiç rol taşımayan tıklanabilir öğeleri her zaman fark edemez ve durumun etkileşimden sonra doğru güncellenip güncellenmediğini test edemez. Bu nedenle ekran okuyucuyla elle test şarttır.

Sık yapılan hatalar

• Tıklanabilir div ve span: Rolü, adı ve klavye desteği olmayan özel düğmeler.
• Durumu yalnızca CSS sınıfıyla değiştirmek: Görsel değişiklik ARIA özniteliklerine yansıtılmadığında ekran okuyucu eski durumu okur.
• Yanlış rol kullanmak: Sayfa değiştiren bir öğeye role="button", işlem yapan bir öğeye bağlantı rolü vermek.
• Eksik ARIA öznitelikleri: role="tab" kullanıp aria-selected eklememek veya role="slider" kullanıp değeri belirtmemek.
• Gereksiz ARIA: Yerleşik öğe yeterliyken rol eklemek veya yerleşik anlamı bozan rol tanımlamak (örneğin <button role="link">).
• Bileşen kütüphanelerine körü körüne güvenmek: Hazır bileşenlerin ad, rol ve durum bilgilerini doğru verdiği varsayılmadan test edilmelidir.

Kaynaklar

• Understanding SC 4.1.2: Name, Role, Value (W3C), İngilizce, yeni sekmede açılır
• Erişilebilirlik blogu — Uygulamadan örnekler ve güncel yazılar.
• Erişilebilirlik kütüphanesi — Erişilebilir ad, ARIA rolleri, durum bilgisi ve diğer terimler.

Kontrol listesi sürümü: V2.2.30.01 (2026). Bu sayfa bilgilendirme amaçlıdır; bağlayıcı metin için Aile ve Sosyal Hizmetler Bakanlığı'nın resmî kontrol listesini esas alın.