Difference between ‘hidden’ and ‘aria-hidden’ attributes in HTML

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:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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

chevron_right


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 thye browser. According to the fourth rule of ARIA, the use of hidden characteristic is not allowed on the focusable element because it shall cause the user to focus on nothing. Do not use the aria-hiden=”true” inside of a <body> tag the whole page will be not accessible to assistive technology.

Syntax:

 <element aria-hidden="true/false">

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title>aria-hidden="true/flase" </title
        <style
            body { 
                text-align:center; 
            
            h1 { 
                color:green; 
            
        </style
    </head
    <body
        <h1>GeeksforGeeks</h1
        <h4>aria-hidden="true/flase"</h4
          
        <!-- aria-hidden="true" paragraph -->
        <p arie-hidden="true">
            A computer science portal for geeks
        </p
    </body
</html>                    

chevron_right



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 hidden hides everything from the user. ARIA’s aria-hidden, hides content from the assisting technology
By 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.


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.