Form > Use aria-describedby with validation text

Problem

  • The visible validation text isn't tied to the input via aria-describedby.
  • Unecessary ARIA attributes treating the validation text like an alert.

Solution

  • While the examples infer that the error input is invalid because it's empty, and the other is valid because it's filled in, this visible text may include details necessary to help either remedy or otherwise understand the state and the id of the validation text should also be referenced with the aria-describedby on the input.
  • Remove role="alert", aria-live="assertive", and aria-atomic="true" from the validation text.

CleanShot_2022-08-02_at_18.18.26_2x

Edited by Jeremy Elder