Accessible Custom Select Replacement Plugin - customA11ySelect

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.