Bu kural ne anlama geliyor

WCAG 2.2.1, içerik bir zaman sınırı uyguladığında, kullanıcılara bunu kapatma, ayarlama veya uzatma olanagi verilmesini gerektirir. Her zaman sınırı için şu koşullardan en az biri doğru olmalıdır: kullanıcı karsilasmadan önce kapatabilmeli, varsayilanin en az 10 katina ayarlayabilmeli veya süre dolmadan önce uyarilmali ve basit bir eylemle (bir tusa basmak gibi) en az 20 saniye uzatma firsati verilmeli ve en az 10 kez uzatabilmelidir.

Sınırlı istisnalar vardır: zaman sınırının temel olduğu gerçek zamanlı olaylar (muzayede gibi), zaman sınırının 20 saatten uzun olduğu durumlar ve faaliyeti geçersiz kilmadan değiştirilemeyen temel zaman sınırları. Güvenlik amaali oturum zaman asimlari yine de bir uyarı ve uzatma mekanizması sağlamalıdır.

Neden önemlidir

Engelli kullanıcılar genellikle gorevleri tamamlamak için önemli ölçüde daha fazla zamana ihtiyaç duyar. Ekran okuyucu ile karmaşık bir formda gezinen görme engelli bir kullanıcı, gorebilen bir kullanicidan 5-10 kat daha uzun surede tamamlayabilir. Bilişsel engelli kullanıcılar içeriği okumak ve anlamak için daha fazla zamana ihtiyaç duyabilir. Motor engelli kullanıcılar, varsayılan zaman asimi değerlerinin beklediginden çok daha yavaş yazabilir veya gezinebilir.

Sessizce sona eren oturum zaman asimlari, kullanıcıların tüm çalışmasını kaybetmelerine neden olabilir — yardımcı teknoloji kullanarak 30 dakika boyunca dikkatlice bir formu dolduran biri için özellikle yikici bir deneyim. Ayarlanabilir zamanlama, hiçbir kullanıcının daha fazla zamana ihtiyaç duydugu için haksiz yere cezalandirilmamasini sağlar.

İlgili axe-core kuralları

Bu kriter için otomatik axe-core kuralı bulunmamaktadır. Zaman sınırları sunucu tarafı mantigi ve istemci tarafı JavaScript ile uygulanır, bu da otomatik DOM analizi ile tespit edilmesini zorlaştırır. Kasitli olarak yavaş etkilesimle manuel test gereklidir.

Nasıl test edilir

Test, tüm zaman sınırlı islevselliklerin belirlenmesini ve kullanıcıların zamanlamayi kontrol edebildiginin dogrulanmasini gerektirir.

Uygulamadaki tüm zaman sinirlarini belirleyin: oturum zaman asimlari, form gönderme son tarihleri, otomatik ilerleyen slaytlar, geçiçi bildirimler.
Her zaman sınırı için kullanıcının kapatabilecegini, ayarlayabilecegini veya uzatabilecegini doğrulayın.
Uzatma mekanizmaysa: süre dolmadan en az 20 saniye önce bir uyarı gorunduguncu doğrulayın.
Uzatma eyleminin basit (herhangi bir tusa basma, düğmeye tıklama) ve en az 10 kez gerçekleştirilebileceğini doğrulayın.
Oturum zaman asimi davranisini test edin: uygulama sona ermeden önce uyarı veriyor mu? Kullanıcılar oturumlarini uzatabilir mi?

Otomatik ilerleyen içeriğin (slaytlar, slayt gösterileri) duraklatilabilecegini veya ayarlanabilir zamanlamaya sahip olup olmadığını kontrol edin.

Nasıl düzeltilir

Kullanıcıların oturumlarini sona ermeden önce uzatmelerine olanak tanıyan bir zaman asimi uyarı diyaloğu uygulayın.

Oturum zaman asimi uyarisi

const OTURUM_ZAMANI = 15 * 60 * 1000; // 15 dakika
const UYARI_SURESI = 60 * 1000; // 60 saniye önce uyar
let zamanAsimiId, uyariId;

function oturumZamanlayicisiniBaslat() {
  clearTimeout(zamanAsimiId);
  clearTimeout(uyariId);

  uyariId = setTimeout(() => {
    zamanAsimiUyarisiGoster();
  }, OTURUM_ZAMANI - UYARI_SURESI);

  zamanAsimiId = setTimeout(() => {
    oturumuSonlandir();
  }, OTURUM_ZAMANI);
}

function zamanAsimiUyarisiGoster() {
  const diyalog = document.getElementById('zaman-asimi-diyaloğu');
  diyalog.showModal();
  diyalog.focus();
  geriSayimiBaslat(60);
}

function oturumuUzat() {
  oturumZamanlayicisiniBaslat();
  document.getElementById('zaman-asimi-diyaloğu').close();
  fetch('/api/oturumu-uzat', { method: 'POST' });
}

Zaman asimi uyarı diyaloğu HTML

<dialog id="zaman-asimi-diyaloğu" role="alertdialog"
  aria-labelledby="za-başlık"
  aria-describedby="za-açıklama">
  <h2 id="za-başlık">Oturum Sona Eriyor</h2>
  <p id="za-açıklama">
    Oturumunuz <span id="geri-sayim">60</span> saniye
    içinde sona erecek. Kaydedilmemis değişiklikler
    kaybolacaktir.
  </p>
  <button onclick="oturumuUzat()" autofocus>
    Oturuma Devam Et
  </button>
  <button onclick="cikisYap()">
    Çıkış Yap
  </button>
</dialog>

Ayarlanabilir otomatik ilerleme zamanlmamasi

<!-- Zamanlama kontrolleri ile slayt gösterisi -->
<div role="region" aria-label="Öne çıkan içerik">
  <div class="slaytlar"><!-- slaytlar --></div>
  <div class="slayt-kontrolleri">
    <button onclick="oncekiSlayt()"
      aria-label="Önceki slayt">&#8592;</button>
    <button onclick="otomatikIlerlemeAcKapa()"
      aria-label="Otomatik ilerlemeyi duraklat"
      id="duraklat-btn">&#10074;&#10074;</button>
    <button onclick="sonrakiSlayt()"
      aria-label="Sonraki slayt">&#8594;</button>
  </div>
  <label>
    Otomatik ilerleme hızı:
    <select onchange="hiziAyarla(this.value)">
      <option value="0">Kapalı</option>
      <option value="10000">Yavaş (10sn)</option>
      <option value="5000" selected>Normal (5sn)</option>
      <option value="3000">Hizli (3sn)</option>
    </select>
  </label>
</div>

Sık yapılan hatalar

Uyari vermeden sessizce sona eren oturum zaman asimlari, kullanıcıların kaydedilmemis çalışmasını kaybetmelerine neden olur.
Yalnızca birkaç saniye görünen ve uzatilamayan zaman asimi uyarıları.
Daha fazla zaman isteme seçeneği olmayan form gönderme son tarihleri.
Duraklat düğmesi veya zamanlama kontrolleri olmayan otomatik ilerleyen slaytlar veya slayt gösterileri.
Uzatma secenekleri olmayan sinav veya anket sayfalarindaki geri sayim zamanlayicilari.
Iptal etme yolu olmayan ara sayfalardaki yönlendirme zamanlayicilari (örneğin "5 saniye içinde yonlendirileceksiniz").

2.2.1 Zamanlama Ayarlanabilir