DEV Community

Neha Sharma
Neha Sharma

Posted on

2

Making Error Messages Accessible

In order to provide a user-friendly experience, it is crucial to make sure that errors in digital application forms are easily accessible. This not only ensures accessibility of the forms themselves, but also makes it easier for users to understand and resolve any mistakes.

Here, we will outline several ways to make error messages accessible for users.

1 . Provide clear error messages

The error message should clearly describe the problem and suggest a solution.

2 . Use accessible error styling

Make sure the error messages are visually noticeable and distinguishable from other content on the page, for example, by using color contrast or adding a visible border around the error message.

3 . Associate error messages with specific fields

Link error messages with specific form fields using the aria-describedby attribute on the form field and the id attribute on the error message.

4 . Make error messages keyboard accessible

Ensure that keyboard-only users can access the error messages by including them in the keyboard tab order.

5 . Use accessible error symbols

Consider using symbols such as an exclamation mark or an asterisk to indicate that an error has occurred, but make sure the symbols are also described in text for screen reader users.

Here's an example of HTML code:

<label for="email">Email:</label>
<input type="email" id="email" name="email" required aria-describedby="email-error">
<div id="email-error" role="alert" class="error-message">
  Please enter a valid email address.
</div>

Enter fullscreen mode Exit fullscreen mode

Happy Learning!!

Follow me on Twitter

Tiugo image

Fast, Lean, and Fully Extensible

CKEditor 5 is built for developers who value flexibility and speed. Pick the features that matter, drop the ones that don’t and enjoy a high-performance WYSIWYG that fits into your workflow

Start now

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Dive into this insightful write-up, celebrated within the collaborative DEV Community. Developers at any stage are invited to contribute and elevate our shared skills.

A simple "thank you" can boost someone’s spirits—leave your kudos in the comments!

On DEV, exchanging ideas fuels progress and deepens our connections. If this post helped you, a brief note of thanks goes a long way.

Okay