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 user as per the implementation. Now in your mind may a question arrived that what is the difference between ‘hidden’ and ‘aria-hidden’ attributes?

The main aspect of making this solution is to make content readable only when content is visible on screen otherwise should remain inaccessible. Here, we’ll be using attr() method to do the same which is used for setting/getting an element’s attribute.

Syntax:

Getter: $([selector]).attr('attribute');
Setter: $([selector]).attr('attribute', 'value');

Below example illustrate the above approach:

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
  <title>
    aria-hidden attribute on JQuery Show/Hide functions
  </title>
    
    <!-- Added support for BS3 and jQuery using CDN -->
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
    <style>
        .access {
            margin-left: 90px;
        }
    </style>
</head>
  
<body>
    <br><br>
    <div class="row">
        <div class="col-sm-4">
            
            <!-- button to toggle attribute -->
            <center>
                <button class="btn btn-success">
                  Toggle
                </button>
            </center>
        </div>
        <div class="col-sm-8">
            <!-- Attribute's value -->
            <p><i>aria-hidden</i> attribute's value :
                <b>
                  <span id="answer">false</span>
                </b>
            </p>
        </div>
    </div>
    <br>
    <br>
    <div class="container-fluid">
        <div class="access" aria-hidden="false">
            <!-- For Content accessiblity -->
            <h1 class="text-success"
              GeeksforGeeks 
            </h1>
            <b>
              A Computer Science portal for Geeks
            </b>
        </div>
    </div>
  
    <script>
        $(document).ready(function() {
            $('button').click(function() {
  
                /*Check and alternate attribute's value,
                then show/hide accordingly using chaining. */
                if ($('.access')
                    .attr('aria-hidden') == 'true')
                    $('.access')
                    .attr('aria-hidden', 'false')
                    .show('fast');
                else
                    $('.access')
                    .attr('aria-hidden', 'true')
                    .hide('slow');
  
                // Display changed attribute's value
                $('#answer')
                .text($('.access')
                      .attr('aria-hidden'));
            });
        });
    </script>
</body>
  
</html>

chevron_right


Output:




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.