Aria-label и label не оба читаются

Обратите внимание на следующую разметку.

<label for="i1" class="inforLabel">This is a label</label>
<input id="i1" type="text" class="inforTextbox" aria-label="Title, not label" />

Для меня эта разметка - это то, что создается после моего настраиваемого элемента управления всплывающей подсказкой. Проблема, которую я вижу в JAWS в IE, заключается в том, что она только читает "Заголовок, а не метку", однако с другими программами чтения с экрана, например, для чтения голосовой надписи и текстового поля aria-label. Я думаю, он должен читать оба.

Является ли это настройкой или ошибкой? Или есть что-то еще, что кто-то может порекомендовать?

Ответы

Ответ 1

Для элементов, которые имеют описательный элемент метки уже в DOM, лучше использовать атрибут aria-labelledby вместо aria-label.

http://www.w3.org/TR/wai-aria/states_and_properties#aria-labelledby

Из документации:

Цель aria-labelledby такая же, как и для aria-label. Он предоставляет пользователю узнаваемое имя объекта.

Если текст ярлыка отображается на экране, авторам СЛЕДУЕТ использовать aria-labelledby и НЕ ДОЛЖНО использовать aria-label. Используйте aria-label, только если интерфейс таков, что на экране нет видимой метки.

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

Как правило, не рекомендуется связывать несколько меток с доступным элементом. Ярлыки должны быть краткими. Если вы хотите добавить дополнительное описание, вы также можете использовать aria-describedby.

http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby

В обоих случаях вам понадобится id на вашей метке.

<label id="label1" for="input1" class="inforLabel">This is a label</label>
<input id="input1" type="text" class="inforTextbox" aria-labelledby="label1" />

Необязательно, если вам нужно иметь несколько элементов, вы можете попробовать поместить их в div, причем один элемент находится вне экрана.

<div id="accessible-label1">
  <label for="input1" class="inforLabel">This is a label</label>
  <span class="offscreen">Supplementary text</span>
</div>
<input id="input1" type="text" class="inforTextbox" aria-labelledby="accessible-label1" />

С соответствующим CSS для размещения внеэкранного элемента класса с экрана это должно сочетать текстовое содержимое дочерних элементов accessible-label1 для использования в качестве метки aria. Опять же, рассмотрим использование aria-describedby.