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.
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.
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.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.
<!-- 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