Ga naar hoofdinhoud

Dialog

Voorbeeld HTML
<div class="rvo-dialog__background">
  <dialog
    class="rvo-dialog rvo-dialog--wit rvo-dialog--centered-dialog rvo-dialog--centered-dialog--md"
    aria-expanded="true"
    aria-label="Dialog aria label"
  >
    <div class="rvo-dialog__close">
      <button
        class="utrecht-button utrecht-button--subtle rvo-dialog__close-button utrecht-button--rvo-md"
        type="button"
      >
        <span
          class="utrecht-icon rvo-icon rvo-icon-kruis rvo-icon--md rvo-icon--hemelblauw rvo-dialog__close-icon"
          role="img"
          aria-label="Kruis"
        ></span>
        Sluiten
      </button>
    </div>
    <div class="rvo-dialog__content"></div>
  </dialog>
</div>
Open in nieuwe tab

Dialog

Een dialog verschijnt over de hoofd content van de pagina heen. Het doel is om de interactie met de gebruiker van de hoofd content te verplaatsen naar de dialoog. De hoofd content is slechts nog deels zichtbaar. Een dialog kent ook een modal variant waar de gebruiker geforceerd wordt de taak in de modal dialog uit te voeren.

Wanneer gebruik je het component​

Dialogs zijn bedoeld voor situaties waarin de normale taakuitvoering van de gebruiker moet worden onderbroken om de aandacht op een belangrijke waarschuwing of keuze te richten zoals het verwijderen van belangrijke gegevens.

Anatomie van het component​

Een dialog bestaat uit:

  • Een venster met daarin content die de aandacht van de gebruiker vereist
  • Een betekenisvolle kop (H2) die de taak beschrijft die de dialog bevat
  • Een knop om de dialoog te sluiten
  • Bij gebruik van de modal optie: Een achtergrondlaag die interactie met de hoofd content niet mogelijk maakt

Richtlijnen​

  • Gebruik een dialoog als de gebruiker alleen verder kan als de taak binnen het dialoog uitgevoerd is. Bijvoorbeeld inloggen voordat de gebruiker een bepaald onderdeel van de applicatie kan bekijken.
  • Gebruik geen dialoog voor optionele informatie zoals instructies bij het invoeren van formuliervelden.
  • Toon een dialoogvenster alleen nadat een gebruiker deze heeft geactiveerd (bijvoorbeeld door op een knop te drukken) en zorg ervoor dat de inhoud contextueel is ten opzichte van de gebruikersactie.
  • Toon geen dialoogvenster als een gebruiker geen specifieke actie op de pagina heeft uitgevoerd. Dus een dialoogvenster kan nooit uit het niets tevoorschijn komen.
  • Dialoogvenster moet focusbaar zijn met een toetsenbord. Als bijvoorbeeld een knop het dialoogvenster activeert, moet dat element ook met het toetsenbord te bedienen zijn.
  • De gebruiker informeren dat er een waarschuwingsdialoog is geopend.
  • Focus beperken tot het dialoogvenster.
  • Focus terugzetten naar het element dat focus had voordat het dialoogvenster werd geopend. Dus bijvoorbeeld op de openen knop van een dialoogvenster en niet de bovenkant van de webpagina.
  • Sluiten mogelijk maken. Wees duidelijk hoe te sluiten. Voorbeelden van manieren om te sluiten zijn het indrukken van Esc en een sluitknop.
  • Onderliggende pagina mag er niet bruikbaar uitzien. Vervaag bijvoorbeeld de onderliggende pagina.
  • Voorkom dat de gebruiker op de onderliggende pagina zoekt en focus op krijgt zolang het dialoogvenster geopend is.
  • Voorkom scrollen van de onderliggende pagina.
  • Het dialoogvenster moet altijd zichtbaar zijn, ongeacht scrollen, schermgrootte of wijzigingen in de oriëntatie.
  • Vermijd het overmatig gebruiken van dialoogvensters om elke beslissing in een taak onder de aandacht van de gebruiker te brengen. Teveel dialoogvensters kan bij een gebruiker de reactie opwekken om de dialoogvensters te negeren of weg te klikken.
  • Plaats geen essentiële en belangrijke informatie in een dialoogvenster. Door deze informatie min of meer te verstoppen in een dialoogvenster kunnen gebruikers deze informatie missen.

Rijkshuisstijl​

Vanuit de Rijkshuisstijl zijn er geen richtlijnen wat betreft dialogen.

Bronnen​