Search code examples
javascripthttp-redirectaccessibility

Accessible forced redirects with javascript with notification after redirect


Let's say customer has few dozen old public pages which never should have been existed in the first place. These pages are at least 3 page layouts old (10+ years) and their configurations are greatly outdated which in worst case results in wrong information. Because of these reasons customer of course does not want to show these pages to anyone.

However, because they existed, and since these pages are public, there might be unknown number of external links which direct to these unwanted pages. Because of this, customer did not want to delete the pages but to redirect them to new location. The question is also limited to client-side solutions.

So, from accessibility point of view, is it ok to set an immediate redirect to users on old pages and inform them AFTERWARDS on page they have been redirected? Like if redirect=1 then print a notification on top of the new page "You were redirected to a correct location, please update your references". Is this accessible solution?

Few client-side options

  • static hyperlink
  • meta refresh (time-limited)
  • meta refresh (immediate)
  • window.location
  1. I understand from accessibility point of view users should be given time to read why they are being redirected, but customer does not want to use static hyperlinks
  2. Time-limited meta-refresh is an accessibility fail, as shown in article https://www.w3.org/TR/WCAG20-TECHS/F40.html
  3. Immediate redirect with meta-element was somehow too slow with client-side javascript (over 1 second)
  4. Immediate redirect with window.location.replace seems to run faster. Below is a simplified version of redirect currently inserted on old pages for public users:
<script type="text/javascript">
  var redirectUrl = window.location.origin + "/newpage/?redirect=1"
  if (window.location.search!="")
    redirectUrl = redirectUrl + window.location.search + "&redirect=1";
  window.location.replace(redirectUrl);
</script>

As a side note, from SEO perspective window.location redirect should be fine as pointed out in this comment https://stackoverflow.com/posts/39418767/revisions


Solution

  • AS you have already said, redirect after some time is bad, and worse as the time gets longer, since the user might have the time to start reading and be abruptly interrupted without understanding why. So your redirection should be as quick as possible.

    The best redirection would be of course server-side with a location header, which is totally transparent to the user, but if you need to make a client-side redirection, the exact mean you use for redirecting has very little or no importance for accessibility. Choose whatever you want among meta refresh immediate, meta refresh with zero time, or JavaScript. As I have said above, I would preferably take the solution that responds the fastest in average (try it with several browsers and/or devices).

    For JavaScript based redirections, you can certainly speed it up a little by strategically placing the redirect instruction directly inside <script> rather than in a file, directly in <head> or early in the <body>, etc.

    In any case, if you want to pop up a notification, keep in mind that you must do it on the new page, not on the old page.

    If your redirection is immediate or almost immediate, that notification, though, is probably quite useless. If I click on a link on whatever unrelated website and land on your old page, I don't care much about having been redirected to a newer page, nor am I able to update the link, and nor am I going to alert the source site that the link should be updated. Unless I'm testing my own content, I really don't care about that.

    Actually, the probability that a reader signals an outdated link, and that the author become aware and updates it is extremely low, especially if the content is several years old. The Internet is full of broken links, and so is the life.