Modal with focus handling and basic ARIA
The button will launch a modal dialog.
Includes the basic/naive focus management, but more importantly has role="dialog", aria-labelledby="..." and aria-describedby="..." on the modal.
The button will launch a modal dialog.
Includes the basic/naive focus management, but more importantly has role="dialog", aria-labelledby="..." and aria-describedby="..." on the modal.
This is a modal dialog example.
In this case, the dialog mainly conveys text.
Note: some assistive technologies (currently, NVDA) take the hint from role="dialog" to automatically hide what's not in the dialog. Others don't, so you can still navigate out of the dialog (e.g. with heading navigation)...