Skip to content

Proposed Interactive component has enhanced size

Description

This rule checks that elements that can receive pointer events have a size of at least 44×44 pixels, unless they are inline, are user agent controlled, or have essential size.

Applicability

This rule applies to any HTML element which is observed as a pointer events target, except when one of the following is true:

Expectation

For each target element, at least one of the following is true:

Background

While the rule, and Success Criterion 2.5.5 Target Size (enhanced), apply targets of any shape, the test cases mostly focus on targets whose clickable area is itself an aligned rectangle. This acknowledges the fact that the border box of an element can easily be queried by automated tools (e.g., through the getBoundingClientRect function), and therefore it is expected that most automated tools will perform better on such elements. For elements with irregular clickable shapes, including area elements, nested targets, or elements that have been rotated or clipped, the actual clickable area is much harder to determine and may be much smaller than the border box. These elements could fail the rule while their border box contains a large enough aligned rectangle. In order to allow automated tools to have a consistent implementation of this rule, it does not contain such test cases, notably all Failed test cases have a border box which is too small.

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 2025, the ACT rules Community Group is not aware of actual cases resulting in significantly different clickable areas.

Bibliography

Accessibility Requirements Mapping

Secondary Requirements

This rule is related to the following accessibility requirements, but was not designed to test this requirements directly. These secondary requirements can either be stricter than the rule requires, or may be satisfied in ways not tested by the rule:

Input Aspects

The following aspects are required in using this rule.

Test Cases

These Javascript and CSS files are used in several examples:

File /test-assets/target-size/highlight-rect.js:

/**
 * Create an element with class "highlight" around a node.
 * The node needs to be non-static to allow for z-index lower than
 * the highlighted element, otherwise the .highlight element will prevent
 * click events to reach the node.
 *
 * An optional set of classes can also be added to the highlighted element,
 * these are mostly intended to be either ['good'] (default) or ['bad'] to set
 * the color and style of the highlighting border.
 */
function highlightRect(node, classes = ['good']) {
	// Get the bounding client rect of the node
	const range = document.createRange()
	range.setStart(node, 0)
	// Take the length of text nodes, if it exists, otherwise (element), take
	// all child nodes
	range.setEnd(node, node?.length ?? node.childNodes.length)
	const rect = range.getBoundingClientRect()

	// Create a div sized to that rect
	// See https://developer.mozilla.org/en-US/docs/Web/API/Element/getClientRects#javascript
	const div = document.createElement('div')
	div.classList.add('highlight', ...classes)
	div.style.top = `${rect.top}px`
	div.style.left = `${rect.left}px`
	div.style.width = `${rect.width - 2}px`
	div.style.height = `${rect.height - 2}px`
	document.body.appendChild(div)

	return div
}

File /test-assets/target-size/shared-styles.css:

.highlight {
	position: absolute;
	z-index: 0;
}

.good {
	border: green solid 1px;
}
.bad {
	border: red dashed 1px;
}

.highlightable {
	position: relative;
	z-index: 5;
}

.placeholder {
	background-color: transparent;
	border: dashed 2px black;
	padding: 0;
	position: absolute;
}

Passed

Passed Example 1

Open in a new tab

This link 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>

Passed Example 2

Open in a new tab

This button 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>

Passed Example 3

Open in a new tab

This input element, combined with its implicit label and its padding, has a clickable area containing a rectangle of approximately 81×48px. Note that this rectangle has to intersect both the input element itself, and the text of the label (within the solid green border), as none of the individual components are enough.

<head>
	<title>Passed Example 3</title>
	<link rel="stylesheet" href="/test-assets/target-size/shared-styles.css" />
	<script src="/test-assets/target-size/highlight-rect.js"></script>
</head>
<body>
	<label id="label" style="padding: 6px 0;" class="highlightable">
		Given Name<br />
		<input id="input" style="width: 200px" />
	</label>
	<script>
		highlightRect(document.getElementById('label').firstChild)
	</script>
</body>

Passed Example 4

Open in a new tab

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 text of the label (within the solid green border), as none of the individual components are enough.

<head>
	<title>Passed Example 4</title>
	<link rel="stylesheet" href="/test-assets/target-size/shared-styles.css" />
	<script src="/test-assets/target-size/highlight-rect.js"></script>
</head>
<body>
	<label for="input" id="label" style="padding: 6px 0;" class="highlightable"> Given Name<br /> </label>
	<input id="input" style="width: 200px" />
	<script>
		highlightRect(document.getElementById('label').firstChild)
	</script>
</body>

Passed Example 5

Open in a new tab

This button has a clickable area of approximately 212×54px due to the overflowing text being clickable. The div element is only here to visually display the clickable area of the text.

<head>
	<title>Passed Example 5</title>
	<link rel="stylesheet" href="/test-assets/target-size/shared-styles.css" />
	<style>
		#target {
			width: 20px;
			font-size: 50px;
			overflow: visible;
			white-space: nowrap;
			border-radius: 0;
		}
	</style>
	<script src="/test-assets/target-size/highlight-rect.js"></script>
</head>
<body>
	<button id="target" class="highlightable" onclick="alert('hello')">
		Say Hello
	</button>

	<script>
		highlightRect(document.getElementById('target').firstChild)
	</script>
</body>

Passed Example 6

Open in a new tab

This button, together with its padding and border, has a clickable area of more than 44×44px. The solid green border shows the clickable area while the dashed red one shows the inner text (without sizing nor padding).

<head>
	<title>Passed Example 6</title>
	<link rel="stylesheet" href="/test-assets/target-size/shared-styles.css" />
	<style>
		#target {
			width: 35px;
			height: 35px;
			border-radius: 0;
			padding: 4px;
		}
	</style>
	<script src="/test-assets/target-size/highlight-rect.js"></script>
</head>
<body>
	<div role="button" id="target" class="good highlightable" onclick="alert('hello')">Hi</div>
	<script>
		highlightRect(document.getElementById('target').firstChild, ['bad'])
	</script>
</body>

Passed Example 7

Open in a new tab

The #small button has a clickable area of only 35×35px, but there is an instrument to achieve the same function with a 44×44px clickable area (namely, the #large button).

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

Passed Example 8

Open in a new tab

This button has a clickable area containing a 44×44px rectangle. Even though it is partially obscured by the dashed red div, its remaining clickable area contains a 44×44px rectangle delimited by prolonging the solid green lines.

<head>
	<title>Passed Example 9</title>
	<link rel="stylesheet" href="/test-assets/target-size/shared-styles.css" />
	<style>
		.cover {
			position: absolute;
			z-index: 6;
			top: 0;
			left: 55px;
			height: 100px;
			width: 100px;
		}
		#target {
			height: 50px;
			border-radius: 0;
		}
		.hlines {
			top: 10px;
			left: -10px;
			width: 100px;
			height: 44px;
			border-left: none;
			border-right: none;
		}
		.vlines {
			top: -10px;
			left: 9px;
			width: 44px;
			height: 100px;
			border-top: none;
			border-bottom: none;
		}
	</style>
</head>
<body>
	<button id="target" class="highlightable" onclick="alert('Hello')">
		Say Hello
	</button>

	<div class="cover bad"></div>
	<div class="hlines good highlight"></div>
	<div class="vlines good highlight"></div>
</body>

Passed Example 9

Open in a new tab

This button has a clickable area of roughly 73×50px. The div element with a dashed red border does not obscure it because of its pointer-events: none CSS property that let the clicks go through.

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

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

Passed Example 10

Open in a new tab

This button has a 50×50px clickable area. The div with a dashed red border is not obscuring it because it can be scrolled out of the way. The solid green lines hint at a 44×44px area inside the button.

<head>
	<title>Passed Example 12</title>
	<link rel="stylesheet" href="/test-assets/target-size/shared-styles.css" />
	<style>
		.cover {
			position: relative;
			left: 30px;
			height: 100px;
			width: 100px;
			pointer-events: all;
		}
		#target {
			height: 50px;
			border-radius: 0;
		}
		.hlines {
			top: 10px;
			left: -10px;
			width: 100px;
			height: 44px;
			border-left: none;
			border-right: none;
		}
		.vlines {
			top: -10px;
			left: 9px;
			width: 44px;
			height: 100px;
			border-top: none;
			border-bottom: none;
		}
		.scroller {
			z-index: 6;
			position: absolute;
			top: 0;
			overflow-y: scroll;
			height: 80px;
			pointer-events: none;
		}
		.spacer {
			height: 100px;
		}
	</style>
</head>
<body>
	<div class="scroller">
		<div class="cover bad"></div>
		<div class="spacer"></div>
	</div>

	<button id="target" class="highlightable" onclick="alert('Hello')">
		Say Hello
	</button>
	<div class="hlines good highlight"></div>
	<div class="vlines good highlight"></div>
</body>

Passed Example 11

Open in a new tab

The clickable area of this button contains a 44×44px aligned rectangle. Note that the actual border box has to be much larger to account for the rounded corners.

<style>
	#target {
		width: 60px;
		height: 60px;
		border-radius: 30%;
	}
</style>
<button id="target" onclick="alert('hello')">Hello</button>

Passed Example 12

Open in a new tab

This button has been clipped, leaving a clickable area containing a 45×45px aligned rectangle.

<head>
	<title>Failed Example</title>
	<link rel="stylesheet" href="/test-assets/target-size/shared-styles.css" />
	<style>
		#target {
			height: 50px;
			width: 80px;
			text-align: center;
			clip-path: polygon(20px 0px, 20px 45px, 65px 45px, 65px 0px);
			background-color: #0074d9;
		}
	</style>
</head>
<body>
	<div id="target" role="button" onclick="alert('Hello')">
		Hello
	</div>
</body>

Failed

Failed Example 1

Open in a new tab

This button 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>

Failed Example 2

Open in a new tab

This link only has a clickable area of approximately 66×18 pixels, as shown by its border.

<head>
	<title>Failed Example 2</title>
	<link rel="stylesheet" href="/test-assets/target-size/shared-styles.css" />
	<style>
		#target {
			line-height: 50px;
		}
	</style>
</head>
<body>
	<a id="target" class="bad" href="https://www.w3.org/WAI/standards-guidelines/act/rules/">ACT rules</a>
</body>

Failed Example 3

Open in a new tab

This custom button has a clickable area of approximately 18×20px, as shown by its dashed red border.

<head>
	<title>Failed Example 3</title>
	<link rel="stylesheet" href="/test-assets/target-size/shared-styles.css" />
</head>
<body>
	<span class="bad" role="button" onclick="alert('Hello')">Hi</span>
</body>

Failed Example 4

Open in a new tab

This input, 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>

Failed Example 5

Open in a new tab

The #small button has a clickable area of only 35×35px. The #large button has a clickable area of 44×44px, but it does not achieve the same objective.

<style>
	#small {
		width: 35px;
		height: 35px;
		border-radius: 0;
	}
	#large {
		width: 44px;
		height: 44px;
		border-radius: 0;
	}
</style>
<button id="small" onclick="alert('Hello')">Hi</button>
<button id="large" onclick="alert('Good-bye')">Bye</button>

Failed Example 6

Open in a new tab

These links are have a clickable area of approximately 184×17px and 267×17px. There ancestor block box is created by the li elements which contain no other text node (except for the ::marker pseudo-element), hence they are not in a block of text.

<p>Useful links for the ACT rules group:</p>
<ul>
	<li><a href="https://github.com/act-rules/act-rules.github.io">ACT rules Github repository</a></li>
	<li><a href="https://www.w3.org/community/act-r/">ACT Rules Community Group homepage</a></li>
</ul>

Failed Example 7

Open in a new tab

This button only has a clickable area of approximately 20×45px, because it is obscured by the div with a dashed red border. The solid green lines hint at how a 44×44px area would fit inside the button, but not inside the non-obscured part.

<head>
	<title>Failed Example 6</title>
	<link rel="stylesheet" href="/test-assets/target-size/shared-styles.css" />
	<style>
		.cover {
			position: absolute;
			z-index: 6;
			top: 0;
			left: 30px;
			height: 100px;
			width: 100px;
		}
		#target {
			height: 50px;
			border-radius: 0;
		}
		.hlines {
			top: 10px;
			left: -10px;
			width: 100px;
			height: 44px;
			border-left: none;
			border-right: none;
		}
		.vlines {
			top: -10px;
			left: 9px;
			width: 44px;
			height: 100px;
			border-top: none;
			border-bottom: none;
		}
	</style>
</head>
<body>
	<button id="target" class="highlightable" onclick="alert('Hello')">
		Say Hello
	</button>

	<div class="cover bad"></div>
	<div class="hlines good highlight"></div>
	<div class="vlines good highlight"></div>
</body>

Failed Example 8

Open in a new tab

This button only has a clickable area of approximately 20×45px, because it is obscured by the div with a dashed red border. Even though the div is scrollable, it is not scrollable fully out of the way and always obscures the button. The solid green lines hint at how a 44×44px area would fit inside the button, but not inside the never obscured part.

<head>
	<title>Failed Example 7</title>
	<link rel="stylesheet" href="/test-assets/target-size/shared-styles.css" />
	<style>
		.cover {
			position: relative;
			left: 30px;
			height: 100px;
			width: 100px;
			pointer-events: all;
		}
		#target {
			height: 50px;
			border-radius: 0;
		}
		.hlines {
			top: 10px;
			left: -10px;
			width: 100px;
			height: 44px;
			border-left: none;
			border-right: none;
		}
		.vlines {
			top: -10px;
			left: 9px;
			width: 44px;
			height: 100px;
			border-top: none;
			border-bottom: none;
		}
		.scroller {
			z-index: 6;
			position: absolute;
			top: 0;
			overflow-y: scroll;
			height: 80px;
			pointer-events: none;
		}
		.spacer {
			height: 30px;
		}
	</style>
</head>
<body>
	<div class="scroller">
		<div class="cover bad"></div>
		<div class="spacer"></div>
	</div>

	<button id="target" class="highlightable" onclick="alert('Hello')">
		Say Hello
	</button>
	<div class="hlines good highlight"></div>
	<div class="vlines good highlight"></div>
</body>

Failed Example 9

Open in a new tab

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>

Failed Example 10

Open in a new tab

The zoom buttons do not have essential size; they are too small. The pin (red square) on this map has essential size.

<style>
	.map {
		background-image: url('/test-assets/target-size/map-background.jpg');
		width: 1250px;
		height: 1250px;
	}
	.zoom {
		position: absolute;
		left: 1230px;
		height: 20px;
		width: 20px;
		background-color: white;
		border: 1px solid red;
	}
</style>

Location of ACT rules headquarters:
<div class="map"></div>
<input
	type="image"
	class="zoom"
	src="/test-assets/target-size/zoom-in.png"
	style="top: 35px;"
	alt="Zoom in"
	onclick="alert('Zooming in.')"
/>
<input
	type="image"
	class="zoom"
	src="/test-assets/target-size/zoom-out.png"
	style="top: 56px;"
	alt="Zoom out"
	onclick="alert('Zooming out.')"
/>

Failed Example 11

Open in a new tab

The clickable area of this button does not contain a 44×44px aligned rectangle.

<style>
	#target {
		width: 24px;
		height: 24px;
		border-radius: 0;
		rotate: 45deg;
	}
</style>
<button id="target" onclick="alert('Hello')">Hi</button>

Failed Example 12

Open in a new tab

The clickable area of this button does not contain a 44×44px aligned rectangle.

<style>
	#target {
		width: 40px;
		height: 40px;
		border-radius: 30%;
	}
</style>
<button id="target" onclick="alert('hello')">Hello</button>

Failed Example 13

Open in a new tab

The clickable area of this button only contains a 25×45px aligned rectangle.

<head>
	<title>Failed Example</title>
	<link rel="stylesheet" href="/test-assets/target-size/shared-styles.css" />
	<style>
		#target {
			height: 50px;
			width: 40px;
			text-align: center;
			clip-path: polygon(10px 0px, 10px 45px, 35px 45px, 35px 0px);
			background-color: #0074d9;
		}
	</style>
</head>
<body>
	<div id="target" role="button" onclick="alert('Hello')">
		Hi
	</div>
</body>

Inapplicable

Inapplicable Example 1

Open in a new tab

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

Open in a new tab

This button is not observed as a pointer events target 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>

Inapplicable Example 3

Open in a new tab

This button has an always empty clickable area because it is moved off-screen and cannot be scrolled to.

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

Inapplicable Example 4

Open in a new tab

These links are in a block of text.

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

Inapplicable Example 5

Open in a new tab

These links are in a block of text

<p>Useful links for the ACT rules group:</p>
<ul>
	<li>
		<a href="https://github.com/act-rules/act-rules.github.io">ACT rules Github repository</a> where most of our work
		happens;
	</li>
	<li><a href="https://www.w3.org/community/act-r/">ACT Rules Community Group homepage</a> to join the group.</li>
</ul>

Inapplicable Example 6

Open in a new tab

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>

Inapplicable Example 7

Open in a new tab

The pin (red square) on this map has essential size because it is important to pinpoint the exact location.

<style>
	.map {
		background-image: url('/test-assets/target-size/map-background.jpg');
		width: 1250px;
		height: 1250px;
	}
	.dot {
		height: 15px;
		width: 15px;
		background-color: red;
		display: inline-block;
	}
</style>

Location of ACT rules headquarters:
<div class="map"></div>
<a
	class="dot"
	style="position: absolute; top: 597px; left: 818px"
	href="https://www.w3.org/WAI/standards-guidelines/act/rules/"
></a>

Glossary

Aligned rectangle

A set of coordinates R is an aligned rectangle if there exist a coordinate (x, y) and numbers w and h such that all coordinates (a, b) with x ⩽ a ⩽ x+w and y ⩽ b ⩽ y+h are part of R, and reciprocally all coordinates (a, b) in R verify x ⩽ a ⩽ x+w and y ⩽ b ⩽ y+h.

R is then said to have corner (x, y), width w, and height h.

Note that the rectangle is “aligned” in the sense that its sides align with the axis of the coordinate system.

Clickable area

The directly clickable area of an element is the set of all viewport coordinates for which the element is the topmost event target

The clickable area of an element is the union of its directly clickable area and that of its implicit or explicit label. Clickable areas may contain several disconnected parts.

An element has an always empty clickable area if its clickable area is empty and cannot be made non-empty through scrolling.

Essential Target Size

An element which is observed as a pointer events target has essential target size if at least one of the following is true:

Explicit Semantic Role

The explicit semantic role of an element is determined by its role attribute (if any).

The role attribute takes a list of tokens. The explicit semantic role is the first valid role in this list. The valid roles are all non-abstract roles from WAI-ARIA Specifications. If the element has no role attribute, or if it has one with no valid role, then this element has no explicit semantic role.

Other roles may be added as they become available. Not all roles will be supported in all assistive technologies. Testers are encouraged to adjust which roles are allowed according to the accessibility support base line. For the purposes of executing test cases in all rules, it should be assumed that all roles are supported by assistive technologies so that none of the roles fail due to lack of accessibility support.

Focusable

An element is focusable if one or both of the following are true:

Exception: Elements that lose focus and do not regain focus during a period of up to 1 second after gaining focus, without the user interacting with the page the element is on, are not considered focusable.

Notes:

Implicit Semantic Role

The implicit semantic role of an element is a pre-defined value given by the host language which depends on the element and its ancestors.

Implicit roles for HTML and SVG, are documented in the HTML accessibility API mappings (working draft) and the SVG accessibility API mappings (working draft).

In a Block of Text

An element E is in a block of text if its closest inclusive ancestor which creates a block box contains at least one non-whitespace text node descendant (other than a ::marker pseudo-element) that is not also a descendant of E.

Included in the accessibility tree

Elements included in the accessibility tree of platform specific accessibility APIs are exposed to assistive technologies. This allows users of assistive technology to access the elements in a way that meets the requirements of the individual user.

The general rules for when elements are included in the accessibility tree are defined in the core accessibility API mappings. For native markup languages, such as HTML and SVG, additional rules for when elements are included in the accessibility tree can be found in the HTML accessibility API mappings (working draft) and the SVG accessibility API mappings (working draft).

For more details, see examples of included in the accessibility tree.

Programmatically hidden elements are removed from the accessibility tree. However, some browsers will leave focusable elements with an aria-hidden attribute set to true in the accessibility tree. Because they are hidden, these elements are considered not included in the accessibility tree. This may cause confusion for users of assistive technologies because they may still be able to interact with these focusable elements using sequential keyboard navigation, even though the element should not be included in the accessibility tree.

Instrument to achieve an objective

An HTML element that when activated allows an end-user to achieve an objective.

Note: Any rule that uses this definition must provide an unambiguous description of the objective the instrument is used to achieve.

Marked as decorative

An element is marked as decorative if one or more of the following conditions is true:

Elements are marked as decorative as a way to convey the intention of the author that they are pure decoration. It is different from the element actually being pure decoration as authors may make mistakes. It is different from the element being effectively ignored by assistive technologies as rules such as presentational roles conflict resolution may overwrite this intention.

Elements can also be ignored by assistive technologies if they are programmatically hidden. This is different from marking the element as decorative and does not convey the same intention. Notably, being programmatically hidden may change as users interact with the page (showing and hiding elements) while being marked as decorative should stay the same through all states of the page.

Namespaced Element

An element with a specific namespaceURI value from HTML namespaces. For example an “SVG element” is any element with the “SVG namespace”, which is http://www.w3.org/2000/svg.

Namespaced elements are not limited to elements described in a specification. They also include custom elements. Elements such as a and title have a different namespace depending on where they are used. For example a title in an HTML page usually has the HTML namespace. When used in an svg element, a title element has the SVG namespace instead.

Observed as a pointer events target

An element is observed as a pointer events target when all the following conditions are true:

Outcome

A conclusion that comes from evaluating an ACT Rule on a test subject or one of its constituent test target. An outcome can be one of the five following types:

Note: A rule has one passed or failed outcome for every test target. When a tester evaluates a test target it can also be reported as cantTell if the rule cannot be tested in its entirety. For example, when applicability was automated, but the expectations have to be evaluated manually.

When there are no test targets the rule has one inapplicable outcome. If the tester is unable to determine whether there are test targets there will be one cantTell outcome. And when no evaluation has occurred the test target has one untested outcome. This means that each test subject always has one or more outcomes.

Outcomes used in ACT Rules can be expressed using the outcome property of the [EARL10-Schema][].

Programmatically Hidden

An HTML element is programmatically hidden if either it has a computed CSS property visibility whose value is not visible; or at least one of the following is true for any of its inclusive ancestors in the flat tree:

Note: Contrary to the other conditions, the visibility CSS property may be reverted by descendants.

Note: The HTML standard suggests setting the CSS display property to none for elements with the hidden attribute. While not required by HTML, all modern browsers follow this suggestion. Because of this the hidden attribute is not used in this definition. In browsers that use this suggestion, overriding the CSS display property can reveal elements with the hidden attribute.

Semantic Role

The semantic role of an element is determined by the first of these cases that applies:

  1. Conflict If the element is marked as decorative, but the element is included in the accessibility tree; or would be included in the accessibility tree when it is not programmatically hidden, then its semantic role is its implicit role.
  2. Explicit If the element has an explicit role, then its semantic role is its explicit role.
  3. Implicit The semantic role of the element is its implicit role.

This definition can be used in expressions such as “semantic button” meaning any element with a semantic role of button.

User-Agent Controlled Component

A User-Agent Controlled Component is an [HTML element][namespace element] for which all the following are true:

WAI-ARIA specifications

The WAI ARIA Specifications group both the WAI ARIA W3C Recommendation and ARIA modules, namely:

Note: depending on the type of content being evaluated, part of the specifications might be irrelevant and should be ignored.

Rule Versions

This is the first version of this ACT rule.

Implementations

There are currently no known implementations for this rule. If you would like to contribute an implementation, please read the ACT Implementations page for details.

Back to Top

This is an unpublished draft preview that might include content that is not yet approved. The published website is at w3.org/WAI/.