Было: форма показывала текст ошибки под полем, но для screen reader он не был явно связан с самим полем.
Что мешало пользователю: человек мог услышать поле как обычное, без понятного сигнала «здесь ошибка» и без надёжной связи с текстом подсказки. Визуально ошибка есть, а в озвучке контекст теряется.
Что изменили: в общих компонентах Input и Textarea добавили
aria-invalid, связь с текстом ошибки через aria-describedby, а саму ошибку пометили role="alert". Теперь это работает сразу для форм, которые используют эти компоненты.Стало: screen reader получает понятную структуру: поле отмечено как невалидное, а ошибка объявляется и связана с конкретным полем. Это меньше угадывания и меньше потерянного контекста при заполнении формы.
Кейс подготовлен через Accessibility Auditor Skill.
Доказательство:
Issue: github.com/Vets-Who-Code/vets-who-code-app/issues/895
PR: github.com/Vets-Who-Code/vets-who-code-app/pull/1120
