Toastbesked

Sådan bruges komponenten

Anvendes til

At gøre brugeren opmærksom på vigtige oplysninger, ofte relateret til brugerens aktuelle aktivitet.

Anvendes ikke til

Brug Beskeder (alerts), hvis en besked skal placeres som en del af indholdet på siden.

Brug ikke toastbeskeder til at markere fejlindtastning i et specifikt felt. Brug da fejlmeddelelser i stedet.

Brug modal dialog – ikke toastbeskeder – til at give brugerne information om en potentielt kritisk handling. Dermed risikerer brugeren ikke at overse eller misforstå beskeden.

Kritiske beskeder eller lange beskeder, hvis toastbeskeden er tidsindstillet og forsvinder automatisk. Det gør det vanskeligt for brugere, som fx gør brug af hjælpeteknologier, at læse meddelelsen før den forsvinder.

Vejledning

Til forskel fra Beskeder (alerts) som er placeret som en del af sideindholdet, placeres toastbeskeder ovenpå selve siden.

Vær opmærksom på at toastbeskeder hurtigt kan gå fra at opfattes som nyttige til at opfattes som anmassende og påtrængende, så overvej nøje om det er denne komponent, der er det rigtige valg.

Gør informationen i toastbeskeden aktiv og handlingsanvisende, så brugeren forstår, hvad der er behov for eller hvad den aktuelle status er.

Brug ord og begreber, som brugeren kan genkende fra løsningen.

Skriv kort og præcist og undgå tekniske beskeder, der kan forvirre brugeren.

Brug beskeder til at øge brugerens forståelse for løsningen.

Tilføj ikke interaktivt indhold som links ol. på toastbeskeden, da der kan opstå udfordringer i forbindelse med tilgængelighed.

Når toastbeskeden vises, kan man lade den forsvinde igen, men vær opmærksom på at efterleve succeskriteriet 2.2.1 (W3C (WCAG 2.1): Understanding SC 2.2.1: Timing Adjustable (Level A)).

Vis den nyeste toastbesked øverst. Hvis der kan være flere toastbeskeder vist ad gangen og rækkefølgen er vigtig, så tilføj et tidsstempel til toastbeskeden.

Varianter

Succes

Advarsel

Fejl

Information

Uden brødtekst

Installation

HTML Struktur

<div class="toast toast-info show" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p><span class="sr-only">Information:
            </span><strong id="notification-info-heading">Du har fået en besked</strong></p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium.</p>
        <button class="toast-close" aria-describedby="notification-info-heading">Luk</button>
    </div>
</div>

Kopiér ovenstående kode for at indsætte én toastbesked.

Bemærk at ovenstående har class show som default. Der følger en animation med når en toastbesked vises, som kommer ved at man ændrer klasserne i følgende flow:

1. hide
2. showing
3. show

Ved at bruge nedenstående javascript vil dette komme ud af boksen. Men bemærk at en toastbesked bør have class hide fra start.

Placering

Toastbeskeder placeres i en div med class toast-container og attributter aria-live="assertive", aria-atomic="false" og aria-relevant="additions". Denne div placeres som første element i <main>.

<main id="main-content">
    <div class="toast-container" aria-live="assertive" aria-atomic="false" aria-relevant="additions">
        <!-- Placer toastbeskeder her -->
    </div>
    ...
</main>

Se fungerende eksempel på implementering af toastbesked

Javascript

Der medfølger Javascript til komponenten, som man kan vælge at bruge.

Vis

Når en toastbesked vises, ændres class fra hide til showing og til sidst show.

let toast = new DKFDS.Toast(document.getElementById('TOAST-ID'));
toast.show();

Skjul

Når en toastbesked skjules, ændres class fra show til hide.

let toast = new DKFDS.Toast(document.getElementById('TOAST-ID'));
toast.hide();

Succes

<div class="toast toast-success show" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p><span class="sr-only">Succes:
            </span><strong id="notification-success-heading">Din ansøgning er afsendt</strong>
        </p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium.</p>
        <button class="toast-close"
            aria-describedby="notification-success-heading">Luk</button>
    </div>
</div>

Advarsel

<div class="toast toast-warning show" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p><span class="sr-only">Advarsel:
            </span><strong id="notification-warning-heading">Dette er en advarsel</strong></p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium.</p>
        <button class="toast-close"
            aria-describedby="notification-warning-heading">Luk</button>
    </div>
</div>

Fejl

<div class="toast toast-error show" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p><span class="sr-only">Fejl:
            </span><strong id="notification-error-heading">Der opstod en fejl</strong></p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium.</p>
        <button class="toast-close" aria-describedby="notification-error-heading">Luk</button>
    </div>
</div>

Information

<div class="toast toast-info show" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p><span class="sr-only">Information:
            </span><strong id="notification-info-heading">Du har fået en besked</strong></p>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
            doloremque laudantium.</p>
        <button class="toast-close" aria-describedby="notification-info-heading">Luk</button>
    </div>
</div>