What is the Difference Between the hidden and aria-hidden Attributes

Difference between the hidden and aria-hidden attributes

HTML uses ARIA (Accessible Rich Internet Applications) to make web content and applications accessible for people with disabilities. There are some keywords such as "hidden" that are common to both HTML and ARIA, thus creating confusion among learners.

The HTML hidden attribute is used when some content isn’t relevant any more. It can also be needed not to allow users to see an element until some condition has been met. When an element has a hidden attribute, the browser should not show it. After that, with the help of Javascript, you can remove the hidden attribute and make the element visible.

Watch a course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Example of using the hidden attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
      }
      h1 {
        color: #225d9c;
      }
    </style>
  </head>
  <body>
    <h1>Example of the "hidden" attribute</h1>
    <!-- hidden paragraph -->
    <p hidden>Here is some text</p>
  </body>
</html>

The aria-hidden attribute tells screen-readers whether or not they must ignore the element. It specifies that an element with its descendants will not be visible or perceivable to users as implemented by the author. This attribute must be used with caution to hide visibly rendered content from assistive technology only when the process of hiding this content has a purpose of improving the experience for users of assistive technologies by removing redundant content. Authors must ensure that equivalent and identical meaning and functionality are accessible to assistive technologies.

Example of using the aria-hidden attribute:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        text-align: center;
      }
      h1 {
        color: #225d9c;
      }
    </style>
  </head>
  <body>
    <h1>Example of the "aria-hidden" attribute</h1>
    <!-- aria-hidden="false" paragraph -->
    <p aria-hidden="false">
      Here is some text
    </p>
  </body>
</html>