Skip to content

target-size-empty-kj4tr0.md

Latest commit

 

History

History
159 lines (124 loc) · 4.78 KB

target-size-empty-kj4tr0.md

File metadata and controls

159 lines (124 loc) · 4.78 KB
id kj4tr0
name Interactive component has no clickable area
rule_type atomic
description This rule checks that elements that can receive pointer events have an actual size reduced to 0.
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 some 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 test_assets
Jean-Yves Moyen

Applicability

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

Expectation

Each test target has an empty clickable area, and its clickable area cannot be made non-empty through scrolling.

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 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.

Background

Bibliography

Test Cases

Passed

Passed Example 1

This button has an empty clickable area because it is moved off-screen.

<style>
	#target {
		width: 44px;
		height: 44px;
		border-radius: 0;
		position: absolute;
		left: -9999px;
	}
</style>
<button id="target" onclick="alert('hello')">Hello</button>

Failed

Failed Example 1

This button has a non-empty clickable area.

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

Failed Example 2

This button has a clickable area that can be made non-empty through vertical scrolling.

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

Failed Example 3

This button has a clickable area that can be made non-empty through horizontal scrolling.

<style>
	#target {
		width: 35px;
		height: 35px;
		border-radius: 0;
		position: absolute;
		left: 110vw;
	}
</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>