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

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>
Output:  
 
kalrap615
jQuery-Misc
Picked
JQuery
Technical Scripter
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.