SiteLint documentation and guidelines

A meta element must not have an http-equiv=”refresh” attribute

Description

The meta tag with http-equiv="refresh" attribute is an HTML element that instructs the web browser to refresh or reload the current page after a specified number of seconds. It can also be used to redirect the user to another URL after a certain delay. This mechanism was originally designed for simple tasks like refreshing content at regular intervals or redirecting users after displaying a temporary message.

Users with disabilities, especially those using screen readers or who have difficulty tracking moving objects, may find automatic page refreshes disorienting and frustrating. The sudden shift of focus back to the top of the page during a refresh can disrupt their navigation and understanding of the content.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers may find it disorienting if a page refreshes or redirects unexpectedly, as it disrupts their reading flow.
  • Motor impairments: users with motor impairments may have difficulty interacting with pages that refresh or redirect automatically, especially if they are in the middle of a task.
  • Cognitive disabilities: users with cognitive disabilities may find automatic refreshes or redirects confusing and disorienting, as it interrupts their interaction with the content.

Why it matters

Automatic page refreshes and redirects using the meta http-equiv="refresh" attribute can disrupt the user experience, particularly for users relying on assistive technologies. By avoiding this attribute and using modern techniques, you can ensure a more predictable and controlled user experience, enhancing accessibility and usability.

Coding problems and solutions

Common coding problems

  • Unexpected page refresh: using meta http-equiv="refresh" to refresh the page after a set interval can disrupt users.
  • Automatic redirection: using meta http-equiv="refresh" to automatically redirect users to a different page can cause confusion and disorientation.
  • No warning: automatic actions without user consent or warning can be problematic for all users, especially those relying on assistive technologies.

How to fix it

Use HTTP headers for redirection

Use HTTP headers for server-side redirection instead of the meta tag.

Example (Apache)
Redirect 301 /old-page.html /new-page.html

Use JavaScript for controlled refreshes

If a timed refresh is necessary, use JavaScript to provide more control and allow for user interaction.

Incorrect example
<meta http-equiv="refresh" content="60">
Correct example
<script>
  globalThis.setTimeout(() => {
    globalThis.location.reload();
  }, 60000); // Refresh the page after 60 seconds
</script>

Provide user warnings

Inform users about the upcoming action and allow them to cancel it if necessary.

Incorrect example
<meta http-equiv="refresh" content="60">
Correct example
<p>This page will refresh in 60 seconds. <button type="button" onclick="cancelRefresh()">Cancel</button></p>
<script>
  let refreshTimeout = globalThis.setTimeout(function() {
    globalThis.location.reload();
  }, 60000);

  function cancelRefresh() {
    globalThis.clearTimeout(refreshTimeout);
    globalThis.alert('Page refresh cancelled');
  }
</script>

Note that the inline event handler onclick here is used only for demonstration purposes. In general, avoid the inline event handler in favor of addEventListener or removeEventListener.

Avoiding inline JavaScript event handlers in HTML elements and instead using addEventListener and removeEventListener methods in JavaScript offers several advantages, including cleaner separation of concerns, improved readability, and easier maintenance of your code.

Known limitations

  • Server-side redirection: ensure that server-side redirects are properly configured and tested to avoid redirect loops and ensure accessibility.
  • User consent: always provide a way for users to cancel automatic actions, especially in interactive applications.
  • Testing: test across different browsers and devices to ensure that the replacement techniques work as expected and do not introduce new issues.

Resources

Rule

  • ID: no-meta-http-equiv-refresh