Доступное текстовое поле

Question

У меня есть HTML-страница со многими текстовыми полями. Я должен пометить их в целях доступности. Но я не хочу, чтобы метка была видимой. Это возможно? Или есть другая альтернатива дизайна?

Answer 1

Использование отображения: для этого нет ничего плохого, и я поддерживаю вопрос о том, почему вы хотите скрыть все метки - вероятно, есть какой-то тег, который вы используете для информирования пользователей о том, что должна содержать текстовая область, поэтому просто отметьте это как ярлык и стиль соответственно.

Если вы все еще хотите скрыть метку, лучше расположить ее вне экрана. В блоге 456 Berea Street .

имеется недавняя сводка .

Answer 2

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

Однако «доступность» - это не грань между «людьми, у которых нет проблем с использованием Интернета» и «людьми, которые слепы». Есть много людей, которые не входят ни в одну из групп, и авторам слишком легко и слишком часто забыть, что доступность - это больше, чем предоставление контента людям, которые не видят.

Answer 3

Цель метки - описать цель ввода, вроде как дать ему заголовок. Если вы не используете метку, как ваши зрячие пользователи узнают, что вводить во ввод?

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

Answer 4

Как уже упоминалось, всегда желательно иметь видимую метку для всех элементов ввода - это поможет как зрячим, так и незрячим пользователям. Сказав это, есть определенные сценарии, где это неосуществимо, и я предполагаю, что ваше дело подпадает под. Для этих ситуаций у вас есть пара вариантов.

Первый - использовать атрибут «title», который имеет дополнительное преимущество отображения подсказки для зрячих пользователей:

<input type="text" title="first name" />

Пара других упомянули второй вариант, который включает в себя размещение метки за пределами экрана с помощью CSS:

<label for="first_name" 
  style="position:absolute;left:-1000px;width:1px;overflow:hidden;" />
<input type="text" id="first_name" />

В отличие от использования «display: none», программы чтения с экрана все равно будут читать метку. Также элегантно, что пользователи, которые решат отключить CSS, увидят метку.

Независимо от того, с чем вы идете, я определенно рекомендую загрузить пробную копию JAWS с Freedom Scientific и протестировать ваше решение.

Answer 5

Попробуйте CSS:

label {
    display: none;
}

Обязательно применяйте эту таблицу стилей только для носителя с экраном:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Answer 6

А как насчет текстового поля с водяным знаком?

например. http://www.asp.net/AJAX/AjaxControlToolkit/Samples/TextBoxWatermark/TextBoxWatermark.aspx