Skip to content

target-size should account for the size of its descendants #3673

@WilcoFiers

Description

@WilcoFiers

The new target-size rule looks at the area of the focusable element to determine its size and position relative to other elements. This is making the incorrect assumption that the clickable area of an element cannot exceed its bounding box. This is correct. Any descendant of a link is also clickable, and will activate that parent link. There are numerous ways in which descendants can be positioned outside the boundary of its parent, and so result in a much larger target area than the original link has. One such example is the axe-con logo in the side navigation:

https://www.deque.com/axe-con/sessions/changing-the-way-you-think-and-work-agile-accessibility-audits-in-the-product-life-cycle/

Screenshot axe-con logo who's parent link is much smaller than the actual image it wraps

Solving this could be pretty complicated. I can think of a few scenarios here:

  • If there is no overlap, we could test the widget and the descendants separately, and make sure at least one of them passes
  • If the descendant completely encloses the widget, we could test the descendant instead of the widget
  • I don't know what to do in case of partial overlap like in axe-con's logo, where the link is wide but small, and the image is less wide, but tall.

Metadata

Metadata

Assignees

Labels

fixBug fixesprA pr has been created for the issuetarget-size

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions