Altwise

404, error and maintenance pages that don't strand visitors: an accessibility guide

How to make 404, error, maintenance and 'site down' pages accessible: a clear title and text message, a way forward with links, search and contact details, no surprise redirects, calm animations, return times with a time zone, platform notes and a 5-minute check.

Sooner or later every website shows someone an error page: a link in an old email that points to a page you deleted, a menu that moved, a host outage, or a "back soon" page while you rebuild. These pages are easy to forget, so they're often the least accessible pages on a site: a big image that says "Oops!" with no text, no page title, a countdown that redirects people before they can read it, and no way to reach you. A visitor who uses a screen reader, a magnifier, a keyboard or voice control hits a dead end exactly when they're already lost. Here's how to make these pages helpful for everyone.

1. Say what happened, in text, with a real title and heading

The page title (the text in the browser tab, which screen readers read first) and the main heading should both say what happened in plain words, such as "Page not found". Don't put the message only inside an image or illustration: give a decorative image empty alt text and write the message as real text. Keep the page language set, as on the rest of your site. (WCAG 2.4.2, WCAG 2.4.6, WCAG 1.1.1, WCAG 1.4.5, WCAG 3.1.1)

<html lang="en">
<head>
  <title>Page not found | Example Bakery</title>
</head>
<body>
  <a class="skip" href="#main">Skip to content</a>
  <!-- your normal header and menu here -->
  <main id="main">
    <img src="/img/empty-cake-stand.svg" alt="">
    <h1>Page not found</h1>
    <p>We couldn't find that page. It may have moved, or the link may have a typo.</p>
  </main>
</body>
</html>
<!-- example business name and image, use your own -->

2. Give people a way forward

Keep your normal header, menu and footer on the error page, so it works like every other page. Then add a short list of the places most people are looking for, a labelled search box if your site has search, and your phone number and email in the same place as on other pages. (WCAG 3.2.3, WCAG 3.2.6, WCAG 3.3.2, WCAG 2.4.4)

<h2>Popular pages</h2>
<ul>
  <li><a href="/menu">Menu and prices</a></li>
  <li><a href="/order">Order a custom cake</a></li>
  <li><a href="/hours">Hours and location</a></li>
</ul>
<form role="search" action="/search">
  <label for="q404">Search this site</label>
  <input id="q404" name="q" type="search">
  <button type="submit">Search</button>
</form>
<p>Still stuck? Call <a href="tel:+19185550100">918-555-0100</a> or email
  <a href="mailto:[email protected]">[email protected]</a>.</p>
<!-- example pages, number and email, use your real ones -->

See accessible site search and link text and buttons.

3. No surprise redirects or countdowns

"Taking you to the home page in 5 seconds" moves people before a screen reader has finished reading the page, and someone using a magnifier may not even see the countdown. Let people choose the link themselves. If you really must use a timed redirect, give people a way to turn it off or ask for more time, or redirect straight away at the server with no message. (WCAG 2.2.1)

4. Keep funny animations calm

Animated mascots, glitch effects and flickering "error" graphics are popular on 404 pages. Anything that moves for more than five seconds needs a way to pause it, and nothing should flash more than three times a second. Respect the visitor's reduced-motion setting. (WCAG 2.2.2, WCAG 2.3.1) See animations, background video and motion.

@media (prefers-reduced-motion: reduce) {
  .error-mascot { animation: none; }
}

5. Maintenance, outage and "back soon" pages

When your site is down for an update, or your host or booking system has an outage, the holding page is the only page anyone can see. Write the message as text, give the expected return time with a time zone ("back by 3 PM Central on Tuesday"), and tell people how to book, order or reach you in the meantime. Use good contrast and don't hide the message in a logo image or a video. If you post updates during a longer outage, add them as dated text at the top. (WCAG 1.4.3, WCAG 1.4.5, WCAG 1.3.1)

<title>Back soon | Example Bakery</title>
...
<main id="main">
  <h1>We're updating our website</h1>
  <p>We'll be back by 3 PM Central on Tuesday, November 10.</p>
  <h2>Need us before then?</h2>
  <p>Call <a href="tel:+19185550100">918-555-0100</a> (Tuesday to Saturday, 7 AM to 4 PM)
     or email <a href="mailto:[email protected]">[email protected]</a>.</p>
  <h2>Updates</h2>
  <ul>
    <li><time datetime="2026-11-10T10:00-06:00">10 AM Tuesday</time>: ordering is open by phone.</li>
  </ul>
</main>
<!-- example times, number and email, use your real ones -->

A search note, not an accessibility rule: a missing page should send a real "404 Not Found" status, not a normal page that just says "not found", and Google recommends a "503 Service Unavailable" status for short planned downtime so the pause isn't treated as your site disappearing. See Google's guidance on pausing a site. Your platform or host usually handles this; ask them if you aren't sure.

6. Platform notes

Common mistakes

A 5-minute check you can do today

  1. Type your web address followed by a made-up page, such as /xyz-test, and press Enter.
  2. Look at the browser tab. Does it say the page wasn't found?
  3. Press Tab from the top of the page. Can you reach the menu, a few useful links and your contact details, with a visible focus outline?
  4. Wait 30 seconds. Does the page stay put and stop moving?
  5. Zoom to 200% on a phone-width window. Is the message still readable without sideways scrolling?
  6. Click the links in your last email newsletter and your Google Business Profile. Do any of them land on the error page?

What a scan can and can't check here

An automated scan only checks the pages it visits, and scanners follow your working links, so they usually never see your 404 or maintenance page. You can scan the error page directly by entering a made-up address, which will catch a missing title, missing alt text, an unlabelled search box or low contrast. A scan can't tell whether the message makes sense, whether the countdown is too fast or whether your old links still work, which is why the 5-minute check matters. Our Fix-Pack scans up to 10 public pages you choose, and you can include your error page.

Related: website accessibility checklist, page titles and page language, focus outlines and skip links, website accessibility maintenance plan.

This is general technical guidance, not legal advice, and it doesn't certify compliance with the ADA or any law, or protect against claims.

Want the fixes written for you?

Start with a free homepage snapshot. The $149 Fix-Pack scans up to 10 pages and gives copy-paste fixes for your platform within 48 hours, with a 14-day refund promise. See a sample report first.

This is general technical guidance, not legal advice, and it does not certify compliance with the ADA or any law.

Related guides

All guides

This guide is general technical information, not legal advice. Following it does not certify ADA or any legal compliance. Automated checks find only part of accessibility barriers.

Check your own site, then decide

  1. Free homepage snapshot. Your top 3 issues in about a minute. No signup, no card.
  2. $149 Fix-Pack, if you want the full list. Up to 10 pages scanned, issues ranked by impact, copy-paste fixes for your platform, delivered within 48 hours, plus one re-scan after you apply them.

Get my free snapshot Order the Fix-Pack – $149

14-day refund promise. See a sample report first. A technical report, not legal advice; automated checks find only part of accessibility barriers.