Skip to content

target-size-ua-control-vcup8d.md

Latest commit

 

History

History
136 lines (104 loc) · 4.47 KB

target-size-ua-control-vcup8d.md

File metadata and controls

136 lines (104 loc) · 4.47 KB
id vcup8d
name Interactive component has size controlled by User Agent
rule_type atomic
description This rule checks that elements that can receive pointer events have a size controlled by the user agent.
accessibility_requirements
wcag21:2.5.5 wcag22:2.5.8
secondary
This success criterion is **less strict** than this rule. This is because the rule does not consider the size of the elements. Some of the failed examples may satisfy this success criterion.
secondary
This success criterion is **less strict** than this rule. This is because this criterion has a lower size requirement. Some of the failed examples may satisfy this success criterion.
input_aspects
DOM Tree
CSS Styling
acknowledgments
authors
Jean-Yves Moyen

Applicability

This rule applies to any HTML element which can be targeted by a pointer event.

Expectation

Each test target is a User Agent controlled component.

Assumptions

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][clickable area] for the same element. As of February 2024, the ACT rules Community Group is not aware of actual cases resulting in significantly different [clickable areas][clickable area].

Background

Bibliography

Test Cases

Passed

Passed Example 1

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

Failed Example 1

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: 1em;
		height: 1em;
	}
</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>

Failed Example 2

This button is not a User Agent controlled component.

<style>
	#target {
		width: 35px;
		height: 35px;
		border-radius: 0;
	}
</style>
<button id="target" onclick="alert('hello')">Hi</button>

Inapplicable

Inapplicable Example 1

These input elements and button are disabled and therefore not focusable.

<fieldset disabled>
	<label>First name <input /></label><br />
	<label>Last name <input /></label><br />
	<button>submit</button>
</fieldset>

Inapplicable Example 2

This button cannot be targeted by a pointer event because it is entirely covered by the div element with a dashed red border.

<head>
	<title>Inapplicable Example</title>
	<link rel="stylesheet" href="/test-assets/target-size/shared-styles.css" />
	<style>
		.cover {
			top: 0;
			height: 50px;
			width: 500px;
		}
	</style>
</head>
<body>
	<button onclick="alert('hello')">Say Hello</button>

	<div class="cover bad highlight"></div>
</body>