Вопрос

У меня есть 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, увидят метку.

Независимо от того, что вы выберете, я определенно рекомендую загрузка пробной копии ЧЕЛЮСТЕЙ из Свобода Научная и протестируйте свое решение.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top