Modal: Dialog

Component preview opent in nieuw tabblad

Modals onderbreken de flow van de gebruiker en vragen om actie. Ze zijn geschikt wanneer de gebruiker zijn aandacht moet richten op belangrijke informatie. Bijvoorbeeld een modal met een waarschuwing om te voorkomen dat gebruikers per ongeluk een destructieve actie uitvoeren zonder dat ze het resultaat begrijpen.

Wanneer te gebruiken

  • Onderbreken: Gebruik een modal om informatie op te vragen of weer te geven die nodig is om verder te gaan met een door de gebruiker gestart proces.
  • Informeren: Gebruik een modal om de gebruiker te informeren, bijvoorbeeld over belangrijke waarschuwingen, een systeemfout of gevolg van een gebruikersactie.
  • Bevestigen: Gebruik een modal om een beslissing van de gebruiker af te dwingen, bijvoorbeeld met de tekst β€œWeet u het zeker?””. Beschrijf duidelijk welke actie wordt bevestigd. Leg ook de mogelijke gevolgen uit.

Wanneer niet te gebruiken

Modals zijn zeer storend en blokkeren de flow totdat de gebruiker ze verwijdert. Gebruik een modal alleen als de informatie een directe relatie heeft met de huidige taak.

Gebruik een modal alleen voor simpele interacties. Vermijd modals voor complexe interacties of besluitvorming waar aanvullende informatie nodig is die niet in de modal staat. Plaats dus geen lange formulieren of β€˜check-out’ stappen in een modal.

Hoe te gebruiken

  • Houd de titel eenvoudig, zodat de gebruiker direct begrijpt wat er van hem wordt gevraagd door de titel te lezen.
  • Zorg voor korte en bondige teksten in de modal.
  • Button labels moeten de gebruiker duidelijk vertellen wat er gebeurt als ze erop klikken.
  • Gebruik geen modal bovenop een ander modal. Als de flow een tweede modal vereist is die vaak te complex om in een modal te plaatsen.

Gedrag en toegankelijkheid

Algemeen

  • aria-label of aria-labelledby geeft de modal een toegankelijke naam.
  • aria-describedby verwijst naar de inhoud waarin het doel van de modal wordt beschreven. Daarvoor moet er vaste tekst aanwezig zijn die het doel beschrijft.
  • Wanneer een modal verschijnt, moet de focus verplaatst worden naar de modal. Als er interactieve elementen in de modal staan, wordt de focus op het eerste element gezet.
  • De tab focus moet beperkt zijn tot de modal (keyboard trap).
  • Een modal kan gesloten worden door op de sluitknop te klikken. Ook kan een modal gesloten worden door op de ESC-toets te drukken of door buiten de modal te klikken.
  • Wanneer de modal wordt gesloten, moet de focus, indien mogelijk, teruggezet worden naar de positie die hij had voordat de modal werd geopend.
  • Valideer eventuele invoer van een gebruiker voordat de modal wordt gesloten. Als een validatiefout optreed, moet de modal open blijven en wordt er een alert en/of inline foutmelding gegeven bij het betreffende invoerveld.

Modal Dialog roles: dialog vs alertdialog

Is een modal bedoeld om gebruikers te onderbreken met dringende informatie, details of acties? Gebruik dan de role="alertdialog". In andere gevallen gebruik je role="dialog".

In tegenstelling tot gewone meldingen moet er tenminste één interactief element in een alertdialog staan. Zet de focus daarop als de modal verschijnt. Meestal is dit een actie om te bevestigen, sluiten of annuleren. Er kunnen ook andere interactieve elementen in een alertdialog staan, zoals invoervelden, checkboxen en radio selecties. Waar de focus gezet moet worden is afhankelijk van het doel van de modal.

Bronvermelding

<!-- When modal is open add .dso-modal-open to body -->

<body class="dso-modal-open">
    <!-- Modal markup. Can be placed anywhere inside <body> -->
    <div class="dso-modal" tabindex="-1" role="dialog" aria-labelledby="modal-dialog">
        <div class="dso-dialog" role="document">

            <div class="dso-header">
                <h2 id="modal-dialog">Activiteit toevoegen</h2>
                <button type="button" class="dso-close">
                    <span class="sr-only">Sluiten</span>
                </button>
            </div>

            <div class="dso-body">

                <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

            </div>

            <div class="dso-footer">

                <button type="button" class="dso-tertiary"><span>Annuleren</span></button>

                <button type="submit" class="dso-primary"><span>Toevoegen</span></button>

            </div>

        </div>
    </div>

    <section class="dso-banner alert-danger" role="alert">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="dso-rich-content">
                        <h2>Storingsmelding:</h2>
                        <p>
                            Op dit moment ervaren wij een storing in de Vergunningcheck. U kunt wel een aanvraag of melding indienen.
                        </p>
                    </div>
                    <button type="button" class="dso-tertiary">
                        <span class="sr-only">Sluiten storingsmelding</span><svg class="di di-times">
                            <use href="../../dso-icons.svg#times" />
                        </svg>

                    </button>
                </div>
            </div>
        </div>
    </section>

    <div class="container">
        <!-- Page content -->

        <form>

            <fieldset>
                <legend>Contact</legend>

                <div class="form-group dso-input dso-input-text dso-required">
                    <div class="dso-label-container">
                        <label for="voornaam" class="control-label">
                            Voornaam
                        </label>

                    </div>
                    <div class="dso-field-container">

                        <input type="text" id="voornaam" class="form-control" required>

                    </div>
                </div>

                <div class="form-group dso-input dso-input-text">
                    <div class="dso-label-container">
                        <label for="achternaam" class="control-label">
                            Achternaam
                        </label>

                    </div>
                    <div class="dso-field-container">

                        <input type="text" id="achternaam" class="form-control" aria-describedby="helpTextId_achternaam">

                        <p class="dso-help-block" id="helpTextId_achternaam">Mag ook de familienaam zijn</p>

                    </div>
                </div>

                <div class="form-group dso-static">
                    <div class="dso-label-container">
                        <span class="control-label">Geslacht</span>

                    </div>
                    <div class="dso-field-container">
                        Man

                    </div>
                </div>

            </fieldset>

        </form>

    </div>

    <script type="module" src="../../@dso-toolkit/core/dso-toolkit/dso-toolkit.esm.js"></script>
    <script nomodule src="../../@dso-toolkit/core/dso-toolkit/dso-toolkit.js"></script>

</body>
<!-- When modal is open add .dso-modal-open to body -->
<body {{ className('dso-modal-open') }}>
  <!-- Modal markup. Can be placed anywhere inside <body> -->
  {% render '@dialog', {body: body, dialog: dialog, progress: progress} %}

  <section class="dso-banner alert-danger" role="alert">
    <div class="container">
      <div class="row">
        <div class="col-sm-12">
          <div class="dso-rich-content">
            <h2>Storingsmelding:</h2>
            <p>
              Op dit moment ervaren wij een storing in de Vergunningcheck. U kunt wel een aanvraag of melding indienen.
            </p>
          </div>
          <button type="button" class="dso-tertiary">
            <span class="sr-only">Sluiten storingsmelding</span>{% render '@icon-css', {icon: 'times'} %}
          </button>
        </div>
      </div>
    </div>
  </section>

  <div class="container">
    <!-- Page content -->
    {% render '@form', {fieldsets: fieldsets} %}
  </div>

  <script type="module" src="{{ '/@dso-toolkit/core/dso-toolkit/dso-toolkit.esm.js' | path }}"></script>
  <script nomodule src="{{ '/@dso-toolkit/core/dso-toolkit/dso-toolkit.js' | path }}"></script>

</body>
__title: Dialog
body: >-
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
  ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
  parturient montes, nascetur ridiculus mus.
fieldsets:
  - legend: Contact
    groups:
      - id: voornaam
        inputType: input
        type: text
        label: Voornaam
        required: true
      - id: achternaam
        inputType: input
        type: text
        label: Achternaam
        helpText: Mag ook de familienaam zijn
      - inputType: static
        label: Geslacht
        value: Man
dialog:
  id: modal-dialog
  heading: Activiteit toevoegen
  role: dialog
  buttons:
    - name: cancelButton
      type: button
      modifier: dso-tertiary
      label: Annuleren
    - name: confirmButton
      type: submit
      modifier: dso-primary
      label: Toevoegen