Day 23 - Target size
Ensuring the visual elements of your page are clickable is just as important as ensuring they have enough contrast and are in a consistent place. The minimum amount of space required for an element to be clickable is 24x24 pixels.
This ensures the elements are touchable and clickable in several scenarios. This could include various screen sizes, zoom, or difficulty with motor movement. It ensures items are not accidentally clicked when adjacent to other elements.
Example
Using CSS, the clickable areas of elements can be expanded.
In the example above, it shows the icon itself isn’t large enough to meet the 24x24 px size requirements. To ensure the target size is large enough, the clickable space in the style is expanded to include space around the icon.
Task
- Open the homepage of your website
- Open the inspector and select the axe DevTools
- Run a test on the entire page
- Read through the results to ensure there are no target size errors
- Change the window size or use the device toolbar to simulate a smaller screen
- Run the test again and look for results
- If there are any icons or text that appear too small, inspect those elements to view their visible size including any padding
Considerations
There are a few exceptions to consider where targets smaller than 24x24 may be acceptable:
- If targets are positioned so that a 24 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
- If the same function can be achieved by a different conforming element on the page
- The target is in a sentence or its size is otherwise constrained by the line-height of non-target text
- The user has control over the target size of the element
- The target is legally mandated
Browser extensions
- axe DevTools browser extension
- Siteimprove browser extension (Filter to A, AA and ARIA conformance)