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

25 Nov, 2021
The HyperText Markup Language (HTML) is a powerful web development tool combined with CSS and JavaScript. Apart from these, HTML also uses Accessible Rich Internet Application (ARIA) to make web content affable for a person with disabilities. Although ARIA is beneficial, there are keywords common to both HTML and ARIA, creating perplexity among amateur learners.
HTML ‘hidden’: The HTML ‘hidden’ attribute is used when some content is obsolete and no longer necessary. It completely hides details from the user. It is a semantic indicator of state in HTML code. If this attribute is used then browsers will not display elements that have the hidden attribute specified. The hidden attribute can be seen using some condition or JavaScript used to see the hidden content.
Syntax: 
<element hidden>
Example: 
HTML
<!DOCTYPE html><html>    <head>        <title>hidden attribute</title>        <style>            body {                text-align:center;            }            h1 {                color:green;            }        </style>    </head>    <body>        <h1>GeeksforGeeks</h1>        <h2>hidden attribute</h2>                 <!-- hidden paragraph -->        <p hidden>A computer science portal for geeks</p>        </body></html>
Output: 
aria-hidden: Using ‘aria-hidden=”true”‘ removes the element and its children from the accessibility tree in some browsers the assisting technology but the content will displayed in the browser. According to the fourth rule of ARIA, the use of hidden characteristics is not allowed on the focusable element because it shall cause the user to focus on nothing. Do not use the aria-hidden=”true” inside of a <body> tag the whole page will be not accessible to assistive technology. 
Syntax:  
 <element aria-hidden="true/false">
Example:  
HTML
<!DOCTYPE html><html>    <head>        <title>aria-hidden="true/false" </title>        <style>            body {                text-align:center;            }            h1 {                color:green;            }        </style>    </head>    <body>        <h1>GeeksforGeeks</h1>        <h4>aria-hidden="true/false"</h4>                 <!-- aria-hidden="true" paragraph -->        <p arie-hidden="true">            A computer science portal for geeks        </p>        </body></html>                   
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: 
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
kalrap615
sumitgumber28
rkbhola5
Picked
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to update Node.js and NPM to next version ?
How to Insert Form Data into Database using PHP ?
Types of CSS (Cascading Style Sheet)
REST API (Introduction)
Form validation using HTML and JavaScript
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Convert a string to an integer in JavaScript
Top 10 Angular Libraries For Web Developers