Статьи

Как доступно вращать содержимое с помощью jQuery

Октябрь 11, 2018

Вместе с эффектом прокрутки параллакса вращающийся контент является еще одним примером эффекта, который вы часто видите реализованным на веб-сайтах. Вы можете видеть, что он использовался для чередования новостей, твитов, постов в Facebook и так далее. При построении с использованием jQuery разработчики часто создают виджет, используя методы hide()show()fadeIn()fadeOut()slideUp()slideDown() Проблема с ними заключается в том, что после выполнения анимации (если таковая имеется) эти методы изменяют значение свойства displaynone Такое поведение приводит к проблеме доступности.

В этой статье мы опишем, в чем проблема и как вы можете использовать различные методы jQuery для достижения того же эффекта, но заботясь о доступности.

Проблема

Некоторые люди, обычно, но не ограничиваясь ими, люди с нарушениями зрения, используют клавишу TAB для навигации по веб-сайту. Если вы не знакомы с этой концепцией, то происходит следующее: каждый раз, когда пользователь нажимает клавишу TAB, фокусируется фокусируемый элемент страницы. Порядок, в котором элементы фокусируются, соответствует порядку их появления в DOM ( кроме исключений ), начиная с самого начала страницы. Некоторыми примерами фокусируемых элементов (подробнее см. Раздел « Когда элементы получают фокус?» ) Являются ссылки, поля ввода, кнопки и все, что имеет значение для атрибута tabindex0узнайте, когда и как использовать tabindex ) , Важно понимать, что скрытый элемент, для которого для свойства displaynoneне фокусируется.

Имея это в виду, вы можете видеть, что если пользователь TAB фокусирует элемент (например, ссылку), который был скрыт с помощью метода hide()TAB , возникает проблема. Быть скрытым таким образом, как будто элемент был временно удален из DOM, так что нет следующего элемента для фокусировки. В этом случае браузеры сбрасывают позицию, обычно фокусируя URL-адрес страницы. Это вызывает большое разочарование у пользователей, потому что они должны начинать с начала страницы каждый раз, когда они достигают этой зоны смерти . Более того, некоторые из ваших пользователей даже не видят вашего потрясающего эффекта вращения — все, что они хотят сделать, — это легко получить доступ к вашему контенту.

Покажи мне код

Чтобы лучше разобраться в этой ситуации, рассмотрите следующую разметку: 

 <div class="rotating-content">
   <p>This is a text with a <a href="#">link 1</a> and <a href="#">another link 1</a></p>
   <p>This is a text with a <a href="#">link 2</a> and <a href="#">another link 2</a></p>
   <p>This is a text with a <a href="#">link 3</a> and <a href="#">another link 3</a></p>
   <p>This is a text with a <a href="#">link 4</a> and <a href="#">another link 4</a></p>
</div>

Чтобы повернуть содержимое div 

 $elements = $('.rotating-content').find('p');
$elements.hide().first().show();

setInterval(function() {
   $elements.filter(':visible').fadeOut('slow', function() {
      $next = $(this).next();
      if ($next.length === 0) {
         $next = $elements.first(); 
      }
      $next.fadeIn('slow');
   });
}, 4000);

Приведение всего в действие приводит к следующей демонстрации :

Доступный вращающийся контент

Чтобы решить эту проблему доступности и достичь того же эффекта, нам нужно использовать другой метод jQuery, fadeTo()visuallyhiddenvisually-hidden Код этого вспомогательного класса показан ниже: 

 .visually-hidden
{
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;
}

Добавление этого класса к любому элементу визуально скроет элемент, не устанавливая его свойство displaynone

Теперь вместо использования метода hide()show()visually-hidden Кроме того, для воссоздания приятной анимации мы будем использовать метод fadeTo() Последний позволяет вам установить непрозрачность, которую вы хотите, чтобы элемент достиг, но когда он завершит свою задачу, он не обновит свойство displayофициальной документации ). Итак, мы передадим ему значение 01 Наконец, мы также установим начальное значение opacity0

Полученный код показан ниже: 

 $elements = $('.rotating-content').find('p');
$elements
   .not(':first-child')
   .addClass('visually-hidden')
   .css('opacity', 0);

setInterval(function() {
   $elements.filter(':not(.visually-hidden)').fadeTo('slow', 0, function() {
      $next = $(this).addClass('visually-hidden').next();
      if ($next.length === 0) {
         $next = $elements.first(); 
      }
      $next.removeClass('visually-hidden').fadeTo('slow', 1);
   });
}, 4000);

Приведение всего в действие приводит к следующей демонстрации :

С этим простым изменением в коде мы создали более доступный виджет для отображения вращающегося контента. Чтобы увидеть разницу между двумя демонстрациями, я предлагаю вам использовать клавишу TAB для навигации по странице.

Вывод

В этой статье я описал важную проблему доступности, которую можно найти в некотором коде, используемом для создания эффекта вращающегося содержимого. Некоторые из вас, возможно, непреднамеренно добавили его на сайт, встроенный в виджет, подобный тому, который обсуждался, но стыдиться нечего. Все игнорируют множество важных понятий, прежде чем узнают о них. Вы действительно обнаружили эту важную проблему не так давно (благодаря работе таких людей, как Стив Фолкнер и Леони Уотсон ).

Хотя изучение этого простого трюка может вам помочь, главный урок, который здесь можно извлечь, заключается в том, что при разработке какой-либо функции веб-сайта вы также должны проверить, доступна ли она, в противном случае вы рискуете заблокировать некоторых своих пользователей в адском разочаровании и недоступном контенте. ,

35
Share: