https://github.com/prolific-digital/bare-modal
Bare Modal is a lightweight JS library for accessible modals using the `<dialog>` tag. Features automatic bindings, cookie tracking, timed displays, and WCAG compliance for enhanced user engagement and accessibility.
https://github.com/prolific-digital/bare-modal
accessibility bare easy-to-use html5 javascript modal native
Last synced: 3 months ago
JSON representation
Bare Modal is a lightweight JS library for accessible modals using the `<dialog>` tag. Features automatic bindings, cookie tracking, timed displays, and WCAG compliance for enhanced user engagement and accessibility.
- Host: GitHub
- URL: https://github.com/prolific-digital/bare-modal
- Owner: prolific-digital
- License: mit
- Created: 2024-02-28T21:42:25.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-03-06T19:45:38.000Z (over 1 year ago)
- Last Synced: 2025-01-29T17:13:40.182Z (5 months ago)
- Topics: accessibility, bare, easy-to-use, html5, javascript, modal, native
- Language: JavaScript
- Homepage:
- Size: 15.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bare Modal
Bare Modal is a lightweight, accessible modal library designed to enhance user interaction on web applications. Utilizing the native HTML `` element, it offers an easy and robust solution for implementing modals with features like automatic action binding, cookie-based user action tracking, customizable cookie durations, and timed modal displays.
## Features
- **Native HTML `` Support**: Uses the HTML `` element for ease of use and accessibility.
- **Automatic Action Binding**: Simplifies modal interactions with data attributes for open, close, accept, and cancel actions.
- **Cookie-Based Action Tracking**: Remembers user modal interactions to prevent redundant displays.
- **Customizable Cookie Duration**: Allows developers to define how long modal actions are remembered.
- **Timed Modal Display**: Enables modals to appear after a set delay, enhancing user engagement.
- **Accessibility**: Ensures modals are accessible, following WCAG guidelines for inclusive design.
## Installation
Include Bare Modal in your project by adding the `bare-modal.min.js` file to your codebase and linking to it within your HTML file:
```html
```
## Usage
### Basic Modal
```html
Open Modal
This is a simple modal.
Close
```
### Timed Modal
```html
This modal will display after 5 seconds.
Close
```
### Custom Cookie Duration
```html
Cookie duration for this modal's action is 30 days.
Close
```
## API
### `data-modal-trigger="ID"`
Triggers the modal with the specified ID to open.
### `data-modal-close`
Closes the modal.
### `data-modal-accept`
Marks the modal as accepted and closes it. Useful for confirmation dialogs.
### `data-modal-cancel`
Marks the modal as canceled and closes it. Useful for confirmation dialogs.
### `data-modal-timed="SECONDS"`
Delays the modal's display for the specified number of seconds.
### `data-modal-cookie-expire="DAYS"`
Sets the duration for which the user's action on the modal is remembered.
## Accessibility
Bare Modal leverages the `` element's inherent accessibility features, such as focus management and semantic structure. It adheres to WCAG guidelines, ensuring that modals are accessible to all users, including those using assistive technologies.
## Best Practices
- **Test Across Devices**: Ensure modals perform well on various devices and screen sizes.
- **Keyboard Navigation**: Verify modals are fully navigable using the keyboard.
- **Screen Reader Testing**: Regularly test your modals with screen readers to ensure they are announced and interacted with correctly.
## Contributing
Contributions are welcome! If you have suggestions for improving Bare Modal, please open an issue or submit a pull request.
## License
Bare Modal is open-source software licensed under the MIT license.