Avoid Meta Refresh for Accessibility
Rule ID: meta-refresh
Ruleset: axe-core 4.10
User Impact: Critical
Guidelines: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549
How to Fix the Problem
To make your web page compliant and accessible:
-
Remove all
<meta http-equiv="refresh">
elements from your HTML, especially those with refresh times shorter than 20 hours. -
If you need to refresh the page or redirect users, use JavaScript instead, and provide controls that let users:
-
Pause the refresh,
-
Extend the delay,
-
Or turn off the auto-refresh entirely.
-
Bad Example:
Accessible Alternative:
Use JavaScript with user controls:
Or, if you must perform a refresh-like behavior, always notify users and allow interaction before proceeding.
Why it Matters
Automatic refreshes:
-
Disrupt user flow, especially for screen reader users or those with cognitive impairments.
-
Cause unexpected shifts in focus, typically sending the user back to the top of the page.
-
Remove control from users, which violates key principles of accessible design.
People with disabilities may:
-
Lose track of where they are on the page.
-
Be interrupted before finishing reading.
-
Struggle to respond before the refresh changes the content.
These issues violate accessibility principles such as predictability, control, and timing (per WCAG 2.2.1 and 2.2.4).
Rule Description
Web pages must not use the <meta http-equiv="refresh">
element to refresh the page within 20 hours, as this prevents users from controlling content updates—leading to accessibility barriers.
The Algorithm (in simple terms)
-
Find all
<meta>
elements in the document. -
Check if any have
http-equiv="refresh"
and acontent
attribute. -
If the
content
value sets a refresh time less than 20 hours, it’s flagged as a failure.