За последние месяцы уже было много дискуссий по поводу доступности (accessibility), которая относится к использованию labels, и я думаю это здорово. Веб-дизайнеры и разработчики должны рассматривать доступность как основополагающий элемент развития, а не задвигать ее на задний фон.
Я по-прежнему вижу множество реализаций, где labels игнорируются для более привлекательных решений, что в свою очередь создает проблемы доступности. Любопытно, что существует масса шаблонов с дружелюбным дизайном, где использованы labels. Вот один из них, существует уже несколько лет:
И это довольно легко осуществить всего лишь с помощью CSS и jQuery.
HTML
Предположим, нам нужно создать регистрационную форму, как показано выше. Мы начнем с первого input‘a и label:
1
2
3
4
|
<div class=«field»>
<label for=«firstName»>First Name</label>
<input type=«text» id=«firstName» placeholder=«First Name»>
</div>
|
Здесь мы используем placeholder внутри input‘a для указания короткой подсказки пользователю, а не в качестве альтернативы label.
CSS
Input и label находятся внутри контейнера, так что label будет относительно расположен input‘у:
1
2
3
|
.field {
position: relative;
}
|
Селектору label зададим основной набор правил:
1
2
3
4
5
6
7
|
label {
opacity: 0;
position: absolute;
top: 2em;
transition: all 0.1s linear;
z-index: -1;
}
|
Теперь мы добавим класс для этого селектора, который будет динамически добавлен в input:
1
2
3
4
5
|
label.show {
opacity: 1;
top: -1em;
z-index: 1;
}
|
JQuery
Сначала, давайте создадим функцию и добавим переменную для класса .show:
1
2
3
|
$(function () {
var showClass = ‘show’;
});
|
Далее, мы добавим внутреннюю функцию, которая проверяет, пустой ли <input>:
1
2
3
4
5
6
7
8
9
10
11
12
|
$(function () {
var showClass = ‘show’;
$(‘input’).on(‘checkval’, function () {
var label = $(this).prev(‘label’);
if(this.value !== ») {
label.addClass(showClass);
} else {
label.removeClass(showClass);
}
})
});
|
Если у input‘а есть значение, то тогда класс .show будет добавлен к label, вызвав «плавающий» эффект перехода. Наконец, мы добавим событие, которое проверяет значение <input> когда пользователь вводит символ:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
$(function () {
var showClass = ‘show’;
$(‘input’).on(‘checkval’, function () {
var label = $(this).prev(‘label’);
if(this.value !== ») {
label.addClass(showClass);
} else {
label.removeClass(showClass);
}
}).on(‘keyup’, function () {
$(this).trigger(‘checkval’);
});
});
|
Вот что у нас получилось:
See the Pen Accessible Floating Labels by Matt Smith (@AllThingsSmitty) on CodePen.0
Доступность рулит!
Суть здесь не в том, чтобы игнорировать доступность в пользу дизайна. Главная задача-выработать опыт, который не только функционален для некоторых пользователей, но чтобы в полной мере участвовали все пользователи, делая доступность неотъемлемой частью развития.
Источник: allthingssmitty.com