🆕 Modùles de page d'erreur

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é

  • La page doit ĂȘtre structurĂ©e correctement comme les autres pages (ARIA Authoring Practices Guide) et avoir une hiĂ©rarchie de titre correcte.

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.

🆕 ModĂšle de page de crĂ©ation de compte

🆕 Modùle de page de connexion