placeholder html что это
::placeholder
CSS псевдоэлемент ::placeholder представляет собой текст placeholder (en-US) в или
Note: В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.
Синтаксис
Примеры
Красный текст
Результат
Зелёный текст
Результат
Проблемы доступности
Цветовой контраст
Контрастность
Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.
Важно обеспечить достаточный цветовой контраст между placeholder и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.
Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.
Использование
Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.
Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать aria-describedby для программного связывания элемента с подсказкой.
В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют aria-describedby для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.
Режим высокой контрастности Windows
Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows (en-US). Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.
Метки
Доступность форм: Проблемы с заполнителями placeholder HTML
Дата публикации: 2019-06-26
От автора: на днях я заполнял регистрационную форму онлайн-экзамена. Они попросили меня ввести мой адрес офиса, домашний адрес, рабочий телефон и домашний телефон. Я заполнил всю информацию без каких-либо проблем. Однако, когда я захотел проверить, ввел ли я все данные в правильных полях, текст «Адрес офиса» и тексты для других полей исчезли. Что мне было делать? Нужно ли повторно вводить данные в поле, чтобы убедиться, что я прав? К сожалению, это единственный способ, который отнимает много времени и расстраивает.
Атрибут placeholder HTML указывает краткую подсказку, которая описывает ожидаемое значение поля ввода (например, примерное значение или краткое описание ожидаемого формата).
Краткая подсказка отображается в поле ввода до того, как пользователь введет значение.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Атрибут placeholder работает со следующими типами ввода:
Заполнитель был введен в HTML5, и на данный момент он стал довольно важным атрибутом, который широко используется. Разработчики и дизайнеры часто хотят использовать заполнители в длинных формах, так как считают, что он более привлекателен, чем видимая метка. Это связано с тем, что он занимает меньше места на экране и лучше подходит для небольших экранов, чем короткие подсказки.
В первой части серии, посвященной доступным формам, мы рассмотрим, почему использование заполнителя не очень полезно с точки зрения доступности и как успешно использовать атрибут заполнителя.
Избегайте атрибута заполнителя
Согласно исследованию, проведенному Nielsen, с точки зрения пользовательского опыта не рекомендуется использовать заполнитель в поле формы. Потому что многих пользователей он смущает. В частности, у людей с когнитивными нарушениями, как правило, возникают проблемы с пониманием текста-заполнителя, поскольку они думают, что это предварительно заполненный текст, и они пытаются отправить форму без ввода своей конкретной информации.
Недостаточный цветовой контраст заполнителей
Цвет по умолчанию для заполнителя в поле формы — светло-серый, который часто не соответствует Критерия 1.4.3 Web Content Accessibility Guidelines (WCAG). В соответствии с WCAG SC 1.4.3 визуальное представление текста и изображений текста должно иметь контрастность не менее 4,5: 1, а разные браузеры по-разному отображают заполнитель. Чтобы заполнитель соответствовал требованиям к цветовой контрастности, необходимо использовать надлежащий CSS:
Пример кода CSS для заполнителя
Заполнитель не заменяет видимые метки
В последние годы заполнители используются для предоставления видимых меток для полей, формы, что является плохой практикой для пользователей и доступности. Это связано с тем, что заполнители исчезают, как только пользователь вводит данные в элементы управления формы, пользователь не имеет представления о том, на что ссылается поле формы. Это также относится к людям с кратковременной памятью, людям с черепно-мозговыми травмами, людям с аутизмом, людям с СДВГ и людям со слабым зрением.
Избегайте предоставления инструкций с использованием атрибута заполнителя
Инструкции помогают пользователям успешно заполнить форму. Однако, если инструкции добавляются через атрибут заполнителя, пользователь может быть не в состоянии эффективно использовать эту инструкцию. Поскольку заполнители исчезают, когда пользователь начинает заполнять форму, пользователи могут пропустить важную информацию. Например, инструкции для пароля не должны предоставляться с использованием атрибута-заполнителя.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Пример синтаксиса для пароля-заполнителя
В приведенном выше примере для пароля требуется специальный символ, число, и пароль должен быть длиной 8 символов. Это может стать более сложным, если к инструкции добавится больше вариантов.
Чтобы уменьшить путаницу или вероятность ошибок, всегда предоставляйте инструкции в виде текста, который виден пользователю, и привязывайте инструкции к элементам управления формы, используя метод aria-describedby для пользователей программ чтения с экрана.
Пример синтаксиса для статической подсказки
Пароль должен быть длиной 8 символов с цифрой и специальным символом. В приведенном выше примере мы видим, что подсказка к паролю всегда видна, пока данные вводятся в элемент управления формы.
Важно отметить, что не все программы чтения с экрана и браузеры поддерживают атрибут placeholder. Если он не читается программой чтения с экрана, пользователь программы чтения с экрана может пропустить эту информацию.
Кроме того, пользователи не смогут проверить, правильно ли они ввели данные в элементы управления формой, если в качестве видимой метки используется заполнитель. Требуемая проверка является огромной когнитивной нагрузкой для всех пользователей, включая людей с ограниченными возможностями.
Существует растущая тенденция, когда заполнители используются в качестве видимых меток, но вместо заполнителей, исчезающих при вводе данных, они перемещаются выше, ниже или сбоку от элемента управления формы. Это так называемые плавающие метки. Несмотря на неоднозначное мнение различных специалистов по дизайну и доступности для плавающих меток, мы советуем протестировать их на ваших пользователях.
На мой взгляд, лучший пользовательский опыт для всех, если заполнитель используется так, как это предусмотрено в спецификации HTML. Если вы решите использовать заполнитель, его следует использовать только для коротких подсказок.
Заключение
Избегайте использования заполнителей, если это возможно
Убедитесь, что цветовой контраст заполнителя соответствует требованиям WCAG 4,5: 1.
Не предоставляйте важные инструкции с помощью атрибута заполнителя.
Предоставьте инструкции ниже поля формы; добавьте для них aria-describedby.
Если нет другого выбора, кроме как использовать заполнитель в качестве замены видимой метки, используйте один из методов плавающей метки.
Автор: Raghavendra Satish Peri
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Плейсхолдеры: виды и решения для применения
В статье мы расскажем:
Плейсхолдеры появились давно. Это атрибут HTML5. Внешне выглядят как фразы или слова внутри формы для ввода данных. Плейсхолдеры подсказывают посетителю сайта, что нужно ввести в ту или иную строку. Судя по описанию, это полезный инструмент, но на самом деле все не так радужно.
Часто плейсхолдеры, наоборот, отпугивают посетителей сайта. Они не запоминают подсказки, так как те сразу пропадают, как только поставишь курсор мышки в строку. Многие и вовсе не видят текст плейсхолдера, так как он настолько блеклый, что ничего не разобрать. И это только часть минусов такого, казалось бы, полезного инструмента. Ниже мы приводим аргументы, чем он так плох и как выйти из положения.
Отличия плейсхолдера от лейбла и его виды
Для начала разберемся с понятием «плейсхолдер» — что это такое и чем отличается от лейбла. Данный термин происходит от английского слова placeholder и означает подсказку внутри поля веб-формы на сайте. Соответственно, этот элемент изначально предназначен для облегчения ввода пользовательских данных. Один из множества вариантов реализации — подсказка внутри поля «Пароль» (к примеру, «Не менее 8 символов»).
В идеале такая технология улучшает юзабилити веб-страницы с интерактивными формами. Однако при ее неправильном применении возникает обратный эффект: юзабилити ухудшается (возникают проблемы при заполнении полей). Как результат, теряется часть потенциальных клиентов.
Лейблы похожи на плейсхолдеры тем, что также помогают пользователю вводить правильные данные. Отличие заключается в расположении элементов: плейсхолдеры находятся внутри поля, а лейблы — снаружи. Собственно, отказ разработчиков от вторых в пользу первых обосновывается экономией места за счет сокращения размеров формы. Однако зачастую такое решение приводит к негативным последствиям.
Понятие «плейсхолдер» используется не только в интернет-маркетинге, но и в программировании. Правда, там оно имеет несколько другое значение. Под данным термином программисты понимают символ или совокупность символов, которые служат временным текстовым шаблоном перед заполнением поля актуальной информацией. К примеру, имеется лишь точное количество значений или переменных, но сами эти переменные и значения остаются неизвестными. В таких случаях вводится временный заполнитель, который затем будет заменен конкретными данными.
Часто эти шаблоны применяются при верстке сайтов с целью предварительной оценки выбранного шрифта и взаимного расположения текстового или графического контента на странице. Наиболее часто в качестве плейсхолдера используется фиктивный текст, начинающийся с латинских слов Lorem ipsum.
Вариант совмещения заголовка с текстом-заполнителем считается наиболее грамотным. Заголовочная строка здесь видна пользователю все время. Плейсхолдер пропадает, как только посетитель начинает вводить в поле информацию.
В данном случае заполнитель используется вместо заголовка. Такое решение, являющееся наихудшим с точки зрения юзабилити, используется для уменьшения размеров формы и минимизации количества текста на странице.
7 причин не использовать плейсхолдеры, заменяющие лейблы
Иногда при верстке форм разработчики вместо лейблов используют текст плейсхолдера. HTML-страница в этом случае становится лаконичнее, упорядочивается текст, сокращаются размеры веб-формы. Однако такие благие намерения зачастую ухудшают качество сайта.
Приведем несколько главных причин, по которым менять лейблы на текст-заполнитель не следует.
Так как текст плейсхолдера пропадает при заполнении поля, пользователь вынужден помнить смысл этого текста в процессе ввода.
Если форма достаточно объемная, посетитель, заполняя ее, часто забывает подсказку. Поэтому ему приходится стирать введенные данные, чтобы текст появился вновь. В некоторых случаях требуется еще и кликнуть на пустое пространство, переведя таким образом фокус с поля.
Идеальное юзабилити предполагает, что пользователь будет полностью сосредоточен на заполнении формы. Но посетители сайтов могут выполнять несколько задач одновременно: отвечать на почту или телефонный звонок, писать сообщение в мессенджере, отвлекаться на другие сайты и т. д. В случае сложного действия, возможно, придется прервать процесс для поиска нужного документа или номера заказа. Подобным пользователям Интернета свойственно часто отвлекаться в процессе работы. И дизайн сайта должен помогать им возвращаться к месту остановки.
Если веб-форма относительно простая, содержащая 1-2 поля для ввода, проблема с запоминанием информации стоит не так остро, как в случае особо сложных или нестандартных форм. А в знакомом интерфейсе подсказка зачастую и вовсе не нужна — посетитель сам догадается, что нужно вводить. Но даже в простых формах это не всегда очевидно. Например, посетитель сайта не помнит, можно ли в поле «Логин» вводить свой email. И вот здесь как раз-таки нужен лейбл.
При отсутствии лейбла нельзя перед отправкой проверить, корректно ли введена информация.
Отсутствие лейблов не позволяет пользователю убедиться в правильности заполнения формы. Ситуацию может усугубить поведение браузера с активированной функцией автоматического заполнения полей. Есть вероятность, что в форму будет внесена неверная информация. И тогда, чтобы проверить корректность автозаполнения по плейсхолдеру, пользователю придется стирать текст и вводить его заново. Но часто посетители даже не задумываются о возможно совершенной ошибке и не проверяют введенные данные.
При появлении предупреждения об ошибке пользователь не знает, как решить проблему.
Полностью заполненная форма без лейблов вне полей ввода никак не покажет, какое поле может быть заполнено некорректно. В связи с этим пользователь вынужден будет сам поочередно удалять данные для открытия плейсхолдера и исправления ошибки.
Пропадание текста-заполнителя при активации поля может являться раздражающим фактором для пользователей, использующих клавиатуру для навигации.
Многим удобнее перемещаться по элементам страницы с помощью клавиши Tab. При этом они сосредоточены только на том поле, где в данный момент находится курсор.
Содержимое заполненных полей привлекает меньше внимания.
Как показывает практика, пользователи обращают внимание в первую очередь на незаполненные элементы ввода. Соответственно, переизбыток плейсхолдеров создаст некоторые неудобства, так как потребует больше времени на нахождение уже заполненных полей. Худший сценарий поведения заключается в том, что важные элементы могут быть пропущены посетителем, а это в перспективе негативно отразится на бизнесе.
Из-за внешнего сходства плейсхолдера с автоматически заполненными данными может возникнуть путаница.
Если в поле уже содержится какой-то текст, пользователь может предположить, что сюда ему вводить уже ничего не надо. Некоторые неопытные посетители путают вспомогательный заполнитель со значением поля по умолчанию и в итоге оставляют это поле незаполненным.
В некоторых случаях плейсхолдеры не работают как полагается и поле приходится очищать, прежде чем вводить нужные данные.
Некорректно запрограммированный заполнитель не исчезнет при активации поля курсором. В таком случае пользователь видит перед собой обычный редактируемый текст и вынужден его удалять. Это ухудшает работу посетителя с формой и, как следствие, увеличивает стоимость такого взаимодействия.
Иногда плейсхолдер при попадании в поле курсора не исчезает полностью, а тускнеет. Это, к сожалению, пока редко встречающийся вариант реализации, поэтому пользователям он не знаком в достаточной мере. А значит, они будут считать текст заполнителя обычным редактируемым набором символов, который нужно удалить. В результате посетитель сайта совершает ряд лишних действий, тратит дополнительное время, пока не поймет, что от него требуется.
3 проблемы юзабилити с плейсхолдером
Кроме описанных выше трудностей имеются также проблемы с юзабилити. Плейсхолдеры были внедрены сравнительно недавно, а потому эта технология имеет несколько существенных недостатков. Приведем три характерных примера:
По умолчанию заполнитель выглядит как светло-серый текст внутри поля. Изменить цвет плейсхолдера, используя возможности CSS, в большинстве случаев не представляется возможным. Это достаточно существенная проблема в первую очередь для людей со слабым зрением, так как такой текст очень плохо читается на светлом фоне.
Внедрение плейсхолдеров в форму заставляет пользователей напрягать краткосрочную память и требует от них повышенного внимания при заполнении. Людям, обладающим когнитивными расстройствами, это доставляет дополнительные проблемы и служит серьезным препятствием.
Для слабовидящих и слепых существуют специализированные программы, озвучивающие текст на сайте. На сегодняшний день не все скринридеры способны адекватно воспринимать текст плейсхолдера, а значит, пользователи с проблемами зрения могут пропустить потенциально важную подсказку.
Подводные камни использования плейсхолдеров
Особенности при автопереводе страницы на другой язык
В некоторые браузеры (например, Chrome) встроены автоматические переводчики. Если пользователь активирует эту функцию, некоторые атрибуты страницы не переведутся. Во многих случаях это скорее хорошо, поскольку неточности перевода могут исказить структуру сайта.
Не обрабатываются переводчиком в том числе и плейсхолдеры. Если поле не снабжено дополнительным лейблом, подсказка внутри поля остается на языке оригинала. А пользователь, запросивший перевод, может не знать этот язык и не понимает в таком случае, что именно нужно вводить.
Иногда родной язык пользователя определяется системой по местонахождению устройства. И браузер предлагает на основе IP-адреса клиента перевести страницу. Но человек может использовать устройство на языке, отличном от родного. Веб-разработчикам и дизайнерам следует учитывать такие случаи, грамотно составляя семантику сайта.
Проблемы с цифровой грамотностью
Количество активных пользователей Интернета стремительно растет. Веб-дизайнеры призваны обеспечивать удобство пользования сайтами и приложениями для людей всех возрастов. Если человек впервые оказывается в Интернете вообще и на определенном ресурсе в частности, разработчики должны учитывать это.
Среди пользователей Сети появляется все больше людей в том числе преклонного возраста. Цифровая грамотность старшего поколения со временем растет, но также увеличивается количество проблем с доступностью, которые необходимо решать.
Безусловно, многие новички незнакомы с функцией подсказки внутри поля (не говоря уже о самом термине «плейсхолдер»). Видя такой текст, они считают поле уже заполненным и не понимают, что от них еще требуется и почему форма не отправляется.
Если поле является обязательным для заполнения, то страница просто-напросто не пустит пользователя дальше, сообщив об ошибке. Если же заполнять элемент ввода необязательно, есть риск не получить от пользователя какую-то важную информацию.
Вспомогательный заполнитель представляет собой обычный текст, чего порой бывает недостаточно для полной и понятной подсказки. Иногда приходится соответствующим образом менять стили плейсхолдера, добавлять дополнительные теги, иконки и прочие атрибуты.
Плейсхолдер также имеет ограничение по количеству символов строки, которое зависит от длины поля. Мобильные версии сайта зачастую сужают элемент ввода, скрывая тем самым часть подсказки.
Правильное использование плейсхолдеров
Внедряя текст-заполнитель в код сайта, необходимо помнить о важных принципах:
плейсхолдер не является полноценной заменой лейблу;
использовать данный элемент желательно лишь в простых формах (к примеру, для ввода имени пользователя и пароля);
цвет фона нужно делать таким, чтобы заполнитель легко читался на нем;
поддержка данной технологии реализована еще не на всех браузерах.
Идеальное решение в применении плейсхолдера
Текст-заполнитель размещается между лейблом и полем для ввода:
«Ваш ID сотрудника. Его можно найти в вашем рабочем профиле интранета. Пример: a1234567–89».
Благодаря такому решению:
обеспечивается иерархия, связанная как визуально, так и структурно. Заголовок говорит о предназначении поля, далее идет подсказка для правильного заполнения с примером, и завершается блок пустым полем для ввода;
плейсхолдер рассматривается браузером как обычный текст и при необходимости переводится на другой язык;
пользователь не рассматривает текст-подсказку как уже введенные данные;
текст-заполнитель легко читается даже в плохих условиях;
подсказка не пропадет при заполнении поля;
текст можно стилизовать инструментами CSS, а также наполнять семантическими тегами.
Плейсхолдер, пример которого мы разобрали, можно было бы разместить и под полем для ввода. Однако на мобильных устройствах в этом месте обычно возникает цифровая клавиатура, которая может скрыть часть подсказки:
Реализуется данное решение следующим кодом:
Можно заметить не очень большое отличие от стандартной связки for + id. Здесь label программно связан с элементом input через id, имеющий значение employee-id. В свою очередь между label и input расположен атрибут p, который служит заменой атрибуту placeholder.
У читателя может возникнуть вполне закономерный вопрос: «А не проще ли выполнить стилизацию плейсхолдера в виде заголовка?» Ведь тем самым мы избавляемся от лишней работы. Ответ на этот вопрос простой и логичный: разработчик должен упрощать жизнь не себе, а потенциальному посетителю.
Вернемся к коду. С помощью атрибута aria-describedby мы связываем элементы input и p, что можно использовать, чтобы задать алгоритм прочтения скринридером. В таком случае контент внутри тега p гарантированно будет читаться последним, а заголовок и данные, запрашиваемые от пользователя, озвучат в первую очередь.
Данное решение обеспечивает полноценную доступность сайта для людей с нарушением зрения. Программа, читающая текст, проинформирует незрячего пользователя, что именно от него требуется, и поможет при заполнении форм, озвучивая плейсхолдеры. Остальные посетители, не испытывающие серьезных проблем со зрением, получат абсолютно ту же информацию, просто прочитав ее.
Текст-заполнитель никак не привязывается к заголовку, поэтому им легко управлять. Например, можно указать скринридеру, чтобы он пропускал подсказки либо, наоборот, озвучивал каждую дважды. Если же сделать плейсхолдер частью заголовка, последний станет чересчур громоздким, трудно воспринимаемым на слух.
Реализация в виде кода:
Веб-форма играет важную роль в структуре сайта, напрямую влияет на конверсию сайта и в результате на прибыль владельца. Поэтому необходимо обеспечить ее доступность и понятность. Текст-подсказка укажет пользователю, какие вводить данные, но это будет полноценно работать лишь в комбинации с лейблами.