How to Display/Hide functions using aria-hidden attribute in jQuery ?

Last Updated : 20 Sep, 2021

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:

html

<!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=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
    <script src=
"https://code.jquery.com/jquery-3.4.1.slim.min.js">
    </script>
    <script src=
"https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js">
    </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 accessibility -->
            <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>