Проверка входных данных: наилучшая практика, когда элемент, на который ссылается aria-описывается, еще не находится в DOM

Question

Ситуация такова: поля ввода (текст, электронная почта, пароль) помечены aria-describedby="some-id". Если пользовательские данные не соответствуют требованиям, отображается элемент с id="some-id". До этого элемент не присутствовал в DOM.

При запуске теста Google Lighthouse это помечается как ошибка, поскольку идентификатор, на который ссылается aria-describedby, отсутствует в DOM до тех пор, пока поскольку входные данные пусты или полностью соответствуют требованиям.

Я думал о двух обходных путях:

1. Визуализируйте элемент с помощью id="some-id", но оставьте его пустым. И вставьте содержимое, как только пользовательский ввод не будет соответствовать требованиям.
2. Визуализируйте элемент с помощью id="some-id" И вставьте тег aria-describedby="some-id", как только пользовательский ввод не выполнит требования.

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

Answer 1

aria-describedby должен указывать на существующий элемент. div должен существовать до того, как атрибут будет установлен.

Ваши два решения верны:

• Вы можете указать атрибут aria-describedby на пустой элемент и вставить содержимое при необходимости
• или вы можете установить aria-describedby при обнаружении ошибки.