Доступность в Интернете - Метка - PullRequest
Новая
       12

Доступность в Интернете - Метка

7 голосов
/ 03 марта 2011 
    <div class="searchWrap">
        <label for="SearchBox">Search Scirra</label>
        <input type="text" name="SearchBox" id="SearchBox" tabindex="1" />
        <div class="s searchIco"></div>
    </div>
  • Мой стиль надписей отображается: нет, это нормально?
  • Кроме того, надписи по-прежнему используются и важны ли они?Я впервые вижу тег HTML, но изучаю доступность для моего нового сайта.

Редактировать

Быстрый вопрос также, основная причинаэто, конечно, должно помочь менее удачливым, но помогает ли этот материал и SEO, поскольку сканер веб-сайтов также по сути слепой?

Ответы [ 3 ]

6 голосов
/ 03 марта 2011

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

Четкая семантическая связь между элементом ввода и label позволяет программе чтения с экрана четко диктовать пользователю, какую информацию следует вводить в какие входы.

Что касается display: none, я не уверен, что это все еще будет читаться. Если нет, вы можете попробовать text-indent: -9999px.

Fangs - хороший эмулятор программы чтения с экрана, чтобы проверить это. Требуется FireFox.

Хотя по теме доступности вы можете превратить этот ввод в HTML5 search input .

Браузеры, поддерживающие его, будут семантически точно знать, что это такое, поскольку не могут вывести его из ваших class / id / label / и т. Д.

Обновление

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

Вы можете использовать атрибут HTML5 placeholder, он будет отображать некоторый текст внутри элемента, который описывает, что он делает (поиск в этом случае). Это не поддерживается широко, но есть JavaScript, который эмулирует его (я написал jQuery плагин , который делает это).

И последнее: я хотел бы добавить label { cursor: pointer } в свой CSS, чтобы помочь пользователям понять, что он активен (очень полезен для флажков и переключателей).

2 голосов
/ 10 марта 2011

display: none; следует использовать с осторожностью - когда элементы удаляются из DOM таким способом, вспомогательное программное обеспечение не может получить доступ к этой информации, пока вы не настроите элемент для повторного отображения.Для некоторых вспомогательных программ visibility: hidden; демонстрирует то же поведение, то есть то, что скрытый контент не считывается программным обеспечением.

Если вы хотите скрыть контент, полезный для программ чтения с экрана, text-indent:-999px; или *Известно, что 1006 * довольно безопасны, хотя я слышал, что есть некоторые крайние случаи, когда техника position:absolute; может вызвать проблемы.Совсем недавно, свойство clip CSS было предложено в качестве решения .

Кроме того, я хотел отметить, что неявная маркировка путем переноса <input> в <label> была известно, что вызывает проблемы в некоторых программах для чтения с экрана .Явная маркировка (с использованием атрибутов for и id) является более надежной и не сломается, если вы когда-нибудь решите изменить свой HTML.Если вас беспокоит обратная совместимость, IE 6 и ниже не будут использовать поведение «щелкнуть метку, чтобы сфокусировать ввод», если вы не используете явную маркировку.

РЕДАКТИРОВАТЬ: я забыл упомянуть, что это правильно для маркировкиввод формы с использованием атрибута title элемента <input> для замены элемента <label>, что исключает необходимость вообще скрывать метку.Дополнительная информация: Атрибуты заголовка как метки управления формой .

0 голосов
/ 03 марта 2011

Если вы скрываете контент от Average посетителей, но хотите, чтобы пользователи с более высокой доступностью могли его видеть, вы можете отключить отображение ярлыка на вашем стандартном CSS, а затем использовать media специальный CSS для сделайте это видимым при необходимости.

CSS: Media

...