Govuk-frontend: Consider larger elements for a bigger touch/target size

[joelanman]

Related component

Anything interactive:

• Buttons
• Back link
• Checkboxes
• Radios
• Text input

Context

Larger elements are easy to use, whether that's on a touch device like a phone, or using a mouse or other input device.

GOVUK Frontend elements have always been nice and big, but they don't quite meet the WCAG AAA standard of at least 44px x 44px. Apple and Android also have 44px 44px as their standard. Note that we only require WCAG AA, not AAA - however it would be nice to tackle this where we can.

https://adrianroselli.com/2019/06/target-size-and-2-5-5.html

[36degrees]

Overlaps a little with #1817

[36degrees]

If we were going to change the visual height of some form controls I think we'd also want to include the button component in that list.

However, I'd suggest that we consider the target size of back links as part of #1817 instead as we'd also need to look at at least breadcrumbs, if not also the other standalone links in the header and footer.

Worth noting also that although checkboxes and radios have a 'visual' size of 40x40px, they do have a target size of 44x44px, including the smaller checkboxes and radios.

Finally, there's some confusion around Apple's Human Interface guidelines specifying 44pt rather than 44px but I believe that's their way of specifying sizes in a resolution-independent way (e.g. 1024x1366 pt = 2048x2732 px @2x) and broadly equivalent (?) to CSS pixels as defined in WCAG.

[Ayesha-S-DWP]

Following the inclusion of the 'Back' links for the AAA consideration, it could also make sense to include the 'Change' links on the 'Check your answers' summary.