Анимируем label у input

animating label

За последние месяцы уже было много дискуссий по поводу доступности (accessibility), которая относится к использованию labels, и я думаю это здорово. Веб-дизайнеры и разработчики должны рассматривать доступность как основополагающий элемент развития, а не задвигать ее на задний фон.

Я по-прежнему вижу множество реализаций, где labels  игнорируются для более привлекательных решений, что в свою очередь создает проблемы доступности. Любопытно, что существует масса шаблонов с дружелюбным дизайном, где использованы labels. Вот один из них, существует уже несколько лет:

И это довольно легко осуществить всего лишь  с помощью CSS и jQuery.

HTML

Предположим, нам нужно создать регистрационную форму, как показано выше. Мы начнем с первого input‘a и label:

Здесь мы используем placeholder внутри input‘a  для указания короткой подсказки пользователю, а не в качестве альтернативы label.

 CSS 

Input и label находятся внутри  контейнера, так что label   будет относительно расположен  input‘у:

Селектору label  зададим основной  набор правил:

Теперь мы добавим класс для этого селектора, который будет динамически добавлен в  input:

 

JQuery

Сначала, давайте создадим функцию и добавим переменную для класса .show:

Далее, мы добавим внутреннюю функцию, которая проверяет, пустой ли <input>:

Если  у input‘а есть значение, то  тогда класс .show будет добавлен к label, вызвав «плавающий» эффект перехода. Наконец, мы добавим событие, которое проверяет значение <input>  когда пользователь вводит символ:

Вот что у нас получилось:

See the Pen Accessible Floating Labels by Matt Smith (@AllThingsSmitty) on CodePen.0

Доступность рулит!

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

Источник: allthingssmitty.com