Расширение WAVE не обнаруживает метку + aria-labelledby

У меня есть поле ввода с меткой из двух частей, указанной aria-labelledby:

<p id="label2">Part 2</p>
<label id="label1">Part 1</label>
<input type="text" aria-labelledby="label1 label2">

Когда я запускаю расширение WAVE (версия 1.0.9) в Chrome, <label> помечается как потерянное, но само input отображается как правильно помеченное/описанное.

Я ошибаюсь, используя <label>, так как не будет атрибута for, или инструмент просто не может связать идентификаторы в aria-labelledby с label?


html accessibility wai-aria wcag2.0
person Melissa Avery-Weir    schedule 09.02.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Хотя в вашем коде нет проблем с соответствием, элемент управления имеет видимую метку и его доступное имя – это объединение двух видимых меток. Доступность/удобство использования можно улучшить, правильно используя элемент label. Если вы свяжете элемент label с input с помощью for/id, label станет кликабельным, а фокус переместится на input при нажатии на label, тем самым увеличив интерактивную область, чтобы сфокусировать элемент управления. Побочным эффектом является то, что WAVE больше не должна жаловаться.

<p id="label2a">Part 2</p> 
<label id="label1a" for="t1">Part 1</label>   
<input type="text" aria-labelledby="label1a label2a" id="t1">

тестовый пример

person Steve Faulkner    schedule 10.02.2018

arrow_upward
2
arrow_downward

Элемент label, не связанный с элементом управления. Хотя ваш ввод использует ARIA для ссылки на элемент метки, семантика label не используется — это может быть span. Потерянная метка обычно указывает на проблему со специальными возможностями, поэтому это предупреждение WAVE.

person Jared Smith    schedule 10.02.2018