target-size-minimum

⌘K
  1. Home
  2. SiteLint
  3. Accessibility Rules
  4. target-size-minimum

target-size-minimum

Print this article

Description

This rule determines if all interactive targets take up at least 24×24 CSS pixels of space.

Purpose

The WCAG (Web Content Accessibility Guidelines) Success Criteria 2.5.8 specifies the minimum size requirements for interactive targets to ensure accessibility for users. This requirement ensures that the target is large enough to be easily interacted with, especially for users with motor impairments or those using touch screens. There are several exceptions to this rule, allowing for targets smaller than 24 by 24 CSS pixels under certain conditions:

  • Spacing: If undersized targets (less than 24 by 24 CSS pixels) are positioned so that a 24 CSS pixel diameter circle can be centered on the bounding box of each without intersecting another target or the circle for another undersized target.
  • Equivalent: The function can be achieved through a different control on the same page that meets this criterion.
  • Inline: The target is in a sentence or its size is otherwise constrained by the line-height of non-target text.
  • User agent control: The size of the target is determined by the user agent and is not modified by the author.
  • Essential: A particular presentation of the target is essential or is legally required for the information being conveyed.

How to fix it

To fix WCAG 2.5.8, which addresses the minimum target size requirement, follow these steps:

  • Ensure interactive targets are easily activatable: make sure that interactive elements, such as buttons, links, and form inputs, are large enough to be easily activated by pointer users. This is crucial for users with limited mobility, such as those experiencing hand tremors or quadriplegia, as well as for the imprecision of virtual pointing devices and touchscreens.
  • Use recognized markup: ensure that interactive targets have recognized markup, such as role or tabindex attributes. This helps in identifying these elements and makes them accessible to assistive technologies. Elements lacking proper markup might not be identifiable during automated testing, potentially leading to failures in meeting other success criteria.
  • Consider alternative solutions: while the primary focus should be on ensuring that interactive targets are sufficiently large, consider alternative solutions if increasing the size of a target is not feasible. These alternatives could involve changing the design or layout to reduce the likelihood of accidental activation of nearby targets.
  • Test your implementation: after implementing changes, thoroughly test your website or application to ensure that it meets the requirements of WCAG 2.5.8. This includes manual testing by users with different abilities and, where possible, automated testing tools. Automated testing can help identify issues that might not be apparent during manual testing.
Was this article helpful to you? No Yes

How can we help?