Что, почему и как стоит за label 

Сегодня я хочу воспользоваться возможностью, чтобы рассказать вам о важности лейблов и о том, что они могут нам предложить. В этом небольшом посте я расскажу о следующем: что такое label, что он делает, если вы его используете, как мы можем использовать / добавлять label и какие другие элементы HTML должны иметь label.

Итак, с чего начать?

Ну <label>, это простой элемент HTML, содержащий текстовое значение, которое кое-что объясняет о соответствующем элементе ввода. И это в основном все, что касается нашего скромного элемента лейбла. Так как же такой простой элемент HTML мог иметь такое влияние? Давайте узнаем вместе.

Почему мы должны использовать лейблы?

Почему нам нужно использовать лейблы, чтобы понять, что они сделают для нас, когда мы их используем. Итак, что мы получаем, когда используем его? Что ж, когда мы связали лейбл с полем ввода, он выполняет две вещи:

1. Увеличивает интерактивную область связанного поля ввода. Браузер делает это за нас, когда видит лейбл в паре с полем ввода. Но что означает увеличение интерактивной площади? Когда пользователь нажимает на лейбл, он вместо этого фокусируется на связанном поле ввода. Это улучшает UX на мобильных устройствах и для пользователей с ограниченными физическими возможностями (например, тремор).
2. Программы чтения с экрана могут объявлять имя (связанную метку) поля ввода, когда оно сфокусировано. См. Примеры ниже, в чем разница со связанным ярлыком и без него.

Без этикетки

С лейблом

Как мы могли добавить ярлык?

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

Неявный

В неявном методе мы используем метку как оболочку / контейнер. Больше от нас ничего не требует. Просто поместите поле ввода внутрь, и все готово. Вы добавили метку и неявно связали ее с полем ввода.

Явный (рекомендуется)

При явном подходе мы не используем метку как оболочку / контейнер. И нам не требуется помещать его непосредственно перед полем ввода в DOM, чтобы он работал (что вы увидите в каждом примере, даже в приведенном ниже). Итак, как мы можем сообщить HTML, что метка, которую мы используем, предназначена для определенного поля ввода? Через два специальных атрибута: id и for.

Элемент метки имеет атрибут for, который будет иметь определенное значение. Элемент input, в свою очередь, имеет атрибут id, который также содержит определенное значение. Вы, возможно, догадались, не заглядывая в приведенный выше пример, что оба атрибута должны иметь одинаковое значение. Используйте одинаковое значение в атрибутах for и id, для связывания метки и поля ввода.

Так почему это рекомендуемый подход? Проще говоря, из-за поддержки доступности. На данный момент невозможно выбрать вход по его имени (соответствующей метке) с помощью голосовой команды (например, голосового управления от Apple). Я сам тестировал это на MacBook с Safari и голосовым управлением. И это просто не сработало, сколько бы раз я ни пробовал. Я добавлю ссылку ниже для текущих результатов поддержки:

Теперь мы знаем, как использовать и связывать метку с вводом. Но ограничены ли мы только входом или у нашего лейбла есть больше потенциальных друзей? Конечно, есть, и они сгруппированы вместе ниже:

Маркируемые поля:

1. button
2. inputs
3. meter
4. output
5. progress
6. select
7. textarea

Заключение

1. Когда используются ярлыки, программы чтения с экрана могут выполнять свою работу и помогать своим пользователям.
2. Лейблы увеличивают интерактивную область для полей ввода, что улучшает взаимодействие с пользователем
3. Явное использование меток - это рекомендуемый вариант при объединении в пары с маркируемым элементом.
4. Используемые ярлыки неявно не поддерживают голосовые команды.