Difference between 'hidden' and 'aria-hidden attributes in HTML

HTML - Hypertext Markup Language is a pre-set web designing language. When conjoined with other programming languages like CSS - cascading style sheets and JS - javascript, we can create many dynamic web applications to resolve day to day problems.

Apart from the technologies mentioned above, HTML utilizes technologies like ARIA - an accessible rich internet application, which helps the developer create friendly web content for people with certain capabilities.

With great advantages also come certain disadvantages. To start with, both HTML and ARIA contain certain keywords similar to both, which make a huge confusion amongst the beginners. For example, the hidden keyword is present in both HTML and ARIA.

HTML hidden attribute

HTML hidden attribute is specially used for the elements that are not displayed to the user until or unless some conditions or criterias are satisfied, i.e. elements whose content is not relevant for a certain user.

For instance, if we use a hidden attribute, the browser will not display the content of the element but using certain JavaScript operations, we can easily access the hidden attributes, and when the user meets certain conditions, the javascript will allow the browser to display the content of the hidden attribute

Syntax:

Example:

Program to display the use of hidden attribute

<html>
  <head>
    <title>hidden attribute</title>
    <style>
      body {
        text-align: center;
        border: 2px solid crimson;
      }
      h1 {
        color:crimson;
      }
    </style>
  </head>
  <body>
    <h1>Example of the "hidden" attribute</h1>
    <!-- hidden paragraph -->
    <p hidden>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Esse hic consequatur sed ipsa similique necessitatibus velit soluta veritatis provident delectus accusantium vero, expedita, natus aut illum, voluptate consectetur facilis sapiente! Deleniti incidunt numquam unde distinctio officiis ipsam mollitia error, ipsa debitis sequi? Ipsum esse ut minus dolorum, sapiente placeat magni.</p>
  </body>
</html>

Output

Difference between 'hidden' and 'aria-hidden attributes in HTML

Program to display the use of hidden attributes by accessing the elements with javascript

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hidden attributes</title>
<style>
  .container {
  font: 16px "Open Sans", Helvetica, Arial, sans-serif;
  border: 1px solid crimson;
  padding: 12px;
  width: 500px;
  text-align: center;
  border-radius: 10px;
}
.button {
  font: 22px "Open Sans";
  padding: 5px 36px;
  background-color: crimson;
  border: none;
  border-radius: 20px;
  color: aliceblue;
  text-shadow: black;
}
h1 {
  margin-top: 0;
  font-size: 175%;
  color: crimson;
}
</style>
</head>
<body> 
  <div id="show" class="container" hidden>
    <h1>Thanks!</h1>
    <p>Thank you by clicking the <strong>ok</strong> 
    you fulfil the criteria required to display the hidden content which was displayed using JAVASCRIPT!</p>
  </div>
<div id="hidden" class="container">
  <h1>this is an example of hidden attribute</h1>
  <p>By clicking "OK" you agree to display the hidden content!</p>
  <button class="button" id="okButton">OK</button>
</div>
<script>
document.getElementById("okButton")
        .addEventListener("click", function() {
  document.getElementById("hidden").hidden = true;
  document.getElementById("show").hidden = false;
}, false);
</script>
</body>
</html>

Output

Aria hidden attribute

Aria hidden attributes indicate to the user the importance of the content they are reading whether the content should be focused on or ignored. It indicates that elements with their child elements will not be visible or accessible to the client as defined by the programmer.

In aria-hidden, the element is not removed from the browser; instead, it is removed from the accessibility tree and the assisting technologies but still the content displayed on the browser. For instance, aria-hidden = " true "will only remove the desired element and children from the accessibility tree. It should only be used on the specific element if used with binding elements like the body. The entire web page will become inaccessible

Syntax:

Example:

Program to display aria hidden attributes

<!DOCTYPE html>
<html>
  <head>
    <title>aria hidden</title>
    <style>
      body {
        text-align: center;
        border: 2px solid crimson;
        border-radius: 20px;
      }
      h1 {
        color: crimson;
      }
      p{
        color: crimson;
      }
    </style>
  </head>
  <body>
    <h1>Example of the "aria-hidden" attribute</h1>
    <h4>aria-hidden="flase"</h4>
    <!-- aria-hidden="false" paragraph -->
    <p aria-hidden="false">
      Here is some accessible text
    </p>
    <h4>aria-hidden="true"</h4>    
    <!-- aria-hidden="true" paragraph -->
    <p arie-hidden="true">
      Here is some un accessible text
    </p>
  </body>
</html>

Output

Note: The aria-hidden indicates that the elements and all of its children are not visible to any user as implemented by the developer.

Difference between HTML hidden and aria-hidden:

HTML hidden	aria-hidden
HTML hides everything from the user, and the content is not displayed on the browser until or unless accessed by JavaScript.	ARIA's aria-hidden hides content from the assisting technology, but the items are displayed on the web browser
By using HTML hidden, you can remove desired content from the web browser to later displayed using properties	While using ARIA hidden, we don't remove the content from the browser.
You can apply the CSS style of display: none in HTML hidden.	ARIA's aria-hidden, no such script shall apply.