Accessible Custom Select Replacement Plugin - customA11ySelect
File Size: | 8.24 KB |
---|---|
Views Total: | 1707 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
customA11ySelect is a select replacement plugin which converts the regular select box into an HTML unordered list based dropdown menu with support for ARIA attributes and keyboard interactions.
Supported keys:
- down
- up
- space
- enter
- escape
- pageUp
- pageDown
- end
- home
- tab
How to use it:
1. Include the customA11ySelect.css
for the default styling of the custom select.
<link href="customA11ySelect.css" rel="stylesheet">
2. Create a normal select box on the webpage.
<select id="example"> <option value="" selected="selected">Select An Option</option> <option value="html">HTML5</option> <option value="css">CSS/CSS3</option> <option value="javascript">JavaScript</option> <option value="Ruby">Ruby</option> <option value="Python">Python</option> </select>
3. Include jQuery library and the customA11ySelect.js
script at the end of the document.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="customA11ySelect.js"></script>
4. Initialize the plugin on the select element. That's it.
$(function(){ $('select').customA11ySelect(); });
This awesome jQuery plugin is developed by charliethomason. For more Advanced Usages, please check the demo page or visit the official website.