In this form a custom styled
<select> has been implemented in order to style it on brand. This has replaced the native HTML element with
<li>s which has rendered the entire select dropdown and its options unusable via keyboard only nagivation for users who may have a motor impairment and find the use of a mouse difficult.
The label also can’t be clicked to access the select dropdown.
Depending on the way that the native select dropdown has been obscured from view, it may not be read aloud by a screen reader.
Use a real HTML element! Although some form elements do not look identical across different browsers (especially legacy versions of Internet Explorer) it is much safer and much more accessible to utilise the browser’s native elements. That’s what they are built for, and that’s what they do best.
You can even style native
selects to an extent, in modern browsers:
<select> is fully keyboard navigable and will be read aloud by assistive technology. It will also utilise native functionality on iOS and Android devices, allowing for a richer user experience for all users.