Users on the web interact with checkboxes, dropdown menus, and other UI elements on a regular basis. Google is now redesigning these HTML form controls in Chrome to improve touch-friendliness and accessibility.
One issue with native form controls, however, is the inconsistency in their styling. Older controls, such as <button> and <select> were styled to match the user’s operating system. Form controls that were added to the platform more recently were designed to match whatever style was popular at the time.
In Chrome, this results in “mismatched and sometimes outdated” controls that force developers to spend additional time and code customizing the defaults. Over the last year, Google worked with the Microsoft Edge team to “retheme and improve the functionality of the built-in form controls on Chromium browsers.”
This results in new UIs that are consistent and “easier to perceive.” Overall, it does away with gradients and leverages modern flat design principles for checkboxes, buttons, text fields, dropdown menus, progress indicators, and sliders.
In terms of accessibility, there is a “more visible” focus ring that helps “people using a keyboard or switch device to identify which element they’re interacting with.” The new design features a thick dark ring with a thin white outline. Another tweak improves color pickers by making them fully accessible with keyboards and switch devices.
Enhanced touch support results in larger tap targets. One example sees date pickers have better flyouts and support for swiping and inertia when scrolling.
These changes are already available on Edge for Windows, and can be enabled on Chrome 81 with the following flag:
chrome://flags/#form-controls-refresh
This controls redesign will roll out to Mac, Windows, Linux, and Chrome OS with version 83 in mid-May. A similar revamp is coming to Android later this year.