How to Display/Hide functions using aria-hidden attribute in jQuery ? Last Updated : 20 Sep, 2021 Comments Improve Suggest changes Like Article Like Report 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/[email protected]/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: Comment More infoAdvertise with us Next Article How to Display/Hide functions using aria-hidden attribute in jQuery ? devproductify Follow Improve Article Tags : Technical Scripter Web Technologies JQuery jQuery-Misc Similar Reads How to hide/show an image on button click using jQuery ? In this article, we will see how we can hide or show any particular image in jQuery when a button gets clicked. This is quite easy to do with some lines of jQuery code. Before we jump to the topic, let's know which methods of jQuery will be used for this. So there is a method called show() and anoth 3 min read How to hide block of HTML code on a button click using jQuery ? In this article, we will learn how to hide a block of HTML code with a button click. We can do this by using the jQuery inbuilt hide() method. Let's briefly learn the functionality of this method. hide(): In CSS, we have a property display:none which basically hides the element. This hide() method i 2 min read How to display div elements using Dropdown Menu in jQuery? In order to display data/content of a specific element by selecting the particular dropdown menu in jQuery, we can use the with following ways: Using hide() and show() methods: hide() methods : This method is used to hiding the syntax or the element of html that you want to hide. Syntax: $(selector) 4 min read 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 2 min read How to create hidden form element on the fly using jQuery ? JQuery is the library that makes the use of JavaScript easy. Inserting the <input type='hidden'> can also be done using jQuery. The append() and appendTo() inbuilt function can be used to add the hidden form element but they are not only limited to the <input type='hidden'> but we can al 2 min read How to create Label hidden in Input Area using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a Label hidden using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†href= 1 min read How to show/hide an element using jQuery ? We are given an element and the task is to to show/hide the element using jQuery. Below are the approaches to show/hide an element using jQuery:Table of ContentUsing css() methodsUsing show methodUsing Toggle methodApproach 1: Using css() methodsIt takes two parameters where the first parameter is t 3 min read How to hide all heading elements on a page when they are clicked in jQuery ? In this article, we will see how to hide all heading elements on a page when they are clicked in jQuery.Here we have two common approaches. Using slideUp() methodUsing hide() method Approach 1: Using slideUp() method To hide all heading elements from the page, we use slideUp() method. First, we use 2 min read How to Show and Hide div elements using radio buttons? In this article, we will see how we can show and hide div elements by clicking on the radio buttons. There are different methods available in jQuery to accomplish this task as listed below: Table of Content Using the hide() and show() methodsUsing the css() methodUsing the hide() and show() methodsT 3 min read How to hide elements defined as variables in jQuery ? In this article, we will learn how to hide elements defined as variables in jQuery. These can be done using two approaches. Approach 1: In this approach, we will first select the element that has to be hidden and then assign it to a variable. We will then call the hide() method on the variable. This 2 min read Like