SIA-R111Target Size (enhanced)
Accessibility requirements
This rule is not required for conformance to any accessibility requirements.
Description
This rule checks that elements that can receive pointer events have a size of at least 44×44 pixels.
Applicability
This rule applies to any element in the HTML namespace, which can be targeted by a pointer event, except if it is rendered on a line.
Expectation
At least one of the following is true:
- the target has a clickable area containing an horizontal rectangle with width and height of at least 44 CSS pixels; or
- the target is a User Agent controlled component.
Assumptions
- This rule assumes that the target does not have essential size. Targets with essential size may fail this rule while still satisfying Success Criterion 2.5.5 Target Size (enhanced)
- This rule assumes that there is no component on the page which achieves a function equivalent to the target. If such a control exists and is large enough, this rule may fail while Success Criterion 2.5.5 Target Size (enhanced) is still satisfied.
Accessibility Support
Hit testing isn't properly defined, and this has been an issue in the CSS specification for years. Therefore, different User Agents may perform it differently, resulting in different clickable areas for the same element. As of April 2024, we are not aware of actual cases resulting in significantly different clickable areas.
Examples
Passed
This <a>
element has a clickable area of approximately 210×55 pixels.
<style>
#target {
font-size: 50px;
}
</style>
<a id="target" href="https://www.w3.org/WAI/standards-guidelines/act/rules/">ACT rules</a>
This <button>
element has a clickable area of exactly 44×44 pixels.
<style>
#target {
width: 44px;
height: 44px;
border-radius: 0;
}
</style>
<button id="target" onclick="alert('hello')">Hello</button>
This [<input>
element], combined with its explicit label and its padding, has a clickable area containing a rectangle of approximately 81×45px. Note that this rectangle has to intersect both the [<input>
element] itself, and the <label>
element, as none of the individual components are enough.
<label for="input" id="label" style="padding: 6px 0;"> Given Name<br /> </label>
<input id="input" style="width: 200px" />
This checkbox is an [User-Agent controlled component][].
<p id="accept">
<input aria-labelledby="accept" type="checkbox" />
I agree with the terms and conditions.
</p>
Failed
This link only has a clickable area of approximately 66×18 pixels.
<style>
#target {
line-height: 50px;
}
</style>
<body>
<a id="target" href="https://www.w3.org/WAI/standards-guidelines/act/rules/">ACT rules</a>
</body>
This <button>
element has a clickable area of only 35×35 pixels.
<style>
#target {
width: 35px;
height: 35px;
border-radius: 0;
}
</style>
<button id="target" onclick="alert('hello')">Hi</button>
This <input>
element, together with its implicit label and its padding has a clickable area whose height is below 41px.
<label id="label" style="padding: 2px 0;">
Given Name<br />
<input id="input" style="width: 200px" />
</label>
These radio buttons have their size modified by the author and are therefore not [User-Agent controlled components][]. Their clickable area is too small.
<style>
input[type='radio'] {
width: 20px;
height: 20px;
}
</style>
<fieldset>
<legend>Pick a color (required)</legend>
<label><input type="radio" name="color" value="blue" />Blue</label>
<label><input type="radio" name="color" value="yellow" />Yellow</label>
</fieldset>
Inapplicable
These <input>
and <button>
elements are disabled
and therefore not [focusable][].
<fieldset disabled>
<label>First name <input /></label><br />
<label>Last name <input /></label><br />
<button>submit</button>
</fieldset>
These links are rendered on a line.
<p>
The size of the <a href="https://www.w3.org/TR/WCAG21/#dfn-target">target</a> for
<a href="https://www.w3.org/TR/WCAG21/#dfn-pointer-inputs">pointer inputs</a> is at least 44 by 44
<a href="https://www.w3.org/TR/WCAG21/#dfn-css-pixels">CSS pixels</a>.
</p>
Implementation details (April 2024)
- Alfa currently ignores the labels of labelable elements when computing their size; this may create false positives for these elements.
- Alfa considers any
<input>
element as a User Agent controlled component; this creates false negatives for<input>
elements whose size has been altered by authors. - Alfa considers that the clickable area of an element matches its border box, as returned by the
getBoundingClientRect
JavaScript function. This has the following consequences:- Elements that are partly hidden behind other elements, or whose shape has been altered (
<area>
elements, or use of CSS properties such asclip-path
,transform
, orborder-radius
) have smaller clickable areas; this may creates false negative. - Elements with text overflowing their border box have larger clickable areas; this may create false positives. Alfa assumes that such cases are rare and usually rejected by Quality Assurance processes before publishing pages.
- Elements that are partly hidden behind other elements, or whose shape has been altered (
Acknowledgments
This document includes material copied from or derived from https://www.w3.org/WAI/standards-guidelines/act/rules/gi8qkf/. Copyright © 2024 W3C® (MIT, ERCIM, Keio, Beihang).