https://github.com/timwright12/a11y-modal
This plugin was created to help you implement accessible modal dialogs with minimal work, because everyone is tired of using crappy UI plugins that damage the underlying experience.
https://github.com/timwright12/a11y-modal
Last synced: 10 months ago
JSON representation
This plugin was created to help you implement accessible modal dialogs with minimal work, because everyone is tired of using crappy UI plugins that damage the underlying experience.
- Host: GitHub
- URL: https://github.com/timwright12/a11y-modal
- Owner: timwright12
- License: mit
- Created: 2016-09-13T19:50:23.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2016-10-03T14:57:48.000Z (over 9 years ago)
- Last Synced: 2024-07-31T18:24:39.361Z (almost 2 years ago)
- Language: JavaScript
- Homepage: https://timwright12.github.io/a11y-modal/
- Size: 20.5 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Accessible Modal Dialog
This plugin was converted from a jQuery plugin originally written by [@scottohara](https://github.com/scottaohara/). You can view the original code in [Scott's Accessible Component Library](https://github.com/scottaohara/accessible-components). Pretty much everything is the same, you just don't need jQuery.
It was created to help you implement accessible modal dialogs with minimal work, because everyone is tired of using crappy UI plugins that damage the underlying experience. [Check out the demo](https://timwright12.github.io/a11y-modal/)
## Example HTML You'll Need
```html
Open Modal with a Link
```
## Contributing
1. Fork it!
2. Create your feature branch: `git checkout -b feature/my-new-feature`
3. Commit your changes: `git commit -m 'Added some great feature!'`
4. Push to the branch: `git push origin feature/my-new-feature`
5. Submit a pull request
## Credits
- [Scott O'Hara](https://github.com/scottaohara/) ( [@scottohara](https://twitter.com/scottohara) )
- [Tim Wright](http://github.com/timwright12) ( [@csskarma](http://twitter.com/csskarma) )
## License
Code and documentation are released under the MIT license.
## Browser support
| Feature | Chrome | Firefox | Internet Explorer | Safari |
|---------------|--------|---------|-------------------|--------|
| Basic Support | Latest | Latest | 9+ | 5.1+ |
Chrome and Firefox update too much to go back and test each version, if you need a certain on tested, just let me know. Or if there's a bug somewhere, feel free to file an issue and I'll fix it.
## Further Reading
- [Using ARIA role=dialog to implement a modal dialog box](https://www.w3.org/WAI/GL/wiki/Using_ARIA_role%3Ddialog_to_implement_a_modal_dialog_box)
- [Managing Focus for Modal Dialogs](https://www.w3.org/WAI/GL/wiki/Managing_focus_for_modal_dialogs)
- [Making Modal Windows Better For Everyone](https://www.smashingmagazine.com/2014/09/making-modal-windows-better-for-everyone/)
- [jQuery Accessible Modal Window](http://a11y.nicolas-hoffmann.net/modal/)
- [The Incredible Accessible Modal Window](https://github.com/gdkraus/accessible-modal-dialog)