Как использовать HTML-элемент label для улучшения доступности веб-форм?

HTML-элемент label помогает улучшить доступность веб-форм, в том числе для пользователей с ограниченными возможностями. formspree.io

Несколько рекомендаций по использованию label для повышения доступности форм:

• Связывать label с полями ввода. formspree.io doka.guide Для этого можно использовать атрибут for или напрямую обернуть поле ввода в label. formspree.io doka.guide Это облегчает взаимодействие с формами незрячим или слабовидящим пользователям, использующим скринридеры. doka.guide
• Связывать label с чекбоксами и радиокнопками. doka.guide Это небольшие элементы интерфейса, в которые сложно попасть курсором мыши или пальцем на мобильных устройствах. doka.guide Если у них есть связанный label, то пользователь может кликать по тексту подписи, а не целиться в сам чекбокс. doka.guide
• Размещать label выше полей ввода. www.w3.org Такой подход уменьшает горизонтальную прокрутку для людей с низким зрением и пользователей мобильных устройств. www.w3.org
• Использовать читаемый размер шрифта и цвет, которые выделяются на фоне. formspree.io Также важно, чтобы метки соответствовали стандартам контрастности WCAG. formspree.io
• Делать текст label понятным, описательным и лаконичным. formspree.io Следует избегать жаргона и избыточности. formspree.io

Использование label — фундаментальная часть доступных и удобных для использования веб-форм. formspree.io