Accessible Custom Select Replacement Plugin - customA11ySelect

File Size: 8.24 KB
Views Total: 1739
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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>

3. Include jQuery library and the customA11ySelect.js script at the end of the document.

<script src="" 
<script src="customA11ySelect.js"></script>

4. Initialize the plugin on the select element. That's it.


This awesome jQuery plugin is developed by charliethomason. For more Advanced Usages, please check the demo page or visit the official website.