Skip to content

Latest commit

 

History

History
37 lines (22 loc) · 1.53 KB

aria-hidden.md

File metadata and controls

37 lines (22 loc) · 1.53 KB

Let's move on to the aria-hidden attribute.

aria-hidden

The aria-hidden attribute is used to indicate whether an element should be visible or hidden to assistive technologies.

Example:

<div aria-hidden="true">This content is hidden</div>

In this example, the content within the <div> is hidden from assistive technologies because aria-hidden is set to "true."

Best Practices:

  1. Use aria-hidden="true" on elements that you want to hide from assistive technologies.

  2. Setting aria-hidden="true" will remove the element and its children from the accessibility tree, making it effectively invisible to screen readers.

  3. This attribute is often used in conjunction with dynamically shown or hidden content to ensure that hidden content is not announced to screen reader users when it's not relevant.

  4. If an element is visually hidden but should still be announced by screen readers, prefer CSS techniques like display: none; or visibility: hidden; over aria-hidden.

Use Case:

Imagine you have a pop-up modal on your webpage, and you want to hide it from screen readers when it's not visible:

<div id="modal" aria-hidden="true">
  <!-- Modal content goes here -->
</div>

When the modal is hidden, setting aria-hidden="true" ensures that screen readers won't announce its content. When the modal is visible, you can dynamically update aria-hidden to "false" to make it accessible.

This attribute is a useful tool for managing visibility in a way that aligns with accessibility best practices.