Hareketli İçerik ve ADA

Yerinde durmayan içerik

Bir belediye ana sayfasında dönen banner, birkaç saniyede bir yenilenen ulaşım panosu ya da döngüdeki hava durumu animasyonu, yavaş okuyan, dikkat güçlüğü olan ya da ekran büyüteci kullanan kişiler için sayfayı okunmaz kılabilir. Hareket eden metni izlemek zordur, sürekli değişim de dikkati görevden uzaklaştırır.

2.2.2 başarı ölçütünün iki bölümü vardır.

• Hareketli, yanıp sönen ya da kayan içerik: kendiliğinden başlıyor, beş saniyeden uzun sürüyor ve başka içerikle birlikte gösteriliyorsa, onu duraklatmak, durdurmak ya da gizlemek için bir mekanizma olmalıdır.
• Kendiliğinden güncellenen içerik: kendiliğinden güncelleniyor ve başka içerikle birlikte gösteriliyorsa, kullanıcı güncellemeyi duraklatabilmeli, durdurabilmeli, gizleyebilmeli ya da ne sıklıkta olacağını denetleyebilmelidir. Burada beş saniyelik eşik yoktur.

Her iki bölümde de hareket ya da güncelleme etkinlik için zorunluysa istisna geçerlidir. Oynat düğmesine basmak gibi bilinçli bir kullanıcı eylemiyle başlayan içerik, kendiliğinden başlamış sayılmaz. Yanıp sönme ayrı bir konudur ve 2.3.1 kapsamındadır.

Kurumlar nerede takılır

• Hizmet duyurularının yer aldığı ana sayfa kayan bannerları.
• Betikle yenilenen ulaşım varış panoları ve hizmet uyarısı bantları.
• Acil durum sayfalarındaki hava radarı döngüleri ve animasyonlu GIF'ler.
• "Son haberler" kaydırıcıları ve canlı toplantı sayaçları.

Uyarılar burada en önemli olanlardır. Yol kapanma duyurusu taşıyan dönen bir banner, yavaş okuyan biri bitirmeden başka içeriğe geçer; bu yüzden duyuru sabit bir yerde de bulunmalıdır.

Canlı varış panoları: yenilemeyi denetleyin

On saniyede bir yeniden çizilen pano, kendiliğinden güncellenen içeriktir. Kullanıcıya bir duraklatma denetimi ve en güncel saatleri istediğinde elle yenileme verin.

setInterval(loadArrivals, 10000);

let timer = setInterval(loadArrivals, 10000);
pauseBtn.addEventListener("click", () => {
  const paused = pauseBtn.getAttribute("aria-pressed") === "true";
  pauseBtn.setAttribute("aria-pressed", String(!paused));
  if (paused) timer = setInterval(loadArrivals, 10000);
  else clearInterval(timer);
});
refreshBtn.addEventListener("click", loadArrivals);

Duraklatma düğmesinin kendisi klavyeyle erişilebilir olmalı ve pano güncellenirken yer değiştirmemeli ya da değişmemelidir.

Kullanıcıya saygılı kaydırıcılar

Zamanlayıcıyla ilerleyen bir kaydırıcının duraklatma denetimi olmalıdır. Ziyaretçi azaltılmış hareket istediyse duraklatılmış başlamak da iyi uygulamadır, ancak bu tercih denetimin yerini tutmaz.

setInterval(nextSlide, 4000);

const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
let playing = !reduce;
setInterval(() => { if (playing) nextSlide(); }, 4000);

playBtn.addEventListener("click", () => {
  playing = !playing;
  playBtn.textContent = playing ? "Slaytları duraklat" : "Slaytları oynat";
});
playBtn.textContent = playing ? "Slaytları duraklat" : "Slaytları oynat";

Kullanıcının başlattığı animasyon

Bilinçli bir eylemle başlatılan hareketli içerik ölçütün dışındadır. Bir radar döngüsü, düğmeli bir durağan görüntü olarak sunulabilir.

<img src="radar-loop.gif" alt="Radar döngüsü, son iki saat">

<figure>
  <img id="radar" src="radar-latest.jpg" alt="Radar, son görüntü">
  <button type="button" onclick="playRadarLoop()">
    İki saatlik döngüyü oynat
  </button>
</figure>

Uygulamalarda kendiliğinden ilerleyen ekranlar

Mobil uygulamalardaki tanıtım karuselleri ve dönen kampanyalar da sayılır. SwiftUI:

TabView(selection: $page) { /* tanıtım kartları */ }
    .onReceive(timer) { _ in page = (page + 1) % cards.count }

@Environment(\.accessibilityReduceMotion) var reduceMotion
@State private var autoPlay = true

TabView(selection: $page) { /* tanıtım kartları */ }
    .onReceive(timer) { _ in
        if autoPlay && !reduceMotion { page = (page + 1) % cards.count }
    }
Button(autoPlay ? "Duraklat" : "Oynat") { autoPlay.toggle() }

Jetpack Compose:

LaunchedEffect(Unit) {
    while (true) { delay(4000); pager.animateScrollToPage(next()) }
}

var autoPlay by remember { mutableStateOf(true) }
LaunchedEffect(autoPlay) {
    while (autoPlay) { delay(4000); pager.animateScrollToPage(next()) }
}
TextButton(onClick = { autoPlay = !autoPlay }) {
    Text(if (autoPlay) "Duraklat" else "Oynat")
}

Nasıl test edilir

1. Sayfayı yükleyin ve ona dokunmadan on saniye bekleyin. Hareket eden, kayan, yanıp sönen ya da yenilenen her şeyi listeleyin.
2. Her biri için duraklatma, durdurma ya da gizleme denetimini bulun. Ona klavyeyle ulaşın ve çalıştırın.
3. Denetimin yerinde kaldığını, metinle adlandırıldığını ve duraklatmanın başka içeriği engellemediğini ya da gizlemediğini kontrol edin.
4. Hareketin yalnızca bir öğe odaktayken durmasının tek seçenek olmadığını kontrol edin; çünkü bu bir mekanizma sayılmaz.

Otomatik araçlar karuselleri nadiren fark eder; bu yüzden bir insanın bakması gerekir.

Hatalar ve yayın öncesi liste

• Yalnızca fare üzerine gelince beliren duraklatma denetimi.
• Tüm bölge için tek denetim yerine her slayt için ayrı denetim.
• Görünür bir denetim olmadan yalnızca prefers-reduced-motion değerine güvenmek.
• Acil bir duyurunun tek kopyasını dönen bir bannerın içine koymak.

Kendiliğinden başlayan ve beş saniyeden uzun süren, ya da kendiliğinden güncellenen her şeyin klavyeyle işletilebilen bir duraklatma, durdurma ya da gizleme denetimi varsa ya da güncelleme sıklığı ayarlanabiliyorsa yayına alın.

DOJ'un web erişilebilirliği rehberi yaygın engeller sayfasında ele alınır.

Kaynaklar

• Understanding SC 2.2.2: Pause, Stop, Hide (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.