Вопрос
У меня есть HTML-страница с большим количеством текстовых полей.Я должен пометить их для обеспечения доступности.Но я не хочу, чтобы метка была видимой.Возможно ли это?Или есть ли какая-то другая альтернатива дизайну?
Нет правильного решения
Другие советы
Существуют различные способы поместить текст на страницу и сделать его скрытым для визуальных пользователей, но доступным для пользователей программы чтения с экрана (например, с большим отрицательным отступом текста).
Однако "доступность" - это не грань между "Людьми, у которых нет проблем с использованием Интернета" и "слепыми людьми".Есть много людей, которые не вписываются ни в ту, ни в другую группу, и авторам слишком легко и слишком часто забывать, что доступность - это нечто большее, чем просто предоставление контента людям, которые не могут его видеть.
Использование display: none подходит для этого, и я поддерживаю запрос о том, почему вы хотите скрыть все метки - вероятно, есть какой-то тег, который вы используете для информирования пользователей о том, что должно содержать текстовое поле, поэтому просто отметьте его как метку и оформите соответствующим образом.
Если вы все еще хотите скрыть метку, лучше расположить ее за пределами экрана.Есть недавний краткое изложение этого в блоге 456 Berea Street.
Смысл метки состоит в том, чтобы описать назначение входных данных, вроде как присвоить им заголовок.Если вы не используете метку, как ваши зрячие пользователи узнают, что вводить во входные данные?
Все, что дает визуальный ключ к пониманию зрячим пользователям, также должно быть обозначением для пользователей вспомогательных технологий.
Как насчет текстового поля с водяными знаками?
например , http://www.asp.net/AJAX/AjaxControlToolkit/Samples/TextBoxWatermark/TextBoxWatermark.aspx
Попробуйте CSS:
label {
display: none;
}
Убедитесь, что эта таблица стилей применяется только к средству "экран":
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
Как уже упоминалось, всегда предпочтительнее иметь видимую метку для всех элементов ввода - это поможет как зрячим, так и незрячим пользователям.Сказав это, есть определенные сценарии, в которых это невозможно, и я предполагаю, что ваш случай подпадает под них.Для таких ситуаций у вас есть пара вариантов.
Первый - использовать атрибут "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, увидят метку.
Независимо от того, что вы выберете, я определенно рекомендую загрузка пробной копии ЧЕЛЮСТЕЙ из Свобода Научная и протестируйте свое решение.