Een dialog is iets wat bijna iedereen kent van het internet: een venster dat plotseling verschijnt bovenop een webpagina. Denk aan een melding die vraagt of je zeker weet dat je iets wilt verwijderen, of een inlogscherm dat opent zonder dat je naar een nieuwe pagina gaat. Achter dat soort pop-upvensters zit vaak het HTML-element dat precies hiervoor is gemaakt. Het heet het dialog-element en het is een standaard onderdeel van moderne webbrowsers.
Wat het dialog-element doet en waarom het bestaat
Het HTML dialog-element is bedoeld om een venster te tonen dat losstaat van de rest van een pagina. Dat venster kan modaal zijn of niet-modaal. Een modaal venster blokkeert de rest van de pagina. Je kunt dan niet klikken op andere onderdelen totdat je het venster sluit. Een niet-modaal venster zweeft boven de pagina, maar je kunt de achtergrond nog gewoon gebruiken. Vroeger maakten webontwikkelaars zulke vensters met eigen code, vaak met behulp van JavaScript-bibliotheken. Dat kostte veel tijd en zorgde ook regelmatig voor fouten. Doordat het dialog-element nu ingebouwd zit in HTML, is het makkelijker te gebruiken en werkt het beter samen met de browser.
Hoe het dialog-element technisch in elkaar zit
Een dialoogvenster maak je met de tag en je sluit het af met de bijbehorende sluitingstag. Standaard is het venster onzichtbaar. Met een attribuut genaamd open kun je het zichtbaar maken in de HTML zelf. In de praktijk gebruik je JavaScript om het venster te openen en te sluiten. Daarvoor zijn twee methoden beschikbaar: showModal() en show(). De eerste opent het als een modaal venster, de tweede als een niet-modaal venster. Om het te sluiten gebruik je close(). Het venster heeft ook een speciale achtergrondlaag die automatisch verschijnt bij een modaal venster. Die laag heet de backdrop en kun je met CSS opmaken. Zo kun je de achtergrond van een pagina donkerder maken als het venster open is, wat een veelgebruikt effect is op moderne websites.
Toegankelijkheid bij het gebruik van een dialoogvenster
Toegankelijkheid is een belangrijk aandachtspunt bij pop-upvensters. Het HTML dialog-element helpt hierbij, maar het lost niet alles automatisch op. Wanneer je showModal() gebruikt, verplaatst de browser de toetsenbordfocus automatisch naar het venster. Daardoor kunnen mensen die geen muis gebruiken toch door het venster navigeren. Ook screenreaders, programma’s die tekst voorlezen voor mensen met een visuele beperking, krijgen mee dat er een dialoogvenster is geopend. Maar een webontwikkelaar moet zelf nog een aantal dingen goed instellen. Zo is het verstandig om altijd een duidelijke sluitknop op te nemen. Ook moet de focus na het sluiten van het venster terugkeren naar het element dat het venster opende. Dat klinkt als een detail, maar het maakt een groot verschil voor mensen die de pagina niet zien en alleen via het toetsenbord werken.
Wanneer je een dialoogvenster wel en niet gebruikt
Niet elk bericht of elke melding op een website hoeft een pop-upvenster te zijn. Een dialoogvenster is geschikt voor situaties waarbij de gebruiker een keuze moet maken voordat iets doorgaat, zoals het bevestigen van een actie of het invullen van een kort formulier. Het past ook goed bij situaties waarbij extra informatie nodig is zonder dat iemand de huidige pagina hoeft te verlaten. Wat minder geschikt is: een venster gebruiken voor informatie die iemand kan negeren of die gewoon op de pagina zelf past. Te veel pop-upvensters maken een website onprettig in gebruik. Mensen raken ervan afgeleid en sluiten vensters soms weg voordat ze de inhoud hebben gelezen. Het is dan ook verstandig om een pop-upvenster alleen te gebruiken als het echt nodig is dat iemand er actief iets mee doet.
Veelgestelde vragen
Wat is het verschil tussen een modaal en een niet-modaal venster?
Een modaal venster blokkeert de rest van de pagina. Je kunt niets anders doen totdat je het venster hebt gesloten. Een niet-modaal venster zweeft ook boven de pagina, maar je kunt de rest van de pagina nog gewoon gebruiken terwijl het venster open is.
Werkt het dialog-element in alle browsers?
Het dialog-element wordt ondersteund door alle grote moderne browsers, zoals Chrome, Firefox, Safari en Edge. Oudere versies van sommige browsers kennen het element niet, maar voor de meeste gebruikers werkt het gewoon.
Hoe zorg ik dat een dialoogvenster toegankelijk is voor toetsenbordgebruikers?
Als je showModal() gebruikt, verplaatst de browser de toetsenbordfocus automatisch naar het venster. Zorg daarna zelf voor een duidelijke sluitknop en stel in dat de focus na het sluiten terugkeert naar het element dat het venster opende. Zo kunnen ook mensen zonder muis het venster goed gebruiken.
Kan ik de achtergrond achter een modaal venster opmaken?
Ja, dat kan. Het dialog-element heeft een speciale achtergrondlaag die de backdrop heet. Met CSS kun je deze laag een kleur of doorzichtigheid geven. Zo maak je de pagina achter het venster donkerder of waziger.
