Skip to content

Commit

Permalink
Update forms validation accessibility guidance (#684)
Browse files Browse the repository at this point in the history
* Update forms validation accessibility guidance
  • Loading branch information
JoyceZhu authored Dec 1, 2023
1 parent 3373d0c commit a5f2ded
Showing 1 changed file with 2 additions and 0 deletions.
2 changes: 2 additions & 0 deletions content/ui-patterns/forms/overview.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,9 @@ When the form fails validation, guide the user to the invalid inputs:

- If the form has 3 or more errors, you may show an [interactive summary of errors](#interactive-summary-of-errors)
- If an interactive summary of errors is not shown, the first invalid input should be focused and scrolled into the viewport
- Each invalid `input` should be marked as `aria-invalid=true`
- The inline error message should be tied to each invalid input using `aria-describedby`
- If the inline error message is removed from the DOM, _also_ remove the `aria-describedby` attribute from the form input.

Live regions should not be used for form validation. Always use focus management (e.g. moving focus to the first link in the interactive summary, or the first invalid field), and appropriate markup to connect the error message to the field.

Expand Down

0 comments on commit a5f2ded

Please sign in to comment.