Consider larger elements for a bigger touch/target size

[joelanman]

Related component

Anything interactive:

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

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.

[querkmachine]

Some relevant asides:

Currently, a minimum target size is only defined in WCAG 2.1 Level AAA. That size is 44 by 44 pixels.

This is retained in the WCAG 2.2 Level AAA draft, however it is now considered an enhancement—not a minimum. The minimum target size is instead defined in a new guideline at Level AA.

The minimum size now takes into account exclusion areas around an element. Interactive elements may now be as small as desired, but must have a total unobstructed area of at least 24 x 24 pixels within which no other interactive elements are present. For example, a 16x16 pixel button is compliant if it has a 4 pixel margin on all sides (16 + 4 + 4 = 24).

This isn't to dissuade having larger touch targets—they have clear benefits to all users, accessibility needs or no—but it will mean that some elements in Frontend that fail the "minimum" size in WCAG 2.1, such as back links, will no longer do so in WCAG 2.2.