Accessibility demo for motor impairment

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 <div>s and <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.

It also won’t work with JavaScript disabled or if JavaScript fails to load.

Depending on the way that the native select dropdown has been obscured from view, it may not be read aloud by a screen reader.

Please select
  • Please select
  • Mx
  • Mr
  • Mrs
  • Miss
  • Ms
  • Dr
  • Prof
  • Rev
  • Other

The solution

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:

This native <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.

A screenshot of this native select dropdown on an Android phone.
A screenshot of this native select dropdown on an iOS phone.