WCAG 2.2: Increase header menu button min-height to 24px

[dav-idc]

Description of the issue

As part of my testing and calculations for the WCAG 2.2 'Target size (minimum)' criterion (restricted document), I tested the GOV.UK Design System header element.

I found that the 'Menu' button doesn't have a set height. Since the font is set to 16px, the menu button's height is 16px. That's pretty short, especially compared to the 40px height of our other buttons.

Steps to reproduce the issue

The header menu button can be viewed on this design system website code example, at a screen width between 320px and 768px: https://design-system.service.gov.uk/components/header/with-service-name-and-navigation/index.html

This screenshot shows the header component from that example link, at a screen width of 320px. I've moved focus to the 'Menu' element to visually highlight how little height there is for the menu's target area.

Actual vs expected behaviour

Actual behaviour: the menu button has a clickable target height of 16px.

Expected behaviour: WCAG 2.2 AA target size (minimum) recommends hit targets to be minimum 24px by 24px.

There's an exception for elements which are spaced out enough though:

Spacing: Undersized targets (those less than 24 by 24 CSS pixels) are positioned so that if a 24 CSS pixel diameter circle is centered on the bounding box of each, the circles do not intersect another target or the circle for another undersized target;

So this is not a WCAG failure, but nonetheless, the menu button could do with an increase to its hit-target height.

Recommendation

Add a minimum height of 24px to the 'Menu' button.

.govuk-header__menu-button{
    min-height: 24px;
    top: 16px;
}

Here's how it would look:

Benefits of this change

• Larger visual focus area
• Easier to select (especially with large thumbs on mobile devices)
• Menu button feels less vertically crowded

Environment (where applicable)

This is the environment in which I tested and found this issue:

• Operating system: MacOS Ventura
• Browser: Chrome
• Browser version: 118
• GOV.UK Frontend Version: V4.7

[owenatgov]

I wondered if work being done for #3896 fixes this but it doesn't, it just makes it less bad. See the preview deployment for #4150. The menu button is now 20px instead of 16px. I think there's still value in David's recommendation.