How do I make a dropdown select accessible?

What I mean by dropdown is the implementation found in Bootstrap and other common front-end frameworks. I want to replace <select> elements in my forms with dropdown menus because I need the following features:

  • Better search
  • Dynamic option creation

Both the above can be fitted inside the dropdown menu along with the options. Let's say I have the following markup:

<div class="dropdown">
  <button class="btn" data-toggle="dropdown" type="button" id="dropdown-toggle-btn-1" aria-haspopup="true" aria-expanded="false" data-value="">
     Favorite animal
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdown-toggle-btn-1">
    <a href="#" class="dropdown-item" data-value="cat">Cat</a>
    <a href="#" class="dropdown-item" data-value="dog">Dog</a>
    <a href="#" class="dropdown-item" data-value="elephant">Elephant</a>
  </div>
</div>

When the user clicks on a .dropdown-item, I will use JavaScript to change the string "Favorite Animal" to "Cat", "Dog", or "Elephant" (depending on which one is clicked), and also update the data-value attribute of the toggle with the option's one.

So far, this seems fairly easy to pull off. However, I am worried about accessibility. Is this actually accessible to users? I mean from a visual point of view, it is easy to understand that this is asking users to select an option, but what about from the point of view of screen readers? Any help is greatly appreciated!

Tags: , , , , , ,