Skip to content

404 Page and others 40X #1430

@cyberbaloo

Description

@cyberbaloo

Bug Report

Problematic behavior
When I come across a 404 page, the title is correct but the image doesn't have the proper alt text.
The home icon is not hidden from screen readers

Expected behavior/code
<img alt="Image 403" loading="lazy" width="450" height="450" decoding="async" data-nimg="1" class="c__image-system-filter" src="/_next/static/media/icon-403.4dcbbb48.png" style="color: transparent; max-width: 100%; height: auto;">

Steps to Reproduce

  1. Choose a URL that doesn't exist
  2. And then the bug happens!

Possible Solution

  • Add a level 1 heading to the page <h1>Page introuvable - Erreur 404</h1>
  • Remove the alt text from the image, the alt attribute must be empty so it's not rendered.
  • Hide the home icon in the button that links back to the home page by adding aria-hidden="true"

The final code for the button should look like this:

<button class="c__button c__button--primary c__button--medium sc-ceb1b308-0 klVXNI c__button--with-icon--left"><span class="c__button__icon"><span class="sc-34780e96-0 sc-262648e5-0 kvkFNG kcsZv --docs--icon-bg material-icons" aria-hidden="true">house</span></span>Accueil</button>

Additional context/Screenshots
Image

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions