Как отображать / скрывать функции с помощью атрибута aria-hidden в jQuery?

Опубликовано: 2 Декабря, 2021

Атрибут 'aria-hidden' играет важную роль в контексте веб-доступности . Это простой способ сделать веб-контент / приложения более доступными для людей с ограниченными возможностями. Этот атрибут используется, чтобы указать, что элемент и все его потомки не видны или не воспринимаются каким-либо пользователем в соответствии с реализацией. Теперь, возможно, у вас в голове возник вопрос: в чем разница между атрибутами «скрытый» и «скрытый по арии»?

Главный аспект создания этого решения - сделать контент доступным для чтения только тогда, когда контент виден на экране, в противном случае он должен оставаться недоступным. Здесь мы будем использовать метод attr (), чтобы сделать то же самое, что и для установки / получения атрибута элемента.

Синтаксис:

 Получатель: $ ([селектор]). Attr ('атрибут');
Установщик: $ ([селектор]). Attr ('атрибут', 'значение');

Пример ниже иллюстрирует вышеуказанный подход:

Пример:

 <!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 -->
            > attribute's value : < p >< i >aria-hidden</ i
                < 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 > 

Выход:

Technical Scripter Вопросы о Web технологиях JQuery Picked

Как отображать / скрывать функции с помощью атрибута aria-hidden в jQuery?

РЕКОМЕНДУЕМЫЕ СТАТЬИ