Dialogs, dialogs, dialogs!
Heeft u een dialog nodig, dan bent u hier aan goede adres!
Voorbeeld HTML content
Dialog die direct opent wanneer de pagina opent
...
De inhoud van een alert dialog
...
Heading levels in een dialog
Heeft u een dialog nodig, dan bent u hier aan goede adres!
Positie van de <dialog> in de DOM
- De impact van positie in de DOM op de koppenstructuur
- De impact van positie in de DOM op de focusvolgorde
Variant 1
Variant 1 wordt door VoiceOver op macOS 15.7.2 wordt als volgt voorgelezen:
Je bent uitgelogd, and 2 more items, alert dialogue, OK, button
Variant 2
Variant 2 wordt door VoiceOver op macOS 15.7.2 wordt als volgt voorgelezen:
Variant 3
Variant 4
OK, Button, Je bent uitgelogd, Je was even iets anders aan het doen, daarom ben je uitgelogd, alert dialogue
Voorbeeld: Dialog met live region
- Hoe ga je om met de veranderende inhoud?
- Werkt dit met
role="alertdialog"?
Voorbeeld: Dialog met 1 Text Input
Voorbeeld: Dialog bij onbeforeunload event
-
Deze dialog kan niet daadwerkelijk getriggered worden door de
beforeunloadevent, omdat die alleen een native browser dialog kan tonen. -
Zo'n dialog zou getriggered moeten worden door een actie van een gebruiker, waarvan duidelijk is dat het effect zal zijn dat de pagina verlaten wordt. Bijvoorbeeld, door het klikken op een link.
Ga naar example.com om de pagina te verlaten (en trigger
beforeunload).
Ga naar example.com
om de pagina te verlaten, en doe clickEvent.preventDefault() (a met
span).
Ga naar example.com
om de pagina te verlaten, en doe clickEvent.preventDefault().