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 a 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 as clip-path, transform, or border-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.