Currently, at work, we are implementing some beautiful custom inputs for our Page Editor (a WYSIWYG editor that is being used inside Liferay). When I found that I needed to create a custom
<select> element, I though it would be as easy as creating a simple dropdown with a bit of JS.
I didn't now how wrong I was until I started investigating about how select works and which aria-roles could I use to emulate it's behavior. There is no exact
select role, but I found that using a combination of
option gives a valid result that can also be made accessible.
These are some interesting articles and videos I found during my investigation (thanks to Eduardo Allegrini for his help 😄):
- Accessible Custom Select Dropdowns.
- Striking a Balance Between Native and Custom Select Elements.
- The Future of HTML Controls.
- ARIA: listbox role.
- Collapsible Dropdown Listbox Example.
See the Pen Accessible custom <select> by Pablo Molina (@p2kmgcl) on CodePen.