Özel kontroller ve ADA: ad, rol, değer

Yardımcı teknolojinin bilmesi gerekenler

Form öğeleri, bağlantılar ve betiklerle oluşturulan bileşenler dahil her kullanıcı arayüzü bileşeni için ad ve rol programatik olarak belirlenebilmelidir. Kullanıcının ayarlayabildiği durumlar, özellikler ve değerler programatik olarak ayarlanabilmelidir. Bu öğelerdeki değişiklikler de yardımcı teknolojiler dahil kullanıcı aracılarına sunulmalıdır.

Gündelik dille, bir ekran okuyucu ya da ses denetimi aracı "Randevu al, düğme" ya da "İlçe, açılır kutu, Alameda, kapalı" diyebilmeli, denetimi çalıştırabilmeli ve neyin değiştiğini duyabilmelidir. Bir denetim yalnızca tıklama işleyicisi olan biçimlendirilmiş bir kutuysa bunların hiçbiri yoktur.

Belirtimin amaçladığı gibi kullanılan yerel HTML denetimleri bunu ücretsiz yapar. İş, bir denetim genel öğelerden kurulduğunda ya da betik bir denetimin anlamını ya da durumunu değiştirdiğinde başlar.

Kamu sitelerinde özel bileşenler

Tarih seçiciler, randevu ızgaraları, adres otomatik tamamlamaları ve sohbet başlatıcıları çoğu zaman bir belediye ya da ilçe sayfasına bırakılan tedarikçi bileşenleridir. Görsel olarak denetim gibi görünürler. Erişilebilirlik ağacında ise adsız metin gruplarıdır. Ekran okuyucuya ya da sesli komutlara güvenen vatandaş, sayfa eksiksiz görünse de randevuyu alamaz.

Tedarikçi bileşenleri yaygın bir boşluktur. Satın alma sırasında yalnızca ekran görüntüsünü değil, bileşenin erişilebilirlik ağacını da isteyin.

Özel bir ilçe seçici

Bir select'i taklit eden div'ler kümesinin rolü, değeri ve klavye davranışı yoktur. Yerel öğede üçü de vardır.

<div class="secici" onclick="listeyiAc()">
  <span id="ilce-deger">İlçe seçin</span>
  <div class="secenekler">…</div>
</div>

<label for="ilce">İlçe</label>
<select id="ilce" name="ilce">
  <option value="">İlçe seçin</option>
  <option>Çankaya</option>
  <option>Yenimahalle</option>
</select>

Durumunu duyuran sekmeler

Yerel bir öğe olmadığında ARIA rol ve durumu sağlar, betik de durumu güncel tutar. Burada bir klinik hizmetleri sayfası panelleri değiştiriyor.

<div class="sekme aktif" onclick="goster('saatler')">Saatler</div>
<div class="sekme" onclick="goster('ucretler')">Ücretler</div>

<div role="tablist" aria-label="Klinik bilgileri">
  <button role="tab" id="t-saatler" aria-selected="true"
          aria-controls="p-saatler">Saatler</button>
  <button role="tab" id="t-ucretler" aria-selected="false"
          aria-controls="p-ucretler" tabindex="-1">Ücretler</button>
</div>
<!-- ok tuşları sekmeler arasında gezdirir; betik gösterilmedi -->
<div role="tabpanel" id="p-saatler" aria-labelledby="t-saatler">…</div>
<div role="tabpanel" id="p-ucretler" aria-labelledby="t-ucretler" hidden>…</div>

Sabit adlı açma-kapama düğmeleri

Duruşma kaydı oynatıcısındaki, simgesini ve etiketini değiştiren bir sessize alma düğmesi, ekran okuyucu kullanıcısını hangi durumda olduğunu tahmin etmeye bırakır. Tek bir ad tutun ve durumu açığa çıkarın.

<button class="sessiz"><img src="sessiz.svg" alt="Sesi aç"></button>
<!-- betik tıklamada görseli ve alt metni değiştirir -->

<button type="button" class="sessiz" aria-pressed="false">
  <img src="hoparlor.svg" alt="" />
  Sessize al
</button>
<script>
  dugme.addEventListener("click", () => {
    const acik = dugme.getAttribute("aria-pressed") === "true";
    dugme.setAttribute("aria-pressed", String(!acik));
    ses.muted = !acik;
  });
</script>

Arama yarıçapı gibi bir şey için yerel bir aralık girişi başka bir örnektir: <input type="range"> rolünü, değerini ve değişikliklerini zaten açığa çıkarır; sürüklenebilir bir div hiçbirini çıkarmaz.

Yerel uygulamalarda simge denetimleri

Yerel araç setleri düğmelere rollerini otomatik verir, ama yalnızca bir düğme kullanırsanız. Hareket tanıyıcısı ya da düz bir tıklama değiştiricisi olan dokunulabilir bir simgenin ne rolü ne de adı vardır.

// SwiftUI
Image(systemName: "printer")
    .onTapGesture { makbuzYazdir() }

// SwiftUI
Button(action: makbuzYazdir) {
    Label("Makbuzu yazdır", systemImage: "printer")
}
.labelStyle(.iconOnly)

// Jetpack Compose
Icon(Icons.Default.Print, contentDescription = null,
     modifier = Modifier.clickable { makbuzYazdir() })

// Jetpack Compose
IconButton(onClick = { makbuzYazdir() }) {
    Icon(Icons.Default.Print, contentDescription = "Makbuzu yazdır")
}

Nasıl test edilir

1. Sayfada yalnızca klavyeyle Tab ile gezin. Her denetim odak almalı, Enter ya da Boşluk onu çalıştırmalıdır.
2. Bir ekran okuyucu açın ve denetimler arasında gezinin. Her biri anlamlı bir ad, bir rol ve ilgiliyse bir durum ya da değerle duyurulmalıdır.
3. Her denetimi çalıştırın ve değişikliği dinleyin: genişletildi, seçildi, işaretlendi, değer değişti.
4. Tarayıcının erişilebilirlik ağacı denetçisini açın ve ad, rol ve durumu ekranda gördüğünüzle karşılaştırın.
5. Eksik adları ve yanlış kullanılan ARIA'yı bulmak için otomatik bir denetleyici kullanın, sonra elle doğrulayın.

Sık yapılan hatalar ve yayın öncesi liste

• Klavye işleyicileri ya da odaklanabilirlik olmadan bir div'e role="button" vermek.
• Hiçbir şeyin aria-labelledby ile başvurmadığı, display: none ile gizlenmiş etiket metni.
• aria-expanded'ı bir kez ayarlayıp bir daha güncellememek.
• Durumu bir durum özniteliği yerine, "Menü açık" gibi adın içine koymak.
• Görünür etiketten farklı bir erişilebilir ad; ilgili kural için adda etiket ölçütüne (2.5.3) bakın.

Yayına almadan önce:

• Her denetim yerel bir öğe ya da rol, ad, durum ve klavye desteği olan bir öğe.
• Durum değişiklikleri oluştukları anda özniteliklere yansıyor.
• Tedarikçi bileşenleri erişilebilirlik ağacına karşı kontrol edildi.
• Yerel ekranlar dokunulabilir görseller değil gerçek düğmeler ve anahtarlar kullanıyor.

Title II kapsamında mobil kapsam mobil uygulamalar sayfasında ele alınır.

Kaynaklar

• Understanding SC 4.1.2: Name, Role, Value (W3C), İngilizce, yeni sekmede açılır
• 28 CFR Part 35, Subpart H: Accessibility of Web Information and Services (eCFR), İngilizce, yeni sekmede açılır

Standart sürümü: WCAG 2.1 (W3C Tavsiye Kararı, 5 Haziran 2018); Title II web kuralında adı geçen sürüm. Bu sayfa bilgilendirme amaçlıdır ve hukuki tavsiye niteliği taşımaz. Bağlayıcı metin için ADA yasasının ve yönetmeliklerinin resmî metinlerini esas alın ve size nasıl uygulandığını bir avukata sorun.