Avoid meta refresh redirects
Meta refresh redirects can disorient users and cause accessibility issues by refreshing the page unexpectedly.
- Avoid using `<meta http-equiv="refresh">` for page redirects
- Use server-side redirects (301 or 302) instead of client-side meta refreshes
- Ensure users have control over page refreshes and redirects
Rule Details
The http-equiv="refresh" (opens in new tab) pattern on a <meta> tag is often used to refresh a page or redirect a user to a new location. WCAG timing guidance (opens in new tab) discourages this because the user loses control over when context changes.
Code Example
<!-- Incorrect: Automatic redirect after 5 seconds -->
<head>
<meta http-equiv="refresh" content="5; url=https://example.com/new-page">
</head>
<!-- Better: Provide a clear link instead -->
<body>
<p>This page has moved. Please <a href="https://example.com/new-page">visit the new location</a>.</p>
</body>
<!-- Best: Use server-side redirect (e.g., via .htaccess or Next.js config) -->Why It Matters
- User Control: Users should always be in control of when their context changes. Unexpected redirects take that control away.
- Screen Reader Disruption: When a page refreshes, a screen reader starts reading from the top, which is very disruptive if the user was in the middle of a paragraph.
- Time Constraints: Some users need more time to read a page before they are redirected. Meta refresh doesn't account for individual reading speeds.
- SEO & Performance: Server-side redirects are faster and better for search engine optimization than client-side meta refreshes.
Exceptions
- Some exact legal, product, or brand wording cannot be simplified freely, but the surrounding content should still reduce ambiguity and cognitive load where possible.
- A content rule should be judged on the final user-facing wording, not just on individual banned phrases taken out of context.
- If a page has both structural accessibility failures and content clarity issues, fix the failure that prevents users from reaching or perceiving the content first.
Verification
Automated Checks
- Inspect the browser accessibility tree or accessibility pane for the relevant element, role, or accessible name.
- Run an automated accessibility checker such as axe or Lighthouse where applicable.
Manual Checks
- Test the affected UI with keyboard-only navigation and confirm the rule holds in the rendered experience.
- Re-test one representative user flow with a screen reader if this rule affects a key interaction.
Use with AI
Copy these prompts to use with your AI assistant, or install the MCP server to use directly from Claude, Cursor, or Windsurf.
Check
Verify implementation
Check the HTML for any meta tags that use `http-equiv="refresh"` for automatic page redirection.
Fix
Auto-fix issues
Replace meta refresh redirects with server-side redirects or clear, user-initiated links.
Explain
Learn more
Explain why automatic page refreshes can be a major barrier for accessibility and user experience.
Review
Code review
Review the rendered markup and interactive states that affect Avoid meta refresh redirects. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.