About This Accessibility Rule
When a page includes a <meta http-equiv="refresh"> tag with a time value under 20 hours, the browser will automatically reload or redirect the page after that delay. This happens without any user interaction or consent, which creates significant barriers for people with disabilities.
Why This Is a Problem
Automatic page refreshes are disorienting for many users. When the page reloads, the browser moves focus back to the top of the document. A user who was partway through reading content or filling out a form loses their place entirely. This is especially harmful for:
- Screen reader users (blind and deafblind users): A screen reader announces content linearly from the top. An unexpected refresh forces the user to start over, losing context and progress.
- Users with mobility impairments: People who navigate slowly using switch devices, mouth sticks, or other assistive technology may not finish interacting with the page before it refreshes, causing them to lose their work.
- Users with cognitive disabilities: Unexpected changes to the page can be confusing and make it difficult to complete tasks.
This rule relates to WCAG 2.2 Success Criterion 2.2.1: Timing Adjustable (Level A), which requires that for each time limit set by the content, users can turn off, adjust, or extend that time limit. A <meta> refresh gives users no such control — the page simply reloads or redirects with no warning or option to prevent it.
How to Fix It
You have several options depending on your use case:
-
Remove the
metarefresh entirely. If the refresh is unnecessary, simply delete the tag. - Set the delay to 20 hours or more. If a refresh is truly needed, a delay of 20 hours or greater passes the rule, as it’s unlikely to interrupt a user’s session.
-
Use a server-side redirect. If the goal is to redirect users to a new URL, configure a
301or302redirect on the server instead. - Use JavaScript with user controls. If you need periodic content updates, use JavaScript and provide users with the ability to pause, extend, or disable the auto-refresh.
Examples
Failing: Auto-refresh after 30 seconds
This refreshes the page every 30 seconds with no way for the user to stop it.
<head>
<meta http-equiv="refresh" content="30">
</head>Failing: Delayed redirect after 10 seconds
This redirects the user to another page after 10 seconds, giving them no control over the timing.
<head>
<meta http-equiv="refresh" content="10; url=https://example.com/new-page">
</head>Passing: Meta refresh removed
The simplest fix is to remove the meta refresh tag entirely.
<head>
<title>My Page</title>
</head>Passing: Server-side redirect instead of client-side
For redirects, use a server-side response. For example, an HTTP 301 header:
HTTP/1.1 301 Moved Permanently
Location: https://example.com/new-pagePassing: JavaScript refresh with user control
If you need periodic updates, use JavaScript and give users a way to stop or adjust the refresh.
<head>
<title>Live Dashboard</title>
</head>
<body>
<button id="toggle-refresh">Pause Auto-Refresh</button>
<script>
let refreshInterval = setInterval(function () {
location.reload();
}, 300000); // 5 minutes
document.getElementById("toggle-refresh").addEventListener("click", function () {
if (refreshInterval) {
clearInterval(refreshInterval);
refreshInterval = null;
this.textContent = "Resume Auto-Refresh";
} else {
refreshInterval = setInterval(function () {
location.reload();
}, 300000);
this.textContent = "Pause Auto-Refresh";
}
});
</script>
</body>Passing: Delay set to 20 hours or more
If a refresh is absolutely necessary and no interactive alternative is feasible, setting the delay to at least 72,000 seconds (20 hours) will pass the rule.
<head>
<meta http-equiv="refresh" content="72000">
</head>Help us improve our guides
Detect accessibility issues automatically
Rocket Validator scans thousands of pages with Axe Core and the W3C Validator, finding accessibility issues across your entire site.