Difference between 'hidden' and 'aria-hidden' attributes in HTML Last Updated : 25 Nov, 2021 Comments Improve Suggest changes Like Article Like Report 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: HTML hiddenaria-hiddenHTML hidden hides everything from the user.ARIA's aria-hidden, hides content from the assisting technologyBy using HTML hidden, you can remove focusable content from the browser navigation.While using ARIA hidden, we don't remove the content from the browser.You can apply CSS style of display:none in HTML hidden.ARIA's aria-hidden, no such script shall apply. Comment More infoAdvertise with us Next Article Difference between 'hidden' and 'aria-hidden' attributes in HTML T tripathishashwat Follow Improve Article Tags : Web Technologies HTML Similar Reads Difference between disabled and readonly attribute in HTML In this article, we will see the basic difference between the disabled & readonly attributes in HTML, along with understanding through the basic examples. Both disabled and readonly attributes in HTML are used to restrict user input in form fields. They only differ in how they restrict input and 3 min read Difference between id and class Attributes in HTML The id and class attributes in HTML are used for element identification and styling. The id attribute uniquely identifies a single element, while the class attribute can be applied to multiple elements. Both are essential for CSS styling and JavaScript manipulation.HTML id AttributeThe id attribute 3 min read What is the difference between properties and attributes in HTML? HTML is the standard language for creating documents that are intended to be displayed on web browsers. It is very usual to get confused with attributes and properties while performing DOM object manipulation in JavaScript. Before learning about the differences, let us first define the Document Obje 4 min read What's the difference between element value and data attribute ? The element value attribute specifies the default value of the HTML element whereas the data attribute allows you to store extra data to tags in HTML when no other HTML attribute can do so. Element value: The HTML element is the collection of start and end tags with the content inserted in between t 2 min read How to Display/Hide functions using aria-hidden attribute in jQuery ? The 'aria-hidden' attribute plays an important role in context of web-accessibility. It is a simple way to make web content/applications more accessible to people with disabilities. This attribute is used to indicate that the element and all of its descendants are not visible or perceivable to any u 2 min read Like