Как сделать доступную ротацию контента на jQuery

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

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

Проблема

Некоторые люди, обычно, но не только, слабовидящие, используют клавишу TAB для навигации по сайту. Если вы не знакомы с этой концепцией, поясню на примере: каждый раз когда пользователь нажимает TAB, курсор фокусируется на доступном для фокуса элементе. Порядок в котором элементы принимают фокус следует порядку их появления в DOM, начиная с самого начала страницы. Некоторые доступные для фокуса элементы: ссылки, текстовые поля, кнопки и все те (в спецификации к HTML5 указывается, что атрибут tabindex является глобальным атрибутом для всех HTML-элементов), у которых значение атрибута tabindex отлично от 0. Важным моментом является то, что элемент, скрытый посредством объявления display:none;, не доступен для фокуса.

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

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

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

HTML

<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>

Чтобы поставить в ротацию содержимое блока вы можете написать такой код:

jQuery

$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);

Сложив все воедино вы получите следующее демо:

See the Pen Ротация контента на jQuery (нет доступности) by dnzl (@dnzl) on CodePen.

Доступная ротация контента

Чтобы решить проблему с доступностью, сохранив тот же эффект, нам потребуется воспользоваться другим методом jQuery, и вспомогательным CSS классом, например, visually-hidden. Код спасительного класса показан ниже:

CSS

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

Подробнее о свойстве clip.

Добавление этого класса любому элементу скроет элемент без установки свойству display значения none.

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

Результирующий код показан ниже:

jQuery

$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);

Результирующее демо:

See the Pen Доступная ротация контента на jQuery by dnzl (@dnzl) on CodePen.

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

Источник