---
title: aria-hidden Not Focusable | Accessibility Rule
description: ARIA hidden element must not be focusable or contain focusable elements
source_url:
  html: https://testingbot.com/support/accessibility/web/rules/aria-hidden-focus
  md: https://testingbot.com/support/accessibility/web/rules/aria-hidden-focus/index.md
---
# Ensure aria-hidden elements are not focusable nor contain focusable elements

Rule ID: aria-hidden-focusUser Impact: seriousGuidelines: WCAG 2.0

## Why It Matters

Applying `aria-hidden="true"` to an element hides it and all its children from assistive technologies, such as screen readers. However, users can still navigate to any focusable child elements using the keyboard. This discrepancy means that while these elements are focusable, their content remains inaccessible to assistive technology users, leading to confusion and a poor user experience.

## About This Rule

This rule ensures that elements with `aria-hidden="true"` do not contain focusable elements. It passes if any of the following are true:

- The element with `aria-hidden="true"` contains no focusable elements.
- The element with `aria-hidden="true"` contains only focusable elements that are disabled or not tabbable.

## How to Fix

- Use `aria-hidden="true"` only on elements whose content is decorative or redundant for assistive technology users.
- Restructure the code so that focusable elements are not children of an element with `aria-hidden="true"`.
- Make child elements non-focusable by applying the `disabled` attribute or non-tabbable by setting `tabindex="-1"`.
- Where appropriate, hide elements from all users by applying the `hidden` attribute or using CSS properties like `display: none;` or `visibility: hidden;`.

### Example

#### Fail

An alert is positioned off-screen and marked with `aria-hidden="true"` until it’s needed. However, the alert contains an OK button that remains focusable even when the alert is hidden. Keyboard users can tab to the button but cannot discern its purpose.

    <div class="alert" aria-hidden="true">
      <p>This is an important alert message.</p>
      <button>OK</button>
    </div>

#### Pass

When the alert is positioned off-screen, its OK button is marked with `tabindex="-1"`. Keyboard users encounter the button only when the alert is on-screen.

    <div class="alert" aria-hidden="true">
      <p>This is an important alert message.</p>
      <button tabindex="-1">OK</button>
    </div>

## Other Rules

Interested in other web accessibility rules? Please see these other rules:

- [aria-input-field-name](https://testingbot.com/support/accessibility/web/rules/aria-input-field-name)
- [aria-meter-name](https://testingbot.com/support/accessibility/web/rules/aria-meter-name)
- [aria-progressbar-name](https://testingbot.com/support/accessibility/web/rules/aria-progressbar-name)
- [aria-prohibited-attr](https://testingbot.com/support/accessibility/web/rules/aria-prohibited-attr)
- [aria-required-attr](https://testingbot.com/support/accessibility/web/rules/aria-required-attr)