If anyone has come across (or built) an accessible multiselect dropdown with search, I'd be very interested to hear about one. HTML select element (even though it has a multiple attribute) doesn't really suit the need when the amount of options grows to tens or hundreds. Ready made libraries all seem to lack at least screen reader accessibility.
One could attempt to make an accessible dropdown by creating a combobox with a text input tied to a role=listbox list with aria-controls. Adding the full functionality and relying on aria-attributes to carry and consistently provide screen reader comprehensive information across different browsers seems like a stretch for a more junior dev such as myself, even if I am tempted at starting an open source project of my own.
In general anything a bit more complex seems still super hard to make fully screen reader accessible. Even input type="date" doesn't support screen reader accessibility, let alone any custom date picker library you can find online (these can luckily be replaced with simple text inputs).
Great talk with an important topic! Glad to see the awareness spread <3
I understand your frustrations. Not every UI library account for accessibility and you really have to go ahead and do the work yourself of adding aria-controls at the end of the day.
I know about Chakra UI which is a great UI library for React and Vue and it has accessibility built into the several components including a select component. You can check it hopefully it fits what you're looking for.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
If anyone has come across (or built) an accessible multiselect dropdown with search, I'd be very interested to hear about one. HTML select element (even though it has a multiple attribute) doesn't really suit the need when the amount of options grows to tens or hundreds. Ready made libraries all seem to lack at least screen reader accessibility.
One could attempt to make an accessible dropdown by creating a combobox with a text input tied to a role=listbox list with aria-controls. Adding the full functionality and relying on aria-attributes to carry and consistently provide screen reader comprehensive information across different browsers seems like a stretch for a more junior dev such as myself, even if I am tempted at starting an open source project of my own.
In general anything a bit more complex seems still super hard to make fully screen reader accessible. Even input type="date" doesn't support screen reader accessibility, let alone any custom date picker library you can find online (these can luckily be replaced with simple text inputs).
Great talk with an important topic! Glad to see the awareness spread <3
Hi @ilpotoikkanen ! Thank you :)
I understand your frustrations. Not every UI library account for accessibility and you really have to go ahead and do the work yourself of adding aria-controls at the end of the day.
I know about Chakra UI which is a great UI library for React and Vue and it has accessibility built into the several components including a select component. You can check it hopefully it fits what you're looking for.