Menu Uno designsysteem 5.3.4

Modal

Standaard modal

Een modal bestaat uit een header, body en footer. De footer en de body zijn optioneel.

Toegankelijkheid

Een modal heeft standaard een aantal potentiële toegankelijkheidsissues. Hier een aantal aanwijzigingen

  • Een modal is voor blinde mensen niet altijd even duidelijk. Neem daarom een extra toelichting op. Geef die een class="screenreader-only" zodat die alleen door screenreaders gezien wordt.
  • Geef de toelichting een id die terugkomt in de aria-describedby van de modal. Dan wordt de toelichting meteen voorgelezen als de modal geopend wordt.
  • Geef de modal__body een tabindex="0".
    De tabindex zorgt er voor dat de tekst met toetsenbord bereikbaar is, wat noodzakelijk is om lange teksten met scrollbars met toetsenbord zichtbaar te kunnen maken.
  • Geef de section een role="document" .
    De role zorgt er voor dat de tekst van de modal voorgelezen wordt en er makkelijk in genavigeerd kan worden.

NB: De escape knop annuleert en sluit het venster.

Het titel element kan ook weggelaten worden, maar het is toch raadzaam die te behouden omdat de titel kernachtig het doel aan de gebruiker duidelijk kan maken.

modal met backdrop

De backdrop zorgt ervoor dat de focus op de modal komt te liggen. De gebruiker wordt niet afgeleid door informatie achter de modal.

Javascript

Open een modal door op de knop te klikken

Toegankelijkheids tip: De tekst van de modal body is zo lang, dat er scrollbars komen. De scrollbar zijn niet automatisch met het toetsenbord te bereiken. Zorg er in dat geval voor dat de div een tabindex = "0" krijgt, zodat het focus kan krijgen en de tekst met de cursortoetsen te verplaatsen is.

<script>
            var myModal;
            // Load modal component
            System.import('/uno/components/modal/modal.js').then(function (module) {
                myModal = new module.Modal(document.getElementById('myModal'));
            });
        
            // Called when the user clicks the button
            function openModal() {
                myModal.open();
            }
        </script>

Modal voor afbeeldingen

Hoogte en breedte

Om de afmetingen van een modal aan te passen kunnen er een aantal modifiers worden toegepast op de HTML klasse.

Hoogte instellen: Door het toevoegen van de volgende klasses kan de hoogte van de modal worden ingesteld. 

class="modal--height-xl" // Een modal die het hele scherm vult
class="modal--height-l" // Een modal die 75% van het scherm vult
class="modal--height-s" // Een modal die 40% van het scherm vult

Breedte instellen: Door het toevoegen van de volgende klasses kan de breedte van de modal worden ingesteld. 

class="modal--width-xl" // Een modal die het hele scherm vult
class="modal--width-l" // Een modal die 75% van het scherm vult
class="modal--width-s" // Een modal die 40% van het scherm vult

Benodigde stylesheets

  • /uno/components/modal/modal.css
  • /uno/components/button/button.css
  • /uno/components/table/table.css