How to make a 404 page accessible without making it boring
Error pages can be strange, funny, and branded while remaining clear to keyboard, screen-reader, low-vision, and motion-sensitive visitors.
Filed: · By:Steve Bullis
An accessible 404 page does not have to look like an insurance portal. It has to preserve the exit.
The visitor is already in an error state. Good accessibility keeps the joke from becoming a second error layered on top of the first.
Put the explanation in text
An illustration can carry the mood, but not the entire message. Include a visible heading such as “Page not found” and a short explanation. If the artwork contains important words, repeat them as HTML text or include them in meaningful alternative text.
Decorative broken-image icons, glitter, stars, and wandering ghosts should usually have empty alt text so a screen reader does not announce the set dressing one object at a time.
Keep focus and heading order ordinary
Use one clear page heading, followed by logically nested sections. Do not automatically move focus on page load unless a real application state requires it. The browser title should also identify the error so someone moving among tabs knows where they landed.
All recovery controls must work with a keyboard. Visible focus is part of the design, not a debugging artifact to erase.
Make the exits specific
“Go to homepage,” “Search products,” and “Read the journal” are more useful than three links named “Click here.” Keep the most reliable exit close to the error explanation.
If you include search or a broken-link report form, give every control a programmatic label and show errors in text. W3C’s accessibility review guidance emphasizes keyboard access, visible labels, clear instructions, and specific error feedback.
Protect readability
Check text and controls against their actual backgrounds, including visited links and hover states. Do not place essential copy over a busy illustration without a solid backing layer.
Allow text to zoom without clipping. Long translations, large system fonts, and narrow screens should wrap naturally. A fixed-height error card that only works in the original mockup is a future bug.
Treat motion as optional seasoning
A tiny drifting astronaut can be delightful. A full-screen shake, autoplaying audio, or flashing background can make recovery impossible.
Honor prefers-reduced-motion. Pause automatic movement or provide a control when animation continues. Keep the home link in one place even if a decorative copy of it runs away as part of a joke.
Test the actual error route
Accessibility checks often cover polished product templates and skip the routes produced by failure. Visit a nonsense URL and test:
- page title and heading structure;
- keyboard order and visible focus;
- link names out of context;
- zoom and narrow-screen reflow;
- light, dark, high-contrast, and reduced-motion preferences;
- meaningful image alternatives;
- form labels and error messages.
The ideal 404 has two layers. The first is dependable: what happened and where to go. The second is personality. Make the dependable layer accessible, then let the personality get weird around it.