WCAG 2.2.6: Timeouts

WCAG 2.2.6: Przedłużanie czasu trwania sesji (Timeouts)

Kryterium sukcesu 2.2.6, zaliczane do poziomu AAA, dotyczy zarządzania sesjami użytkownika w taki sposób, aby uniknąć nieoczekiwanej utraty danych spowodowanej bezczynnością. Jest to szczególnie ważne dla użytkowników, którzy potrzebują więcej czasu na interakcję z treścią lub wypełnianie formularzy.

Czym jest kryterium 2.2.6 Przedłużanie czasu trwania sesji?

To kryterium wymaga, aby użytkownicy byli ostrzegani o zbliżającym się zakończeniu sesji spowodowanym brakiem aktywności, jeśli taka bezczynność może prowadzić do utraty wprowadzonych danych. Dodatkowo, po otrzymaniu ostrzeżenia, użytkownik powinien mieć możliwość łatwego przedłużenia sesji, aby kontynuować pracę bez obawy o utratę informacji. Istnieje wyjątek: jeśli dane użytkownika są zachowywane przez ponad 20 godzin po ustaniu aktywności, kryterium to nie ma zastosowania.

Dlaczego to kryterium jest ważne? (Wpływ na dostępność)

Nieoczekiwane zakończenie sesji może być niezwykle frustrujące i niedostępne dla wielu grup użytkowników:

• Osoby z niepełnosprawnościami poznawczymi: Mogą potrzebować więcej czasu na zrozumienie treści, podjęcie decyzji lub wypełnienie skomplikowanych formularzy. Nagłe wygaśnięcie sesji bez ostrzeżenia prowadzi do utraty pracy i zwiększa stres.
• Osoby z niepełnosprawnościami ruchowymi: Użytkownicy korzystający z alternatywnych metod wprowadzania danych (np. myszy sterowanej wzrokiem, przełączników) mogą pracować wolniej. Krótkie czasy sesji utrudniają lub uniemożliwiają im wykonanie zadań.
• Osoby niewidome lub niedowidzące: Nawigowanie po złożonych interfejsach za pomocą czytnika ekranu lub powiększenia może być czasochłonne. Brak ostrzeżenia lub zbyt krótki czas na reakcję sprawia, że tracą dostęp do wprowadzonych danych.
• Każdy użytkownik w nieoptymalnych warunkach: Osoby, które zostają rozproszone, wykonują inne zadania, lub mają wolne połączenie internetowe, mogą łatwo przekroczyć limit czasu sesji, co prowadzi do niepotrzebnej utraty pracy i frustracji.

Głównym celem tego kryterium jest zapobieganie utracie danych i zapewnienie, że użytkownicy mają wystarczająco dużo czasu na wykonanie swoich zadań, niezależnie od ich indywidualnych potrzeb czy tempa pracy.

Szczegółowe wymagania i kryteria sukcesu

Kryterium sukcesu 2.2.6 „Przedłużanie czasu trwania sesji” jest sformułowane następująco:

Użytkownicy są ostrzegani o czasie trwania każdej bezczynności użytkownika, która może spowodować utratę danych, chyba że dane są zachowywane przez ponad 20 godzin, gdy użytkownik nie podejmuje żadnych działań.

Kluczowe elementy tego kryterium to:

• Ostrzeżenie: Musi być wyraźne i zauważalne dla użytkownika.
• Czas trwania: Ostrzeżenie powinno informować o tym, ile czasu pozostało do zakończenia sesji.
• Utrata danych: Kryterium ma zastosowanie tylko wtedy, gdy bezczynność może prowadzić do utraty danych wprowadzonych przez użytkownika (np. w formularzach, koszykach zakupowych, edytorach tekstu).
• Możliwość przedłużenia: Użytkownik musi mieć łatwą opcję przedłużenia sesji lub zachowania danych.
• Wyjątek 20 godzin: Jeśli system automatycznie zachowuje wszystkie dane użytkownika przez co najmniej 20 godzin po bezczynności, ostrzeżenie nie jest wymagane.

Praktyczne wytyczne dla zapewnienia zgodności

Aby spełnić kryterium 2.2.6, należy wdrożyć następujące praktyki:

• Wczesne i wyraźne ostrzeżenie: Poinformuj użytkownika o zbliżającym się zakończeniu sesji na tyle wcześnie, aby miał czas na reakcję (np. 2-5 minut przed). Ostrzeżenie powinno być wizualnie widoczne i ogłoszone przez czytniki ekranu.
• Zrozumiały komunikat: Komunikat powinien jasno informować o konsekwencjach (utrata danych) i oferować prostą opcję działania (przycisk „Przedłuż sesję”).
• Dostępność interakcji: Opcja przedłużenia sesji (np. przycisk) musi być dostępna za pomocą klawiatury i być poprawnie oznaczona dla technologii wspomagających (np. atrybuty ARIA).
• Zachowanie danych: Rozważ automatyczne zapisywanie danych użytkownika (autosave) w tle, co może całkowicie wyeliminować ryzyko utraty danych i potrzebę ostrzegania o sesji.
• Elastyczność: Jeśli to możliwe, pozwól użytkownikom na skonfigurowanie preferowanego czasu trwania sesji (w granicach bezpieczeństwa).
• Testowanie: Przeprowadź testy z udziałem osób korzystających z różnych technologii wspomagających, aby upewnić się, że mechanizm ostrzegawczy jest skuteczny i dostępny dla wszystkich.

Przykłady implementacji

Poprawne wdrożenie

Poniższy przykład pokazuje modalne okno dialogowe, które pojawia się na kilka minut przed wygaśnięciem sesji, oferując użytkownikowi możliwość jej przedłużenia.

<div id="session-timeout-modal" class="modal" role="dialog" aria-labelledby="modal-title" aria-describedby="modal-description">
  <div class="modal-content">
    <h3 id="modal-title">Twoja sesja wygaśnie wkrótce!</h3>
    <p id="modal-description">Z powodu braku aktywności, Twoja sesja wygaśnie za <span id="time-remaining">5:00</span> minut. Niezapisane dane zostaną utracone.</p>
    <button id="extend-session-btn">Przedłuż sesję</button>
    <button id="logout-btn">Wyloguj</button>
  </div>
</div>
Skopiuj tekst

.modal {
  display: none; /* Ukryte domyślnie */
  position: fixed; /* Zostaje na górze strony */
  z-index: 1000; /* Wysoko, aby było widoczne */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
  justify-content: center;
  align-items: center;
}
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  max-width: 500px;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
.modal-content button {
  padding: 10px 20px;
  margin: 10px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
  font-size: 1em;
}
#extend-session-btn {
  background-color: #007bff;
  color: white;
}
#logout-btn {
  background-color: #dc3545;
  color: white;
}
Skopiuj tekst

// Symulacja czasu sesji (np. 10 minut = 600 sekund)
let sessionDuration = 600; 
let warningTime = 300; // Ostrzeżenie 5 minut przed wygaśnięciem
let timeLeft = sessionDuration;
let intervalId;

const modal = document.getElementById('session-timeout-modal');
const timeRemainingSpan = document.getElementById('time-remaining');
const extendBtn = document.getElementById('extend-session-btn');
const logoutBtn = document.getElementById('logout-btn');

function formatTime(seconds) {
  const minutes = Math.floor(seconds / 60);
  const secs = seconds % 60;
  return `${minutes}:${secs < 10 ? '0' : ''}${secs}`;
}

function startSessionTimer() {
  intervalId = setInterval(() => {
    timeLeft--;
    if (timeLeft <= warningTime && modal.style.display === 'none') {
      showModal();
    }
    if (timeLeft <= 0) {
      clearInterval(intervalId);
      endSession();
    } else if (timeLeft <= warningTime) {
      timeRemainingSpan.textContent = formatTime(timeLeft);
      // W przypadku czytników ekranu, zaktualizuj live region jeśli to możliwe
      // np. poprzez ARIA live region na samym timeRemainingSpan
      // lub aktualizację niewidzialnego elementu z rolą status
    }
  }, 1000);
}

function showModal() {
  modal.style.display = 'flex';
  modal.setAttribute('aria-modal', 'true');
  modal.focus(); // Przenieś fokus na modal
  // Upewnij się, że czytniki ekranu ogłoszą treść modala
  // Można użyć elementu z rolą 'alertdialog' dla bardziej krytycznych komunikatów
}

function hideModal() {
  modal.style.display = 'none';
  modal.removeAttribute('aria-modal');
}

function extendSession() {
  clearInterval(intervalId);
  timeLeft = sessionDuration; // Resetuj czas sesji
  hideModal();
  startSessionTimer(); // Uruchom timer ponownie
  alert('Sesja została przedłużona!'); // Powiadom użytkownika
  // Tutaj wyślij zapytanie do serwera, aby rzeczywiście przedłużyć sesję
}

function endSession() {
  hideModal();
  alert('Sesja wygasła! Zostaniesz wylogowany.');
  window.location.href = '/logout'; // Przekierowanie do strony wylogowania
}

extendBtn.addEventListener('click', extendSession);
logoutBtn.addEventListener('click', endSession);

// Start timera po załadowaniu strony
document.addEventListener('DOMContentLoaded', startSessionTimer);
Skopiuj tekst

Niepoprawne wdrożenie

System, który nagle wylogowuje użytkownika bez żadnego ostrzeżenia lub z ostrzeżeniem pojawiającym się na 5 sekund przed zakończeniem sesji, jest niezgodny z WCAG 2.2.6. Podobnie, system, który ostrzega, ale nie daje użytkownikowi możliwości przedłużenia sesji, również jest niezgodny.

<!-- Użytkownik pracuje nad formularzem... -->
<form action="/submit" method="POST">
  <label for="data">Wprowadź dane:</label>
  <textarea id="data" name="data"></textarea>
  <button type="submit">Zapisz</button>
</form>
<!-- ...po X minutach braku aktywności, strona automatycznie odświeża się do ekranu logowania, a dane są tracone bez ostrzeżenia. -->
Skopiuj tekst

<div id="session-warning" style="display: none;">
  <p>Twoja sesja wygaśnie za 30 sekund. Niezapisane dane zostaną utracone.</p>
</div>
<!-- Brak przycisku lub linku do przedłużenia sesji -->
Skopiuj tekst

Najlepsze praktyki i typowe pułapki

Najlepsze praktyki:

• Autozapis: Zaimplementuj funkcję automatycznego zapisu danych użytkownika w tle, aby zminimalizować ryzyko utraty danych, nawet jeśli sesja wygaśnie.
• Długie sesje domyślne: Tam, gdzie bezpieczeństwo na to pozwala, ustaw domyślnie dłuższe czasy trwania sesji.
• Kontekstowe zarządzanie sesją: Różnicuj czasy sesji w zależności od wrażliwości danych i złożoności zadania. Dla wrażliwych danych finansowych czas może być krótszy, ale zawsze z odpowiednim ostrzeżeniem i opcją przedłużenia.
• Wielokrotne ostrzeżenia: Rozważ stopniowe ostrzeżenia (np. pierwsze 5 minut przed, drugie 1 minuta przed), aby dać użytkownikowi więcej szans na reakcję.
• Użycie aria-live: Dla ostrzeżeń dynamicznych, upewnij się, że czytniki ekranu ogłaszają zmiany stanu używając atrybutów aria-live="polite" lub aria-live="assertive".

Typowe pułapki:

• Zbyt krótkie ostrzeżenie: Pojawienie się ostrzeżenia na kilka sekund przed wygaśnięciem sesji nie daje wystarczającego czasu na reakcję.
• Niedostępne ostrzeżenie: Ostrzeżenie jest tylko wizualne (np. mały, migający tekst), bez odpowiedniego oznaczenia dla czytników ekranu.
• Brak opcji przedłużenia: Ostrzeżenie informuje o zbliżającej się utracie danych, ale nie oferuje żadnej interaktywnej opcji zapobiegania temu.
• Ignorowanie wyjątku: Stosowanie surowych limitów czasowych, nawet jeśli dane są faktycznie zachowywane przez ponad 20 godzin (co mogłoby zwolnić z konieczności ostrzegania).
• Brak testów z użytkownikami: Projektowanie mechanizmu ostrzegawczego bez faktycznego testowania z osobami z różnymi niepełnosprawnościami.

Podsumowanie

Kryterium WCAG 2.2.6 „Przedłużanie czasu trwania sesji” jest kluczowe dla zapewnienia inkluzywnego doświadczenia użytkownika, szczególnie w systemach, gdzie aktywność użytkownika jest śledzona, a bezczynność może prowadzić do utraty pracy. Wdrożenie jasnych, wczesnych ostrzeżeń z łatwą możliwością przedłużenia sesji lub zachowania danych to podstawa, aby uniknąć frustracji i zapewnić dostępność dla wszystkich użytkowników.