Avoid timed refresh/redirects
Content available in English only.
Accessibility isn't just about avoiding violations — it's about ensuring that everyone can use your product with confidence. This guide explains each rule's intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).
These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.
The user, not the system, decides when the page updates.
Overview
Why this matters
Unexpected refreshes or redirects interrupt reading and task completion, and can cause input loss. Users need control over when updates occur, especially during forms, checkout, or assistive-technology navigation.
How to fix this issue
Remove timed refresh/redirect behavior and replace it with user-triggered updates. Show a non-blocking 'new data available' message and provide explicit actions such as Refresh or Dismiss.
Developer Guidance
Search both templates and runtime code for refresh logic (`meta refresh`, `location.replace`, timed `window.location`, forced polling reloads). Centralize updates behind a manual refresh pattern with optional polite live announcement. Preserve focus and unsaved state when users choose to refresh.
Code Examples
Incorrect Implementation
<meta http-equiv="refresh" content="60;url=/dashboard">Correct Implementation
<section class="update-banner" aria-live="polite">
<p>New results available.</p>
<button type="button">Refresh now</button>
</section>Real-World Implementation
Before
A monitoring screen reloads every 20 seconds while users annotate incident notes, repeatedly clearing cursor position and context.After
The screen shows 'New data available' and keeps the current view stable until users press Refresh, preserving active form and focus state.CSS Example (Guidance)
.update-banner {
display: flex;
gap: 0.75rem;
align-items: center;
padding: 0.75rem 1rem;
border: 1px solid #1f2937;
background: #f8fafc;
}
.update-banner button:focus-visible {
outline: 2px solid #0f172a;
outline-offset: 2px;
}Manual Testing
- 1. Verify no timed refresh or redirect tag exists in the rendered head section.
- 2. Stay on the page for several update intervals and confirm navigation does not change automatically.
- 3. Type into a form field and ensure content is not cleared by background update behavior.
- 4. With a screen reader enabled, confirm reading flow is not interrupted unexpectedly.
- 5. Trigger manual refresh and verify focus is restored predictably and user input is preserved where possible.
Related Operable Rules
Trusted by organizations across Europe working toward WCAG and EAA conformance