WCAG 2.2 development update: Tag || Target size (minimum)

[dav-idc]

What

Check whether the target area of tags needs to be adjusted so that the target area has a height of at least 24px.

Note: the typography work may affect this, as it is changing how font size is handled for small, mobile-size screens.

Resources

• Tag component
• WCAG 2.2 criterion

Why

Currently tags on small, mobile-size viewport widths are rendered with a target area height of 23px. On large, desktop and tablet-size viewport widths, the height of the target area is 25px.

It would be better if we just bump small-screen up to be at least 24px height.

Notes on the scenario where this applies:

• The tag is made into a link or button (interactive element)
• The page with the tag is viewed on a mobile sized viewport width
• The tag is using our current version of the typography scale

The relevant part of the criteria is:

"The size of the target for pointer inputs is at least 24 by 24 CSS pixels..."

Technically our current tag should be fine from a 'passes WCAG 2.2 AA' sense, in 99% of situations. However, the current form could fail AA on mobile-size screen widths, if a bunch of tags are stacked vertically without spacing between them.

Who needs to work on this

Developer

Who needs to review this

Accessibility specialist

Done when

• Investigate the issue
• Determine whether the typography changes will fix this by bumping up the size of our mobile fonts
• Decide whether we see any value in adding a minimum width / height for the tag target area
• Make the change
• Review the change (accessibility specialist)
• Merge

[querkmachine]

Does this still apply if the tags aren't links?

We don't officially support using tags as links, or having links inserted into the tag text, so the component (as we ship it) could be considered compliant already.

However, we know that using them as links is something that folks do sometimes, so it might be worth making that functionality official, or increasing the tag's height preemptive to services using them as links.

[dav-idc]

Hey @querkmachine! Ahh yes, you've noted the other assumption made. Yes, this is more of a better-safe-than-inaccessible thing, in the event that a service team chooses (against our guidance) to make a tag into a link 👍

I'll add that tidbit to the issue description!

[owenatgov]

Had a light chat about this with @querkmachine and we've agreed that we'll keep an eye on this as part of alphagov/govuk-design-system#2299 and see if there's an opportunity to tie this into the review of the tag component specifically.

[querkmachine]

Some of the proposed designs in #3502 also increase the height of the tag component, also through increasing the text size, so this issue may be resolved as part of that work too.

[owenatgov]

Just hopping in to add that from auditing the components against the new typography scale as part of alphagov/govuk-design-system#2299, I can confirm that this will be solved as part of that update.

[dav-idc]

Just hopping in to add that from auditing the components against the new typography scale as part of alphagov/govuk-design-system#2299, I can confirm that this will be solved as part of that update.

Ah excellent! I thought that might be the case.

Sounds like this specific one will either be solved by the tag updates from the task-list working group, or from the new typography scale. A race to the finish 🏃

[dav-idc]

Closing this issue, as it's going to be covered off by other issues:

• Tag design changes #3502
• Review design system components following finalised update to font scale govuk-design-system#2299