У цій статті ми опишемо проблему і різні методи jQuery, що дозволяють досягти того ж ефекту, але вже без проблем з доступністю.
Покажіть мені код
Щоб дати вам можливість краще розібрати цю ситуацію, розглянемо наступний код:
Щоб поставити в ротацію вміст блоку ви можете написати такий код:
Склавши всі воєдино ви отримаєте наступне демо:
Доступна ротація контенту
Щоб вирішити проблему з доступністю, зберігши той же ефект, нам буде потрібно скористатися іншим методом jQuery, і допоміжним CSS класом, наприклад, visually-hidden. Код рятівного класу показаний нижче:
Додавання цього класу будь-якого елементу приховає елемент без установки властивості display значення none.
Тепер замість використання методів hide () / show (). щоб заховати / показати елемент нам досить додати або видалити клас visually-hidden. Крім того, щоб відтворити гідну анімацію ми будемо використовувати метод fadeTo (). Останній дозволяє встановити прозорість у необхідного елемента, не зачіпаючи властивість display. Таким чином ми передаємо значення 0. коли нам потрібно приховати елемент і 1. коли елемент треба показати. Нарешті, ми також встановлюємо у властивості opacity значення 0 для всіх аніміруемих елементів.
Результуючий код показаний нижче:
За допомогою простих змін в коді ми створили більш доступну ротацію контенту. Щоб побачити різницю між двома прикладами я пропоную вам скористатися клавішею TAB для навігації по сторінці.