Gå til sidens indhold

Komponenter

Beskeder (Alerts)

Retningslinjer

Tilgængelighed

  • Anvend ARIA role=alert til at øge tilgængeligheden ved at markere beskeden som en ikke-interaktiv del af sidens indhold. Mærk beskeden med role=alertdialog, hvis den indeholder interaktivitet for brugeren.
  • Undgå at skjule beskeder på siden ved hjælp af fx display:none eller visibility: hidden;. De risikerer at blive læst op af en skærmlæser.

Brugervenlighed

Anvendes til

  • Beskeder (Alerts) anvendes til at give brugeren vigtig og aktuel information om fx status, fejl og opmærksomhedspunkter fx om opdateringer, o.l.
  • Anvend beskeder til at bekræfte en handling eller give besked om behov for handling.

Anvendes ikke til

  • Brug ikke beskeder til at markere fejlindtastning i et specifikt felt.
  • Brug modaldialog – ikke beskeder – til at give brugerne information om en potentielt kritisk handling. Dermed risikerer brugeren ikke at overse eller misforstå beskeden.

Vejledning

  • Brug kun beskeder, når det er reelt nødvendigt og meningsfuldt.
  • Gør informationen 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.

Standard

<div class="container">

    <div class="alert alert-info " role="alert"
        aria-label="Beskedbox der viser information">
        <div class="alert-body">
            <p class="alert-heading ">Informativ besked</p>
            <p class="alert-text">Lorem ipsum dolor sit amet, Lorem ipsum
                dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum
                dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum
                dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod.</p>

        </div>
    </div>

    <div class="alert alert-success " role="alert"
        aria-label="Beskedbox der viser succes">
        <div class="alert-body">
            <p class="alert-heading ">Succesmeddelelse</p>
            <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
                error sit voluptatem accusantium doloremque laudantium.</p>

        </div>
    </div>

    <div class="alert alert-warning " role="alert"
        aria-label="Beskedbox der viser en advarsel">
        <div class="alert-body">
            <p class="alert-heading ">Advarsel</p>
            <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
                error sit voluptatem accusantium doloremque laudantium.</p>

        </div>
    </div>

    <div class="alert alert-error " role="alert"
        aria-label="Beskedbox der viser en fejlmeddelselse">
        <div class="alert-body">
            <p class="alert-heading ">Fejlbesked</p>
            <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
                error sit voluptatem accusantium doloremque laudantium.</p>

        </div>
    </div>

</div>

Beskeder med ikon

<div class="container">

    <div class="alert alert-info alert--show-icon " role="alert"
        aria-label="Beskedbox der viser information">
        <div class="alert-body">
            <p class="alert-heading ">Informativ besked - med ikon</p>
            <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
                error sit voluptatem accusantium doloremque laudantium.</p>

        </div>
    </div>

    <div class="alert alert-success alert--show-icon " role="alert"
        aria-label="Beskedbox der viser succes">
        <div class="alert-body">
            <p class="alert-heading ">Succesmeddelelse - med ikon</p>
            <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
                error sit voluptatem accusantium doloremque laudantium.</p>

        </div>
    </div>

    <div class="alert alert-warning alert--show-icon " role="alert"
        aria-label="Beskedbox der viser en advarsel">
        <div class="alert-body">
            <p class="alert-heading ">Advarsel - med ikon</p>
            <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
                error sit voluptatem accusantium doloremque laudantium.</p>

        </div>
    </div>

    <div class="alert alert-error alert--show-icon " role="alert"
        aria-label="Beskedbox der viser en fejlmeddelselse">
        <div class="alert-body">
            <p class="alert-heading ">Fejlbesked - med ikon</p>
            <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
                error sit voluptatem accusantium doloremque laudantium.</p>

        </div>
    </div>

</div>

Forskellige teksteksempler

<div class="container">

    <div class="alert alert-info alert--show-icon " role="alert"
        aria-label="Beskedbox der viser information">
        <div class="alert-body">
            <p class="alert-heading ">Informativ besked - kun overskrift
            </p>
            <p class="alert-text"></p>

        </div>
    </div>

    <div class="alert alert-info " role="alert"
        aria-label="Beskedbox der viser information">
        <div class="alert-body">
            <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
                error sit voluptatem accusantium doloremque laudantium.</p>

        </div>
    </div>

    <div class="alert alert-info alert--paragraph " role="alert"
        aria-label="Beskedbox der viser information">
        <div class="alert-body">
            <p class="alert-heading ">Informativ besked - tekstafsnit</p>
            <p class="alert-text">Multi line. Sed ut perspiciatis unde
                omnis iste natus error sit voluptatem accusantium
                doloremque laudantium, totam rem Nemo enim ipsam voluptatem
                quia voluptas sit aspernatur aut odit aut fugit, sed quia
                consequuntur magni dolores eos qui atione voluptatem sequi
                nesciunt. Neque porro quisquam est, qui doloremipsa quae ab
                illo inventore veritatis et quasi architecto beatae vitae
                dicta sunt explicabo.</p>

        </div>
    </div>

</div>

Beskeder med lukknap

<div class="container">

    <div class="alert alert-info  has-close" role="alert"
        aria-label="Beskedbox der viser information">
        <div class="alert-body">
            <p class="alert-heading  pr-7">Informativ besked</p><a
                href="javascript:void(0);"
                class="alert-close"><svg class="icon-svg" aria-hidden="true" focusable="false" tabindex="-1"><use xlink:href="#close"></use></svg>Luk</a>
            <p class="alert-text">Lorem ipsum dolor sit amet, Lorem ipsum
                dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum
                dolor sit amet, Lorem ipsum dolor sit amet, Lorem ipsum
                dolor sit amet, consectetur adipiscing elit, sed do
                eiusmod.</p>

        </div>
    </div>

    <div class="alert alert-success  has-close" role="alert"
        aria-label="Beskedbox der viser succes">
        <div class="alert-body">
            <p class="alert-heading  pr-7">Succesmeddelelse</p><a
                href="javascript:void(0);"
                class="alert-close"><svg class="icon-svg" aria-hidden="true" focusable="false" tabindex="-1"><use xlink:href="#close"></use></svg>Luk</a>
            <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
                error sit voluptatem accusantium doloremque laudantium.</p>

        </div>
    </div>

    <div class="alert alert-warning  has-close" role="alert"
        aria-label="Beskedbox der viser en advarsel">
        <div class="alert-body">
            <p class="alert-heading  pr-7">Advarsel</p><a
                href="javascript:void(0);"
                class="alert-close"><svg class="icon-svg" aria-hidden="true" focusable="false" tabindex="-1"><use xlink:href="#close"></use></svg>Luk</a>
            <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
                error sit voluptatem accusantium doloremque laudantium.</p>

        </div>
    </div>

    <div class="alert alert-error  has-close" role="alert"
        aria-label="Beskedbox der viser en fejlmeddelselse">
        <div class="alert-body">
            <p class="alert-heading  pr-7">Fejlbesked</p><a
                href="javascript:void(0);"
                class="alert-close"><svg class="icon-svg" aria-hidden="true" focusable="false" tabindex="-1"><use xlink:href="#close"></use></svg>Luk</a>
            <p class="alert-text">Sed ut perspiciatis unde omnis iste natus
                error sit voluptatem accusantium doloremque laudantium.</p>

        </div>
    </div>

</div>