Для элементов, которые имеют элемент описательной метки уже в DOM, лучше использовать атрибут aria-labelledby вместо aria-label.
https://www.w3.org/TR/wai-aria/#aria-labelledby
Из документации:
Назначение aria-labelledby такое же, как и у aria-label. Он предоставляет пользователю узнаваемое имя объекта.
Если текст метки виден на экране, авторам СЛЕДУЕТ использовать aria-labelledby и НЕ СЛЕДУЕТ использовать aria-label. Используйте aria-label только в том случае, если интерфейс таков, что невозможно иметь видимую метку на экране.
Отдельные комбинации программы чтения с экрана и браузера могут дать противоречивые результаты, если вы не будете следовать стандартным рекомендациям, поскольку спецификация WAI-ARIA может быть открыта для интерпретации.
Как правило, не рекомендуется связывать несколько меток с одним доступным элементом. Этикетки должны быть лаконичными. Если вы хотите добавить дополнительное описание, вы также можете использовать aria-describedby.
https://www.w3.org/TR/wai-aria/#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.
person
Nick
schedule
11.07.2014
