Meta Refresh

Name: Meta Refresh
Author: thedaviddias

thedaviddias/frontendchecklist

1 installs
73.4k repo stars
Updated June 18, 2026
thedaviddias/frontendchecklist

Checks the HTML for meta http-equiv refresh redirects and replaces them with server-side redirects or user-initiated links for accessibility.

About

Finds client-side meta refresh redirects that confuse users with cognitive disabilities and restart screen readers, and swaps them for 301/302 server redirects. A developer uses it when reviewing rendered HTML for accessible redirect behavior.

Avoid meta http-equiv refresh for page redirects
Use server-side 301 or 302 redirects instead

Meta Refresh by the numbers

1 all-time installs (skills.sh)
Ranked #1,914 of 2,245 Frontend Development skills by installs in the Skillselion catalog
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/thedaviddias/frontendchecklist --skill meta-refresh

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/thedaviddias/frontendchecklist/meta-refresh.svg)](https://skillselion.com/skills/thedaviddias/frontendchecklist/meta-refresh)

Installs	1
repo stars	★ 73.4k
Last updated	June 18, 2026
Repository	thedaviddias/frontendchecklist ↗

What it does

Checks the HTML for meta http-equiv refresh redirects and replaces them with server-side redirects or user-initiated links for accessibility.

Files

SKILL.mdMarkdownGitHub ↗

Avoid meta refresh redirects

Unexpected page refreshes or redirects can be extremely confusing for users with cognitive disabilities and can cause screen readers to restart reading from the beginning.

Quick Reference

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

Check

Check the HTML for any meta tags that use http-equiv="refresh" for automatic page redirection.

Fix

Replace meta refresh redirects with server-side redirects or clear, user-initiated links.

Explain

Explain why automatic page refreshes can be a major barrier for accessibility and user experience.

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.

---

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/en/rules/accessibility/meta-refresh

Avoid meta refresh redirects

Meta refresh redirects can disorient users and cause accessibility issues by refreshing the page unexpectedly.

Priority: medium · Difficulty: intermediate · Time: 10 min

--- The `http-equiv="refresh"` pattern on a <meta> tag is often used to refresh a page or redirect a user to a new location. WCAG timing guidance 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.