Web forms are a critical component of modern web applications. It's important to try and provide a good user experience and make your forms as usable as possible.
Unfortunately, the native form elements provided by browsers in HTML5 are still fairly basic and difficult to customize in terms of styling.
Select Elements
Take something that you'd think would be relatively easy by now. Like styling select elements or adding icons to each option of the select. This is still not achievable in a consistent cross-browser manner.
Perhaps the worst of the native form elements is the <select multiple>. This provides a horrible user experience by default and is usually replaced by solutions like Selectize or Chosen. There are of course many other custom form components that aim to enhance user experience and make styling easier.
This is achieved by replacing the form element with your own markup and scripting the interaction with JavaScript. While this does give you full control, the complexity can quickly multiply.
There is always a trade-off between the perceived enhanced design and usability of the component and introducing additional complexity.
- If you are replacing many elements on your page how will this impact performance?
- Does the scripting of your control allow full keyboard access?
- Is it accessable to assistive devices like screen readers?
- Does it work across all browsers and on mobile devices?
- Is the scripting for your control thoroughly tested around edge cases?
Before reaching for a custom solution it's worth re-asking the question. Is it really necessary?
Should we be abandoning the native browser control and behavior? Remember this includes the inbuilt accessibility. Your custom JavaScript solution will likely not be as well tested around edge cases or perform as well as native browser elements.
If your custom control works by replacing a semantic form element it probably will not work at all with screen readers or voice recognition software. if a select element is replaced with <div>'s It may not be recognized unless the author of the control has done the non-trivial JavaScript work to build the accessibility functionality that you get by default with semantic HTML.
So, is it really necessary? As ever in product development, the answer to this question is, it depends. We are always trying to think about product use cases and of course, user needs. So when you have a definitive use case for a multiple select you will likely need a more enhanced solution than the browser provides by default. However, often times simplicity is best.