Page d'erreurs

Les modèles de page d’erreur permettent d’informer l’utilisateur qu’un problème est rencontré sur le site pendant sa navigation.

Nous vous proposons 3 modèles de “page erreur” prêtes à l’emploi. Pour chaque variante, il existe un modèle de référence avec des contenus à adapter en fonction des cas rencontrés.

La structure peut être réutilisée pour les autres pages d’erreur non traitées par ces 3 modèles, à condition de respecter les bonnes pratiques préciser dans le paragraphe “Règles d’utilisation”.

Erreur 404, Page non trouvée

Ce modèle permet d’informer l’utilisateur que la page qu’il recherche n’existe pas. Celui-ci, “Page non trouvée - Erreur 404” est le modèle de référence pour les erreurs 404, “Page non trouvée”.

La page d’erreur 404 est composée de :

  • Une en-tête et un pied de page par défaut : à remplacer par l’en-tête et le pied de page réel du site
  • Une navigation : si elle est présente sur l’ensemble des pages du site.
  • Un titre : titre de la page 404, “Page non trouvée” (Texte fixe)
  • Un sous titre : permet d’afficher le code d’erreur http, “Erreur 404”
  • Un chapô : permet de s’excuser du problème rencontrée (Texte fixe)
  • Un texte qui aide l’utilisateur à trouver des solutions pour trouver la page initialement recherché et qui lui propose des portes de sortie . Le texte proposé dans le modèle à réutiliser par défaut.Si pas de moteur de recherche : supprimer la mention “ou effectuer une recherche avec notre moteur de recherche en haut de page”Si pas de solution de contact : supprimer la mention “Sinon contactez-nous pour que l’on puisse vous rediriger vers la bonne information.”
  • Si pas de moteur de recherche : supprimer la mention “ou effectuer une recherche avec notre moteur de recherche en haut de page”
  • Si pas de solution de contact : supprimer la mention “Sinon contactez-nous pour que l’on puisse vous rediriger vers la bonne information.”
  • Des boutons d’action qui mettent en avant les actions de sortie.Page d’accueil (redirection vers la page d’accueil)Contactez-nous : ouverture de la solution de contact si cette dernière existe.
  • Page d’accueil (redirection vers la page d’accueil)
  • Contactez-nous : ouverture de la solution de contact si cette dernière existe. 

<main role="main" id="content">
    <div class="fr-container">
        <div class="fr-my-7w fr-mt-md-12w fr-mb-md-10w fr-grid-row fr-grid-row--gutters fr-grid-row--middle fr-grid-row--center">
            <div class="fr-py-0 fr-col-12 fr-col-md-6">
                <h1>Page non trouvée</h1>
                <p class="fr-text--sm fr-mb-3w">Erreur 404</p>
                <p class="fr-text--lead fr-mb-3w">La page que vous cherchez est introuvable. Excusez-nous pour la gène occasionnée.</p>
                <p class="fr-text--sm fr-mb-5w">
                    Si vous avez tapé l'adresse web dans le navigateur, vérifiez qu'elle est correcte. La page n’est peut-être plus disponible.
                    <br>Dans ce cas, pour continuer votre visite vous pouvez consulter notre page d’accueil, ou effectuer une recherche avec notre moteur de recherche en haut de page.
                    <br>Sinon contactez-nous pour que l’on puisse vous rediriger vers la bonne information.
                </p>
                <ul class="fr-btns-group fr-btns-group--inline-md">
                    <li>
                        <a class="fr-btn" href="/">
                            Page d'accueil
                        </a>
                    </li>
                    <li>
                        <a class="fr-btn fr-btn--secondary" href="[À MODIFIER - lien vers un formulaire de contact]">
                            Contactez-nous
                        </a>
                    </li>
                </ul>
            </div>
            <div class="fr-col-12 fr-col-md-3 fr-col-offset-md-1 fr-px-6w fr-px-md-0 fr-py-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="fr-responsive-img fr-artwork" aria-hidden="true" width="160" height="200" viewBox="0 0 160 200">
                    <use class="fr-artwork-motif" href="../../../../../dist/artwork/background/ovoid.svg#artwork-motif"></use>
                    <use class="fr-artwork-background" href="../../../../../dist/artwork/background/ovoid.svg#artwork-background"></use>
                    <g transform="translate(40, 60)">
                        <use class="fr-artwork-decorative" href="../../../../../dist/artwork/pictograms/system/technical-error.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../../../dist/artwork/pictograms/system/technical-error.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../../../dist/artwork/pictograms/system/technical-error.svg#artwork-major"></use>
                    </g>
                </svg>
            </div>
        </div>
    </div>
</main>

Erreur 500, Erreur inattendue

Ce modèle permet d’informer l’utilisateur que le service auquel il souhaite accéder rencontre un problème. Celui-ci “Erreur inattendue - Erreur 500” est le page de référence pour les erreurs 500.

La page d’erreur 500 est composée de :

  • Une en-tête et un pied de page par défaut : à remplacer par l’en-tête et le pied de page réel du site
  • Une navigation : si elle est présente sur l’ensemble des pages du site.
  • Un titre : titre de la page erreur 500, “Erreur inattendue” (Texte fixe)
  • Un sous titre : permet d’afficher le code d’erreur http, “Erreur 500”
  • Un chapô : permet de s’excuser du problème rencontrée (Texte fixe)
  • Un texte qui aide l’utilisateur à trouver des solutions pour trouver la page initialement recherchée et qui lui propose des portes de sortie Texte par défaut : “Essayez de rafraichir la page, sinon merci de réessayer plus tard.”Si avec solution de contact ajouter : “Si vous avez besoin d’une aide immédiate, merci de nous contacter directement.”
  • Texte par défaut : “Essayez de rafraichir la page, sinon merci de réessayer plus tard.”
  • Si avec solution de contact ajouter : “Si vous avez besoin d’une aide immédiate, merci de nous contacter directement.”
  • Si solution de contact, un bouton “Contact” permettant l'ouverture de la solution de contact 

<main role="main" id="content">
    <div class="fr-container">
        <div class="fr-my-7w fr-mt-md-12w fr-mb-md-10w fr-grid-row fr-grid-row--gutters fr-grid-row--middle fr-grid-row--center">
            <div class="fr-py-0 fr-col-12 fr-col-md-6">
                <h1>Erreur inattendue</h1>
                <p class="fr-text--sm fr-mb-3w">Erreur 500</p>
                <p class="fr-text--lead fr-mb-3w">Essayez de rafraichir la page ou bien ressayez plus tard.</p>
                <p class="fr-text--sm fr-mb-5w">
                    Désolé, le service rencontre un problème, nous travaillons pour le résoudre le plus rapidement possible.
                </p>
                <ul class="fr-btns-group fr-btns-group--inline-md">
                    <li>
                        <a class="fr-btn fr-btn--secondary" href="[À MODIFIER - lien vers un formulaire de contact]">
                            Contactez-nous
                        </a>
                    </li>
                </ul>
            </div>
            <div class="fr-col-12 fr-col-md-3 fr-col-offset-md-1 fr-px-6w fr-px-md-0 fr-py-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="fr-responsive-img fr-artwork" aria-hidden="true" width="160" height="200" viewBox="0 0 160 200">
                    <use class="fr-artwork-motif" href="../../../../../dist/artwork/background/ovoid.svg#artwork-motif"></use>
                    <use class="fr-artwork-background" href="../../../../../dist/artwork/background/ovoid.svg#artwork-background"></use>
                    <g transform="translate(40, 60)">
                        <use class="fr-artwork-decorative" href="../../../../../dist/artwork/pictograms/system/technical-error.svg#artwork-decorative"></use>
                        <use class="fr-artwork-minor" href="../../../../../dist/artwork/pictograms/system/technical-error.svg#artwork-minor"></use>
                        <use class="fr-artwork-major" href="../../../../../dist/artwork/pictograms/system/technical-error.svg#artwork-major"></use>
                    </g>
                </svg>
            </div>
        </div>
    </div>
</main>

Erreur 503, Service indisponible

Ce modèle permet d’informer l’utilisateur que le service est temporairement indisponible. Celui-ci, “Service indisponible - Erreur 503” est le modèle de référence pour les erreurs 503, quand le service est indisponible ou mis en maintenance.

La page 503 est composée de :

  • Une en-tête et un pied de page par défaut : à remplacer par l’en-tête et le pied de page réel du site
  • Une navigation : si elle est présente sur l’ensemble des pages du site
  • Un titre : titre de la page erreur 503, “Service indisponible”(Texte fixe)
  • Un sous titre : “Erreur 503” qui permet d’afficher le type d’erreur
  • Un chapo : qui permet de s’excuser du problème rencontrée (Texte fixe)
  • Un texte qui aide l’utilisateur à trouver des solutions pour trouver une solution à son problème : Texte par défaut : “Merci de réessayer plus tard, vous serez en mesure de réutiliser le service très rapidement.”Texte si solution de contact : “Merci de réessayer plus tard, vous serez en mesure de réutiliser le service très rapidement. Si vous avez besoin d’une aide immédiate, merci de nous contacter directement.”
  • Texte par défaut : “Merci de réessayer plus tard, vous serez en mesure de réutiliser le service très rapidement.”
  • Texte si solution de contact : “Merci de réessayer plus tard, vous serez en mesure de réutiliser le service très rapidement. Si vous avez besoin d’une aide immédiate, merci de nous contacter directement.”
  • Un bouton d’action si solution de contact existe : “Contact” > ouverture de la solution de contact 

<!doctype html>
<html lang="fr">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Erreur serveur</title>
    <style>
        /*!
 * DSFR v1.8.0 | SPDX-License-Identifier: MIT | License-Filename: LICENSE.md | restricted use (see terms and conditions)
 */
        @charset "UTF-8";

        /* ¯¯¯¯¯¯¯¯¯ *\
  CONNECT
\* ˍˍˍˍˍˍˍˍˍ */
        html {
            height: 100%;
        }

        body {
            min-height: 100%;
            font-family: "Marianne", arial, sans-serif;
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            -webkit-text-size-adjust: 100%;
            margin: 0;
            padding: 0;
            font-size: 1rem;
            line-height: 1.5rem;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-color: #f6f6f6;
        }

        body::before,
        body::after {
            box-sizing: inherit;
        }

        body *,
        body *::before,
        body *::after {
            box-sizing: inherit;
        }

        main {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            flex: 1;
        }

        a {
            text-decoration: none;
            outline-offset: 2px;
            outline-width: 2px;
            outline-color: #0a76f6;
        }

        *:focus-visible {
            z-index: 500;
            outline-style: solid;
        }

        .fr-container {
            width: 100%;
            max-width: 78rem;
            margin-left: auto;
            margin-right: auto;
            padding-left: 1rem;
            padding-right: 1rem;
            display: flex;
            flex-direction: row;
            align-items: center;
            flex: 1;
        }

        .fr-grid-row {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin: 0;
            padding: 0;
        }

        .fr-grid-row--center {
            justify-content: center;
            align-items: center;
        }

        .fr-grid-row--gutters {
            margin: -0.5rem;
        }

        .fr-grid-row--gutters>[class^=fr-col-],
        .fr-grid-row--gutters>[class*=" fr-col-"] {
            padding: 0.5rem;
        }

        .fr-col-12 {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
        }

        .fr-btns-group {
            list-style: none;
            padding: 0;
            margin-top: -0.5rem;
            margin-bottom: -0.5rem;
        }

        .fr-btns-group .fr-btn>span {
            display: inline-flex;
            flex-direction: row;
            align-items: center;
        }

        .fr-btns-group--inline {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin-left: -0.5rem;
            margin-right: -0.5rem;
        }

        .fr-btns-group--inline .fr-btn {
            margin-left: 0.5rem;
            margin-right: 0.5rem;
        }

        .fr-btns-group--sm .fr-btn {
            font-size: 0.875rem;
            line-height: 1.5rem;
        }

        .fr-btn {
            border-radius: 0;
            padding: 0.25rem 0.75rem;
            margin-top: 0.5rem;
            margin-bottom: 0.5rem;
            background-color: transparent;
            overflow: initial;
            max-width: 100%;
            max-height: none;
            font-weight: 500;
            display: inline-flex;
            flex-direction: row;
            align-items: center;
        }

        .fr-btn svg {
            width: 1rem;
            height: 1rem;
            margin-left: -0.125rem;
            margin-right: 0.5rem;
            fill: #000091;
        }

        .fr-server__body {
            margin-top: 3.5rem;
            margin-bottom: 3.5rem;
        }

        .fr-server__footer {
            margin-top: 3.5rem;
            margin-bottom: 2rem;
        }

        .fr-server__image {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            margin-bottom: 3.5rem;
        }

        .fr-server__image img {
            width: 13.25rem;
            margin: 0 auto;
        }

        .fr-h1 {
            font-size: 2rem;
            line-height: 2.5rem;
            margin-top: 0;
            margin-bottom: 1.5rem;
            font-weight: 700;
        }

        .fr-text--xl {
            font-size: 1.25rem;
            line-height: 2rem;
            margin-top: 0;
            margin-bottom: 1.5rem;
        }

        .fr-text--sm {
            font-size: 0.875rem;
            line-height: 1.5rem;
            margin-top: 0;
            margin-bottom: 1rem;
        }

        .fr-btn--tertiary {
            background-color: #f6f6f6;
            box-shadow: inset 0 0 0 1px #ddd;
            color: #000091;
        }

        .fr-btn--tertiary:hover {
            background-color: #dfdfdf;
        }

        .fr-btn--tertiary:active {
            background-color: #cfcfcf;
        }

        @media (min-width: 48em) {
            .fr-container {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
            }

            .fr-col-offset-md-1 {
                margin-left: 8.3333333333%;
            }

            .fr-col-md-6 {
                flex: 0 0 50%;
                width: 50%;
                max-width: 50%;
            }

            .fr-col-md-3 {
                flex: 0 0 25%;
                width: 25%;
                max-width: 25%;
            }

            .fr-server__image {
                margin-top: 3.5rem;
                margin-bottom: 3.5rem;
            }

            .fr-server__image img {
                width: 100%;
            }

            .fr-h1 {
                font-size: 2.5rem;
                line-height: 3rem;
            }
        }

    </style>
</head>

<body>
    <main role="main" id="content">
        <div class="fr-container">
            <div class="fr-grid-row fr-grid-row--center fr-grid-row--gutters">
                <div class="fr-server__body fr-col-12 fr-col-md-6">
                    <h1 class="fr-h1">Service indisponible</h1>
                    <p class="fr-text--xl">Le service [Nom du site] rencontre un problème, nous travaillons pour le résoudre le plus rapidement possible.</p>
                    <p class="fr-text--sm">Merci de réessayer plus tard ou de vous rendre sur nos réseaux sociaux, vous serez bientôt en mesure de réutiliser le service.</p>
                    <ul class="fr-btns-group fr-btns-group--inline fr-btns-group--sm">
                        <li>
                            <a class="fr-btn fr-btn--tertiary" href="[À MODIFIER - https://facebook.com/]">
                                <span aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                                        <path d="M12 2C6.477 2 2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.879V14.89h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.989C18.343 21.129 22 16.99 22 12c0-5.523-4.477-10-10-10Z" />
                                    </svg>
                                </span>Facebook
                            </a>
                        </li>
                        <li>
                            <a class="fr-btn fr-btn--tertiary" href="[À MODIFIER - https://twitter.com/]">
                                <span aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                                        <path d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165l-.001-.001Z" />
                                    </svg>
                                </span>Twitter
                            </a>
                        </li>
                        <li>
                            <a class="fr-btn fr-btn--tertiary" href="[À MODIFIER - https://linkedin.com/]">
                                <span aria-hidden="true">
                                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                                        <path d="M18.335 18.339H15.67v-4.177c0-.996-.02-2.278-1.39-2.278-1.389 0-1.601 1.084-1.601 2.205v4.25h-2.666V9.75h2.56v1.17h.035c.358-.674 1.228-1.387 2.528-1.387 2.7 0 3.2 1.778 3.2 4.091v4.715h-.001ZM7.003 8.575a1.546 1.546 0 0 1-1.548-1.549 1.548 1.548 0 1 1 1.547 1.549h.001Zm1.336 9.764H5.666V9.75H8.34v8.589h-.001ZM19.67 3H4.329C3.593 3 3 3.58 3 4.297v15.406C3 20.42 3.594 21 4.328 21h15.338C20.4 21 21 20.42 21 19.703V4.297C21 3.58 20.4 3 19.666 3h.004Z" />
                                    </svg>
                                </span>Linkedin
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="fr-server__image fr-col-12 fr-col-md-3 fr-col-offset-md-1">
                    <img src="data:image/png;base64,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" alt="" />
                    <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
                </div>
            </div>
        </div>
        <div class="fr-server__footer">
            <div class="fr-grid-row fr-grid-row--center">
                <img width="66px" height="24px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIQAAAAwCAMAAADnwSL2AAAAflBMVEUAAJHhAA////8QEJjv7/gwMKYgIJ+/v+RwcMFAQK1QULPf3/GPj8+vr92AgMhgYLr4v8Ofn9bPz+rjEB739/f0n6X73+HwgIfnMDz97/D5z9KoqKiKioqAgIDl5eXKysr2r7Tyj5bsYGnpQEvAwMC4uLjucHjqUFrlIC2YmJgpfk6NAAACI0lEQVRYw73YaWObMAwGYFe+zWGOQJK2uZpe+/9/cJjMW7sVlKwW+pKPPIgXWYR9p2Qu4O+qznc31zcIVsOXdWyXQxiYqmoxhIPpWgrBxQTgHmC9FKKEieqfqIOJG0IvqIOJByIoNu9kCDwQsar+nR6RA1JP9J1QgFVLj6hRxCs9QqCIIz2iAbRackSBI97IESWOWJMj7Dxg/3zYV+QIPiNYPT+8PDzu6BEsm0GsYPWyO3T0CA1zvXjc/Vid6BFmzjA8jAP0Sxxg84o9wDo9wnp72wkGsEmM4HnBb55X92kRsvGMea2L0vDYEZ6lnFdXGETNWF17ZzSEskw6XWoUUSVESCEUU0yaXMc4ZoDX9rRJh5AiD7ceP/t+XV+gji7h2+EaOZ7d4efP4VUrNJh9OkSpw2uhQgK0uTissZxxgSYiGYLnn8Z0Vqprt8ztJhnCxmBArJyPBjyax9QTU/5ufpaPvTCooW+TIuJgEroIqYh9aLBcpkXIRnvOHI+kMvTFeJivtAhV2MvFLz8+tEE4KZAxkRYhP8+NwSBKbgZDo/45xrohCe153VWvpCu/LZ3kTgOE/hjk9okQ0pT68jy++BrsW0qEy8dcqPiHYeF4MCCf4kkRXoBW4/iELHdycs/c3tEhFDSecT5cVZiPNOS0SIuofehCuHU7a4ATZSdiJtXH2YGuc9QrvxojSfs4cMJEdW8LIWwxu0V0G3qEumLHPv8H4idR9Cak2+TKegAAAABJRU5ErkJggg==" alt="Marianne">
            </div>
        </div>
    </main>
</body>

</html>

Règles d’utilisation

  • Lorsqu’une erreur est rencontrée par un utilisateur, il est important de : d’utiliser un langage clair pour expliquer ce qu’il se passe et donc éviter le jargon techniqueêtre précis pour définir clairement ce qui ne va pasproposer un contenu constructif qui permet accompagner l’utilisateur vers une solution et ne pas le laisser dans l’impasse
  • d’utiliser un langage clair pour expliquer ce qu’il se passe et donc éviter le jargon technique
  • être précis pour définir clairement ce qui ne va pas
  • proposer un contenu constructif qui permet accompagner l’utilisateur vers une solution et ne pas le laisser dans l’impasse
  • Concrètement il s’agit pour les pages d’erreur : d’afficher les éléments de navigation sur les pages d’erreur pour éviter aux utilisateurs les ruptures de navigation et l'arrivée sur des pages cul-de-sac ou l'obligation. L’en-tête et le pied de page doivent ainsi être présents, ainsi que des liens dans le contenu de la page d’erreur vers des contenus/fonctionnalités adaptés à la nature de l’erreur.l’informer sur la nature de l’erreur de décrire le fonctionnement du service et lever le doute sur un éventuel problème lié à sa connexion.
  • d’afficher les éléments de navigation sur les pages d’erreur pour éviter aux utilisateurs les ruptures de navigation et l'arrivée sur des pages cul-de-sac ou l'obligation. L’en-tête et le pied de page doivent ainsi être présents, ainsi que des liens dans le contenu de la page d’erreur vers des contenus/fonctionnalités adaptés à la nature de l’erreur.
  • l’informer sur la nature de l’erreur
  • de décrire le fonctionnement du service et lever le doute sur un éventuel problème lié à sa connexion.

Accessibilité

Exemple : 

<title>Page non trouvée - Nom du site</title>
<h1>Page non trouvée</h1>
  • Les éventuels “boutons” pointant vers les pages d’accueil et de contact doivent être des balises <a> utilisant les classes .fr-btn.
  • La structure des contenus de la page doit être cohérente et le code html conforme aux standards. Chaque composant du DSFR doit respecter les règles qui lui sont propres : contraste, intitulé, cohérence du contexte, pertinence, attributs aria, etc.

Page de connexion

Éléments en phase bêta