Come together with the global Drupal community in Rotterdam, 28 Sept – 1 Oct 2026. Sessions, contribution, connection, and Early Bird savings until 8 June.
The specified target area of the icons is too small to be usable on handheld devices. Most human fingertips are more than 12 x 12px in size.
WCAG 2.1 AAA guidelines specify a minimum size of 44 x 44px for target areas. The AAA standard goes beyond the legal minimum for compliance.
Recommendation:
If that 44 x 44px is not feasible, then set a minimum of 36 x 36px for the target area in the admin UI, if not 24 x 24px (L size).
Reference
Material Design sets their icons inside of a 24 x 24px square by default. See https://material.io/design/iconography/system-icons.html#grid-keyline-sh...
| Comment | File | Size | Author |
|---|---|---|---|
| #8 | Captura de Pantalla 2020-08-26 a les 9.56.46.png | 20.74 KB | ckrina |
Comments
Comment #2
modulist commentedComment #3
saschaeggi@modulist I've updated the documentation according to your bug report. there was no specification that S should be used for mobile use. These are just meant to be different icon sizes which can be used throughout the user interface.
So the doc now includes target areas to clarify this. Thanks for pointing out.
So e.g. the icons for the toolbar would have a target area of 24x24 but the icon itself would be 16x16.
Comment #4
fhaeberleCan this issue be closed? As I assume, the iconography size system was established without the target area included to have a flexible design approach. However, the icons are used with enough target spacing in a lot of components and we should asses this accessibility concern for each component separately (which is already be done for the majority of the components).
Comment #5
huzookaComment #7
rainbreaw commentedI haven't investigated this issue thoroughly in the actual theme, but want to make a clarifying note here:
The image or icon itself does not need to be 44x44 (WCAG and iOS) or 48x48 (Material), it is the touch area that must be this size. Touch area isn't simply referring to physical touch on a mobile device, but also cursor touch and accuracy on a computer, as well.
Even if material icons are 24x24, the CSS itself must include enough padding around the icon or target to create enough tappable space.
While this is a WCAG 2.1 Level AAA criterion, it is a serious issue for users with dexterity challenges. This can include a large number of individuals in both permanent and situational/temporal scenarios, such as aging, repetitive stress injury, being very young, certain medications, ticks, tremors, stereotypies/repetitive motions associated with developmental disorders, etc. For more on this, see WCAG 2.5.5 Target Size.
Comment #8
ckrinaWe defined this min target area:
