Modal Dialog Example 2
Example of an accessible modal with resizing and progressive enhancement.
Go To Search
Improvements/differences from original version:
- Button now looks like a button.
- Spacebar invokes button behavior.
- Focus element now focused upon opening modal rather than the container.
- Code to maintain focus is much lighter and now supports Shift+Tab.
- Added aria-modal=true attribute (ARIA 1.1)
- Added aria-haspopup=dialog attribute (ARIA 1.1)
- Note: In the following screen reader/browser combinations, aria-modal worked well but aria-haspopup did not (still announced as menu popup): VO Mac OS 10.12.6 + Safari 12.02; JAWS 18 + IE11; NVDA 2018.3 + FFX 60.