Skip to content

Latest commit

 

History

History
executable file
·
208 lines (148 loc) · 4.98 KB

aria-hidden-no-focusable-content-6cfa84.md

File metadata and controls

executable file
·
208 lines (148 loc) · 4.98 KB
Raw
id name rule_type description accessibility_requirements input_aspects acknowledgments
6cfa84
Element with `aria-hidden` has no focusable content
atomic
This rule checks that elements with an `aria-hidden` attribute do not contain focusable elements.
wcag20:1.3.1 wcag20:4.1.2 using-aria:fourth
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
forConformance failed passed inapplicable
true
not satisfied
further testing needed
further testing needed
title forConformance failed passed inapplicable
Fourth rule of ARIA use
false
not satisfied
further testing needed
further testing needed
DOM Tree
CSS Styling
authors funding
Wilco Fiers
WAI-Tools

Applicability

This rule applies to any element with an aria-hidden attribute value of true.

Note: Using aria-hidden="false" on a descendant of an element with aria-hidden="true" does not expose that element. aria-hidden="true" hides itself and all its content from assistive technologies.

Expectation

None of the target elements are part of sequential focus navigation, nor do they have descendants in the flat tree that are part of sequential focus navigation.

Assumptions

There are currently no assumptions

Accessibility Support

Some user agents treat the value of aria-hidden attribute as case-sensitive.

Background

By adding aria-hidden="true" to an element, content authors ensure that assistive technologies will ignore the element. This can be used to hide parts of a web page that are pure decoration, such as icon fonts - that are not meant to be read by assistive technologies.

A focusable element with aria-hidden="true" is ignored as part of the reading order, but still part of the focus order, making its state of visible or hidden unclear.

Test Cases

Passed

Passed Example 1

Content not focusable by default.

<p aria-hidden="true">Some text</p>

Passed Example 2

Content hidden through CSS.

<div aria-hidden="true">
	<a href="/" style="display:none">Link</a>
</div>

Passed Example 3

Content taken out of sequential focus order using tabindex.

<div aria-hidden="true">
	<button tabindex="-1">Some button</button>
</div>

Passed Example 4

Content made unfocusable through disabled attribute.

<input disabled aria-hidden="true" />

Passed Example 5

aria-hidden can't be reset once set to true on an ancestor.

<div aria-hidden="true">
	<div aria-hidden="false">
		<button tabindex="-1">Some button</button>
	</div>
</div>

Passed Example 6

Content taken out of sequential focus order using tabindex.

<div aria-hidden="true">
	<button tabindex="-2">Some button</button>
</div>

Failed

Failed Example 1

Focusable off screen link.

<div aria-hidden="true">
	<a href="/" style="position:absolute; top:-999em">Link</a>
</div>

Failed Example 2

Focusable form field, incorrectly disabled.

<div aria-hidden="true">
	<input aria-disabled="true" />
</div>

Failed Example 3

aria-hidden can't be reset once set to true on an ancestor.

<div aria-hidden="true">
	<div aria-hidden="false">
		<button>Some button</button>
	</div>
</div>

Failed Example 4

Focusable content through tabindex.

<p tabindex="0" aria-hidden="true">Some text</p>

Failed Example 5

Focusable summary element.

<details aria-hidden="true">
	<summary>Some button</summary>
	<p>Some details</p>
</details>

Inapplicable

Inapplicable Example 1

Ignore aria-hidden with null value.

<button tabindex="-1" aria-hidden>Some button</button>

Inapplicable Example 2

Ignore aria-hidden false.

<p aria-hidden="false">Some text</p>

Inapplicable Example 3

Incorrect value of aria-hidden.

<div aria-hidden="yes">
	<p>Some text</p>
</div>