An update on our radio buttons and checkboxes work
Recently we talked about resizing checkboxes and radios; I thought I’d give a quick update as to what happened next.
Improving things with industry
The first thing we did, was to identify specific problems in browsers we’d discovered during our research. Once we had these written up, we filed (or updated) the following issues:
- Firefox (Windows) – Regression: Checkboxes can no longer be resized using CSS
- Opera (Windows 10) – Radios and checkboxes use Windows Classic styles on Windows 10 (issue ID DNA-43148)
- Chrome (OS X) – Can’t arbitrarily resize radios / checkboxes
- Firefox (OS X) – Consider hand-rolling radios and checkboxes for resizability
- Safari (OS X) – Can’t arbitrarily resize radios / checkboxes
- Safari (iOS) – Radio buttons have a fixed border radius making them look square when resized
We’ve had some indication that there’s interest in fixing this issue from at least a few of the companies. Opera fixed their issue as soon as they were notified, although it hasn’t appeared in a released version of the browser yet.
Improving things ourselves
We also took some action at our end.
Looking at our browser statistics, updating our styles to make radio buttons and inputs bigger would improve the situation for around 82% of our users. A further 14% or so would see no difference, and (a decreasing) 4% would receive a slightly worse presentation. We decided on the basis of these figures to increase the size of our ‘block label’ checkboxes and radios and to do the same to our ‘option select’ component. These aren’t live yet but will gradually roll out as parts of the system are updated.
Through a combination of our own fixes and updates from browser developers, we’re hopeful that users will have an easier time using both GOV.UK and the wider web in the future.