https://github.com/svinkle/csss-a11y-plugin
Accessibility plugin for CSSS slide deck framework.
https://github.com/svinkle/csss-a11y-plugin
a11y accessibility plugin presentation slidedeck slideshow
Last synced: about 1 year ago
JSON representation
Accessibility plugin for CSSS slide deck framework.
- Host: GitHub
- URL: https://github.com/svinkle/csss-a11y-plugin
- Owner: svinkle
- License: mit
- Created: 2019-05-22T14:35:03.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-11-14T01:48:32.000Z (over 6 years ago)
- Last Synced: 2025-03-17T15:21:26.781Z (over 1 year ago)
- Topics: a11y, accessibility, plugin, presentation, slidedeck, slideshow
- Language: JavaScript
- Homepage: https://github.com/LeaVerou/CSSS
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# CSSS A11y Plugin
Accessibility plugin for [CSSS slide deck framework](https://github.com/LeaVerou/CSSS).
## What does it do?
- Resets focus indicator to be visible on `Tab` key press
- Removes `outline` on slide focus
- Includes CSS helper classes
- Sets `role` for each slide for semantic context
- Sets `aria-roledescription` for each slide for extra context
- Sets `aria-label` for each slide to provide an accessible name
- Outputs a link list for keyboard controls to load previous and next slides
- Shifts focus to slide content container on link click
## Usage
### CSS
Place `plugin.css` file in `css/plugins/a11y` directory and include in `head` section of Slides document.
```html
```
### JavaScript
Place `plugin.js` file in `scripts/plugins/a11y` directory and include before closing `body` element of Slides document.
```html
```
## Browser support
* Chrome
* Edge
* Firefox
* Internet Explorer 10+
* Safari
* Opera
## License
This project and its source code is licensed under the [MIT](LICENSE.txt) license.