Redesigned Chrome Form Controls Deliver Accessible Touch Interactions


Google is all set to bring better accessibility, consistency, and usability with redesigned form controls for Chrome in the near future. That's based on recent reports stemming from Google's Chromium Blog.

The bulk of the incoming changes are centered around consistency. Google notes that the current set of native controls in Chrome doesn't align well with one another from a design perspective. That makes them difficult to "perceive." The alterations will eliminate that problem, delivering a flat, modern design. But they'll also improve visibility, in general.

For starters, Google is doing away with gradients, adding clearer borders, and adding icons to some fields to make their purpose more clear. In the case of the latter change, the company is adding a calendar and clock icon to related fields.


In terms of accessibility, Google's biggest tweaks center around visibility. Google specifically points to changes on focused or selected objects such as buttons and links more visible. That's explicitly meant to be useful for those who use a keyboard or switch to navigate the web.

Rather than a simple recolor of selection outlines, the company is instantiating a two-tone focus ring. That means that selected forms, buttons, and objects will show two color rings at the same time. The inner ring is thicker and is black in color while the outer white ring is thin. The result is a focus ring that appears clearly on any color background.

Now, Google is also redesigning the color picker and incorporating full keyboard control functionality for that form. That means users will be able to use the keyboard to interact with every aspect of the color selection tool.


It's also working to include additional alternate functions, such as faster keyboard cursor movement, centered on the "Ctrl" or command keys depending on the platform used.

The change will also make Chrome forms better for touch

Setting aside the accessibility-friendly new keyboard usage and redesign, Google is taking things a step further to make things better for touch-centric platforms and users. Namely, it's making touch and tap targets larger. The search giant's primary example of changes on that front all center around the date picker.

In that example, Google says it's including better flyouts, allowing users to access a full calendar easily on date inputs. That's as opposed to relying on individual elements or typing but the touch zones themselves are being optimized there as well. Finally, Google is adding in support for swiping and "inertia" in element scrolling.


This is available now but not in its final form and it won't be seen everywhere

As Google points out, one of the big motivators behind the incoming redesigned form controls for Chrome is that those elements aren't consistent right now. As a result, many websites are utilizing customized designs for interactive forms in order to maintain a clean aesthetic. That means that the incoming changes won't necessarily be visible everywhere too. Or at least not all at once.

Chiefly, the changes will be noticeable wherever the default native forms have been used. Web developers will need to actively revert to the default forms in order for those to show up for end-users.

With regard to when the changes will roll out, the search giant says they're already in place in Windows Chromium-based Edge browser. In Chrome 81, the new UI is tucked behind an experimental setting found at the "chrome://flags" page. Google placed that under an experimental flag labeled "#form-controls-refresh."


For Chrome OS, Windows, Linux, and macOS, the changes are rolling out on stable channels by default in Chrome 83. Updates for Chrome on Android should roll out later this year. Chrome 83 won't be rolling out until May 19 — or May 26 for Chrome OS — following the company's decision to skip Chrome 82.