Warninga11y.meta-refresh

The page reloads or moves on by itself

Why it matters

A <meta http-equiv="refresh"> with a delay reloads the page, or sends it somewhere else, when the time is up, whether or not the visitor has finished. W3C: "If the time interval is too short, and there is no way to turn auto-refresh off, people who are blind will not have enough time to make their screen readers read the page before the page refreshes unexpectedly and causes the screen reader to begin reading at the top. Sighted users may also be disoriented by the unexpected refresh." A delayed redirect is "an unexpected change of context that may interrupt the user."

An instant redirect (a delay of 0) is fine: "It is acceptable to use the meta element to create a redirect when the time-out is set to zero, since the redirect is instant and will not be perceived as a change of context." So is a delay of more than 20 hours, the success criterion's own exception. Anything between fails. axe-core checks the same as "Delayed refresh under 20 hours must not be used".

Sources: WCAG 2.2, 2.2.1 Timing Adjustable (Level A); failures F40 (a timed redirect) and F41 (a timed reload); axe-core's meta-refresh.

How to fix it

Take the tag out. A page that has moved should redirect from the server, which is instant:

location = /old-cakes { return 301 https://www.example.com/cakes; }

A page that keeps something up to date (scores, prices, a queue) should update that part with JavaScript rather than reload, and give a way to pause it. A "you will be taken to…" page should have a link to press instead of a countdown.

Examples

These are the rule's own test pages, and what it says about each. They are run on every change to the rule book.

<meta http-equiv="refresh" content="5; url=https://www.example.com/cakes">
<p>You will be taken to our cakes in 5 seconds.</p>

WarningThe page moves on to https://www.example.com/cakes by itself after 5 seconds, whether or not someone has finished reading it or hearing it read, and nothing lets them stop it.

fail-countdown
<meta http-equiv="refresh" content="60">
<p>Today's bakes, as they come out of the oven.</p>

WarningThe page reloads itself after 60 seconds, which sends a screen reader back to the top before someone may have finished listening.

fail-reload
<meta http-equiv="refresh" content="0; url=https://www.example.com/cakes">

PassedThe page's meta refresh is instant, so nobody is cut off part way through it.

pass-instant
<meta http-equiv="refresh" content="86400">
<p>Today's bakes, as they come out of the oven.</p>

PassedThe page's meta refresh waits more than 20 hours, which is no time limit to anyone.

pass-over-twenty-hours