Last updated:

Created by:

Success Criterion:

Description

This rule checks aria-hidden elements do not contain focusable elements

Accessibility Requirements

This conformance rule relates to:

Test Procedure

Applicability

The rule applies to any element with an aria-hidden="true" attribute.

Note: Using aria-hidden="false" on a decendent 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 focusable, nor do they contain a focusable element.

Assumptions

There are currently no assumptions

Accessibility support

There are no major accessibility support issues known for this rule.

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 decorative parts of a web page, 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 it’s state of visible or hidden unclear.

Test Cases

Passed

Passed example 1

Content not focusable by default.

Code Snippet:
 <p aria-hidden="true">Some text</p>
 
Example Output: Open in a new tab/ window

Passed example 2

Content hidden through CSS.

Code Snippet:
 <div aria-hidden="true">
	<a href="/" style="display:none">Link</a>
</div>
 
Example Output: Open in a new tab/ window

Passed example 3

Content made unfocusable through tabindex.

Code Snippet:
 <div aria-hidden="true">
	<button tabindex="-1">Some button</button>
</div>
 
Example Output: Open in a new tab/ window

Passed example 4

Content made unfocusable through disabled.

Code Snippet:
 <input disabled aria-hidden="true" />
 
Example Output: Open in a new tab/ window

Passed example 5

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

Code Snippet:
 <div aria-hidden="true">
    <div aria-hidden="false">
        <button tabindex="-1">Some button</button>
    </div>
</div>
 
Example Output: Open in a new tab/ window

Failed

Failed example 1

Focusable off screen link.

Code Snippet:
 <div aria-hidden="true">
	<a href="/" style="position:absolute; top:-999em">Link</a>
</div>
 
Example Output: Open in a new tab/ window

Failed example 2

Focusable form field, incorrectly disabled.

Code Snippet:
 <div aria-hidden="true">
	<input aria-disabled="true" />
</div>
 
Example Output: Open in a new tab/ window

Failed example 3

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

Code Snippet:
 <div aria-hidden="true">
    <div aria-hidden="false">
        <button>Some button</button>
    </div>
</div>
 
Example Output: Open in a new tab/ window

Failed example 4

Focusable content through tabindex.

Code Snippet:
 <p tabindex="0" aria-hidden="true">Some text</p>
 
Example Output: Open in a new tab/ window

Failed example 5

Focusable summary element

Code Snippet:
 <details aria-hidden="true">
    <summary>Some button</summary>
    <p>Some details</p>
</details>
 
Example Output: Open in a new tab/ window

Inapplicable

Inapplicable example 1

Ignore aria-hidden with null value.

Code Snippet:
 <button tabindex="-1" aria-hidden>Some button</button>
 
Example Output: Open in a new tab/ window

Inapplicable example 2

Ignore aria-hidden false.

Code Snippet:
 <p aria-hidden="false">Some text</p>
 
Example Output: Open in a new tab/ window

Inapplicable example 3

Incorrect value of aria-hidden.

Code Snippet:
 <div aria-hidden="yes">
	<p>Some text</p>
</div>
 
Example Output: Open in a new tab/ window

Glossary

Focusable

Elements that can become the target of keyboard input as described in https://www.w3.org/TR/html/editing.html#focusable and https://www.w3.org/TR/html/editing.html#can-be-focused.

Test Aspects

Test aspects are defined as part of the ACT Rules format 1.0.
  • DOM Tree

  • CSS Styling

Contribute






GitHub

Contributing is open to anyone. We welcome any new issues or pull requests for changes. Auto WCAG Rules has conference calls every 4 weeks. If you are interested in becoming an active contributor or reviewer, we ask that you join the Auto WCAG Rules community group through the W3C Website. This requires setting up a W3C account, may require approval by the organization you work for if they are a W3C member.

Learn more about contributing to Auto WCAG Rules Join the Auto WCAG Rules community group now!