Posts/Web development/HTML & accessibility

Question

Where should focus move after a server-validated form fails?

The form returns several validation errors after submit. Each input has an inline error, but keyboard and screen-reader users are not told that submission failed.

<label for="email">Email</label>
<input id="email" aria-describedby="email-error">
<p id="email-error">Enter a valid email.</p>

Should focus move to the first invalid field or to an error summary?

posted by Maya Chen · 331 views

1 answer

For a page-level submission, focus a heading or summary that explains the failure and links to each invalid field. This gives users the complete picture before they decide where to go.

<div role="alert" tabindex="-1" id="error-summary">
  <h2>There are 2 problems</h2>
  <a href="#email">Enter a valid email</a>
</div>

Use JavaScript to focus the summary after the server response, preserve the inline messages, and mark invalid controls with aria-invalid="true".

Accepted answerposted by Diego Ramirez

Where should focus move after a server-validated form fails?

1 answer

Your response

Related Web development posts