Active
Project:
Claro
Version:
3.0.x-dev
Component:
Code
Priority:
Normal
Category:
Plan
Assigned:
Unassigned
Reporter:
Created:
3 Dec 2024 at 22:41 UTC
Updated:
21 Sep 2026 at 16:02 UTC
Jump to comment: Most recent
Problem/Motivation
Some interface components currently don’t have the minimum target size of at least 24 by 24 pixels to meet WCAG2.2 SC2.5.8. There are four ubiquitous components (*a good sample page, with the token module installed, covering all four of them is admin/config/people/accounts) :
- Links – all links that are not constrained by the line-height of non-target text, a few examples
Add section/Add blockin Layout Builder, the blocks onChoose a blocksidebar in Layout Builder and Navigation Layout, the group togglesChoose a blocksidebar in Layout Builder and Navigation Layout, links in tables like/admin/content,Show row weight,Browse available tokens, the links in breadcrumbs, or Views pages likeadmin/structure/views/view/content, to name a few examples, but there might be many more - Checkboxes
- Radio Buttons
- Form element labels
Then there are a few components that occur less often:
- Grid/table toggle – in the add or select media dialog modal
- Cog button – on for example the
Manage form displayandManage displaypages - drop buttons in the ckeditor5 toolbar
*discussed the topic several time with @mgifford before posting
Steps to reproduce
For convenience in testing either use the target size bookmarklet by Steve Falkner:
https://html5accessibility.com/stuff/2023/08/28/quick-and-very-dirty-tar... or inspect elements in your browser's developer tools
Proposed resolution
Decide how to tackle and chop up the issues listed in the problem and motivation section, and then create well scoped child issues accordingly.
Comments
Comment #2
rkollerComment #3
rkolleradded a note i forgot in the initial posting, that i'Ve discussed the matter several times with @mgifford before posting on here
Comment #4
rkolleradded breadcrumbs to the list of of examples for links i forgot.
Comment #5
rkollerComment #6
mgiffordGreat catch @rkoller. We do need to improve the user interface to see it meets the Minimum Target Size requirements.
https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum
Added in WCAG 2.2, this isn't yet a requirement by many countries (but it will be soon).
https://tetralogical.com/blog/2023/10/05/whats-new-wcag-2.2/
There are some bookmarklets to help with this too, this one by Steve Faulkner - https://github.com/stevefaulkner/targetsize/blob/main/bookmarklet.md
Comment #7
rkollerthank you! added the direct link to the success criterion to the issue summary.
Comment #8
rkollerComment #9
kim.pepperComment #10
kentr commentedThe breadcrumb is covered by #3223147: Claro breadcrumb doesn't meet minimum target-size.
The Lighthouse accessibility audit in Chrome DevTools covers this (WCAG SC 2.5.8).
The automated Axe tests will cover this, but we would need to explicitly enable (or really, enable WCAG 2.2 AA). The test for #3223147: Claro breadcrumb doesn't meet minimum target-size can serve as a starting point.
Comment #12
quietone commentedThe Claro theme was approved for removal in #3576460: [policy, no patch] Deprecate and remove Claro.
This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.
The deprecation work is in #3576668: [meta] Tasks to deprecate Claro and the removal work in #3584638: [meta] Tasks to remove the Claro theme.
Comment #13
smustgrave commentedThis seems to be well scoped to claro so will bring over
@rkoller or @mgifford could we open tasks in contrib?